X-Cart forums - light responsive category menu

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - light responsive category menu (https://forum.x-cart.com/showthread.php?t=72165)

light responsive category menu

So on the Light Responsive template, when it is viewed on anything where the mobile_header is invoked, the shopping categories are dropped to the very bottom of the page, and there is no category drop down on the mobile header (which i would expect, as a user)

so, I've been playing with it a bunch - I can get it to work if I turn off fancy categories; but I want fancy categories (I have only a handful of categories for this site).

Is there a way to modify the categories.tpl (or .php file, even), so that I can use the non-fancy categories on the mobile_header menu, and use fancy categories on the desktop site? I've tried everything I can think of, and my eyes and brain are going buggy, so I figured I'd toss this out there.

ALSO - in the light responsive template, if you want your images to be responsive, you need to modify the product_thumbnail.tpl - I made the image width into max-width, and before that I placed a width="100%" - which means that it will go to 100%, but not larger than the defined size.

Re: light responsive category menu

Ok - so, figured it out. If anybody else cares, here's what I did:

First, I created a new file in light_responsive -> customer and named it mobile_categories.tpl

The contents of the file look like this:

Code:

{if $categories_menu_list ne '' or $fancy_use_cache}

{capture name=menu}



    {foreach from=$categories_menu_list item=c name=categories}

      <li{interline name=categories foreach_iteration="`$smarty.foreach.categories.iteration`" foreach_total="`$smarty.foreach.categories.total`"}><a href="home.php?cat={$c.categoryid}" title="{$c.category|escape}">{$c.category|amp}</a></li>

    {/foreach}



  {assign var="additional_class" value="menu-categories-list-simple"}



{/capture}



    <ul>

      {$smarty.capture.menu}

    </ul>



{/if}

Then, in mobile_header.tpl, I added the following code immediately after the first ul:

Code:

    <li class="dropdown">

      <a id="main-menu-toggle" class="dropdown-toggle" href="#">

        <span class="fa fa-th-list"></span>

      </a>

      <div id="categories-menu-box" class="dropdown-menu">



        {include file="customer/mobile_categories.tpl"}

        



      </div>

    </li>

the span class fa-th-list - I chose that because I liked that it was similar but different to the "list" icon - you can see an entire list of options at http://astronautweb.co/snippet/font-awesome/ - the file that references that class is in skin -> common_files -> css -> font-awesome.min.css

I think that's it. when you "shrink" your desktop screen, or look at it on a phone screen, you'll see the extra dropdown nav full of categories. Now, my site doesn't have that many root categories - I have NO clue how this will work if you have tons of root categories (although I'll know in a few weeks when I upgrade my main site to 4.7.2, as I have like 100 root categories on that site...)

Re: light responsive category menu

To add scrolling to the pop up category menu you can also add this to your changes. This works for if you have a ton of categories, like I do.

To the bottom of mobile_categories.tpl add a new class to the ul, I added "mobile-menu-d" as my new class.

Code:



    <ul class="mobile-menu-d">

      {$smarty.capture.menu}

    </ul>

Then in altskin.css add the following under "@media screen and (max-width933px)" somewhere around line #3230 of altskin.css.

Code:



.mobile-menu-d{

        max-height: 400px;

        overflow-y: scroll;

        overflow-x: hidden;

        

}

The height is editable to taste, I found 400px to be a decent height on my phone but it may change later. It works with touch scrolling on iPhone and Android for what I can tell, but I have not tested it on a huge range of devices.

Re: light responsive category menu

I've just started working on this template and I agree about the position of the categories list in mobile view, but can you elaborate a little on your comment at the start of the thread regarding responsive images please Chris?

Quote:

Originally Posted by christindall

ALSO - in the light responsive template, if you want your images to be responsive, you need to modify the product_thumbnail.tpl - I made the image width into max-width, and before that I placed a width="100%" - which means that it will go to 100%, but not larger than the defined size.

I don't understand what is needed.

Many thanks

Welly