Change product count for mobile users in New Products For ____

[whodah]

Hi all,

 

I'm using Bootstrap and I'd like to change the count of products in the "New Products For ____" box to be say 9 for desktop users (which is what it is now) and 3 for mobile users. (To help eliminate swipe-swipe-swiping to get to my Categories menu which shows up at the bottom for my mobile users underneath the "New Products For ____" box (and on the left-hand menu for my desktop users)).

 

Any ideas/pointers?

 

Thanks! 

[MrPhil]

If you're using 2.3.4BS (Bootstrap responsive), it should be placing the boxes side-by-side for PCs and vertically for phones. Is it working in other aspects? You might look at the HTML output to confirm that the appropriate classes are being used. Did you use some add-on for New Products, that is not Bootstrap enabled?

[whodah]

Hello,

 

That is all working nifty, thanks. 9 x products in "New Products For December" looks great on the desktop, and works on the phones how it is supposed to as you mentioned in your post above. But on phones, one has to swipe down ~5 screens to get to my categories menu (located in left-hand menu on desktops) in order to get past said 9 x products in "New Products For December". Hence I was hoping to only have 3 x products in "New Products For December" on mobile devices, but 9 for desktops. (Thus the customer only has to swip down 1, maybe 2 pages.) Make sense? Thoughts?

[MrPhil]

Ah, my misunderstanding. I read it as customers had to swipe (scroll) sideways to see everything on a phone. So it's just the sheer number of products that you want to reduce for phone users?

 

One thing I can think of is to modify the PHP code to change the class to specify xs-invisible (or whatever the exact class name is) for the last 6 entries. This should suppress them on a phone. However, I don't think there's then a way for a customer to then see them. Two-thirds of the products will be permanently hidden. How about just changing the number of products to 3 per page instead of 9?

 

The problem with responsive design (such as Bootstrap) rather than adaptive design is that apparently nothing gets fed back to the server, telling it that you're on a phone and need different (often less) data sent to the browser. With responsive, everything is sent to the browser and it decides (via JS and CSS) how to show it in different ways. Maybe someone could figure out how to add a "More products" button to unhide the 6 hidden products, or else rearrange the page to put your important links up above the 9 products (all of which are shown) when on a phone.