Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

2.3.4BS Move categories list to top in responsive view


LBManiac

Recommended Posts

In bootstrap 2.3.4 how do I move the list of categories to stay at the top. In full screen the categories menu appears on the left but on a mobile it moves below the body section with new products etc. The categories menu is the first thing people need to click on to find the product category they wish to view and having this remain at top saves scrolling down each time.

 

I have tried changing the sort order of the module but this only seems to position it within the index nested section.

Link to comment
Share on other sites

@@LBManiac

 

I had done this on a site I built a couple of years ago. PM me if you want a link to that site.

 

If I remember correctly, the code to include the Left Column and Right Column is in catalog/includes/template_bottom.php 

 

So, on a small screen, this displays things in this order: Body, Left Column, Right Column

 

I took the code for the left column out of template_bottom.php, and added it to the bottom of template_top.php.

 

The page still displays the same on large screens, but anything in the left column is now above the body on small screens. Since I only had the products/catagories box in the left column, this worked for me.

 

HTH

 

Malcolm

Link to comment
Share on other sites

Hello Luke @@LBManiac,

 

you can replace the categories side box by the header categories menu:

http://addons.oscommerce.com/info/9375

or the navbar categories menu:

http://addons.oscommerce.com/info/9442

 

You can modify the template files to show the standard categories box on desktop (big devices) and show the header/navbar menu only on small devices.

Here the bootstrap responsive utilities to do it:

http://getbootstrap.com/css/#responsive-utilities

 

rgds

Rainer

Link to comment
Share on other sites

@@LBManiac

 

I had done this on a site I built a couple of years ago. PM me if you want a link to that site.

 

If I remember correctly, the code to include the Left Column and Right Column is in catalog/includes/template_bottom.php

 

So, on a small screen, this displays things in this order: Body, Left Column, Right Column

 

I took the code for the left column out of template_bottom.php, and added it to the bottom of template_top.php.

 

The page still displays the same on large screens, but anything in the left column is now above the body on small screens. Since I only had the products/catagories box in the left column, this worked for me.

 

HTH

 

Malcolm

Hi Malcolm,  thanks for the suggestion - Looking at the current layout there are 3 boxes in the left column which would move on top of the body section.  I think the reason I was asked about doing this is only to save scrolling down to the categories menu on the first page.  After that the categories all appear in the body section with images which make it easier to navigate.  I think on the grander scale of things to fix it this way would create a solution on page 1 but then the customer will have to scroll past the categories each time they want to see a product so I think it will be best to leave it as it.  Would like to see the site you did it with as it would be interesting to see how it looks.

 

Hello Luke @@LBManiac,

 

you can replace the categories side box by the header categories menu:

http://addons.oscommerce.com/info/9375

or the navbar categories menu:

http://addons.oscommerce.com/info/9442

 

You can modify the template files to show the standard categories box on desktop (big devices) and show the header/navbar menu only on small devices.

Here the bootstrap responsive utilities to do it:

http://getbootstrap.com/css/#responsive-utilities

 

rgds

Rainer

 

Hi Rainer,  I tried the Navbar categories addon as that would be good for mobile devices to get access to the categories menu at the top.  Unfortunately after install it does not appear on the site, it mentions about a modular navbar addon being required as far as I am aware in the bootstrap edition the navbar already is modular so it may be that addon is not designed to integrate into the built in 2.3.4BS navbar.  I'm not sure though maybe I need to do something differently.

 

There are quite a large number of categories so I don't think the horizontal option would work.

Link to comment
Share on other sites

@@LBManiac,

 

 

Hi Rainer,  I tried the Navbar categories addon as that would be good for mobile devices to get access to the categories menu at the top.  Unfortunately after install it does not appear on the site, it mentions about a modular navbar addon being required as far as I am aware in the bootstrap edition the navbar already is modular so it may be that addon is not designed to integrate into the built in 2.3.4BS navbar.  I'm not sure though maybe I need to do something differently.

 

I have this installed on my demostore with the modular navbar included in the latest EDGE versions and it works for me. ANother issue is that it shows on mobile view under the hamburger button. But if you compare and copy the "Home" setting of the standard navbar modules, you can make it visible in the Mobile view navbar.

 

 

There are quite a large number of categories so I don't think the horizontal option would work.

 There is a specific xs version for mobile included which shows all categories under one drop down menu. You can use it with little changes of the responsive utility class also on big devices or continue using there the categories box.

 

In general OSC 2.3.4 Bootstrap and it's Add-ons are very flexible and what on a first glance looks like it doesn't serve for your needs may be easy adaptable.

 

rgds

Rainer

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...