Jump to content

How to change grid columns on Foundation medium


Recommended Posts

This is what I did, but I'm not satisfied.

<div id="ccScroll">
   <ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-3 product_list" data-equalizer>

Of course, I don't know what I'm doing with regard to Foundation.

Link to comment
Share on other sites

I always appreciate your help! It did not work for me, however. I set my browser window to a medium size. Then I set FireFox to delete cookies, history, active logins, and cache on close, cleared all CC cache. When I opened FF I opened the medium width storefront, but it still showed 3 very squished columns.

I wouldn't mind it being list view, if that's easier to do. It does automatically change to one column list for small.

Link to comment
Share on other sites

Excellent observation!

In the file 2.cubecart.js, near line 409, there is:

if(Foundation.utils.is_medium_up()) {
  $('.product_list').removeClass('small-block-grid-1');
  $('.product_list').addClass('small-block-grid-3');
}

I do not (yet) understand how a "small" designation gets applied to a "large" viewport, but we see that the javascript adds the specific small-block-grid-3 class instead of what was there to begin with. (This is bad programming, in that your custom design wishes are overridden by an event outside the arena of where such decisions have been made.)

Now, if there were code that would first find out what the existing configuration is, and assign that to a variable, then this code could reset the configuration according to that established state.

 

Link to comment
Share on other sites

The main change I have already made to content.category,php was to move the thumbnail image for list view to above the product name. The stock arrangement makes such a tiny thumbnail you can't even tell what toy is in the picture.

Could I change that to something like this?? Obviously I''m just playing around with the code - I have no idea how .js works.

if(Foundation.utils.is_medium) {
  $('.product_list').removeClass('small-block-grid-1');
  $('.product_list').addClass('small-block-grid-2');

else(Foundation.utils.is_large) {
  $('.product_list').removeClass('small-block-grid-1');
  $('.product_list').addClass('small-block-grid-3');
}

 

Link to comment
Share on other sites

I don't have the mobile equipment to test on, but based on changing browser window sizes - I think I have a good look to it. I realized it was the side nav categories that are squishing the 3 columns on medium. So I used your information about 2.cubecart.js to change it to small-block-grid-2

 $.when($('.product_list').fadeOut(duration, function() {
        if(Foundation.utils.is_medium_up()) {
            $('.product_list').removeClass('small-block-grid-1');
            $('.product_list').addClass('small-block-grid-2');
        }

And I changed content.homepage.php to

 <h2>{$LANG.catalogue.latest_products}</h2>
   <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3" data-equalizer>
  

 

Link to comment
Share on other sites

"I don't have the mobile equipment to test on."

Neither do I. But I use Firefox's tool in Tools, Web Developer, Responsive Design View, which gives me a list of typical viewport sizes.

Also, the Firefox add-on, Go-Mobile!

 

Link to comment
Share on other sites

Thank you for the info about the FireFox Responsive Design View. Very helpful!!

One thing I had already noticed, and the Responsive View confirms it - on Medium if it's on list and then changed to grid - it works as expected. Click back to list, however, and it kind of looks like list view in 2 columns. Refresh page and it shows the grid view. I saw there's a cookie time in 2.cubecart.js. Could that have something to do with this behavior?

Edited by Dirty Butter
Link to comment
Share on other sites

  • 1 month later...

Hi all, 

 

I used this instruction as the basis for making my category view into a 4 wide grid, which worked a treat with one additional edit on 2.cubecart.js, which was missing from dirty butters implementation. I was having some unexpected behaviour when changing views after moving to 4 wide. 

408    $.when($('.product_list').fadeOut(duration, function() {
409       if(Foundation.utils.is_medium_up()) {
410            $('.product_list').removeClass('small-block-grid-1');
411            $('.product_list').addClass('small-block-grid-4');

 

433    $.when($('.product_list').fadeOut(duration, function() {
434        $('.product_list').removeClass('small-block-grid-4');

Link to comment
Share on other sites

My opinion:

I'm not keen to have layout logic in the javascript special effects. Code such as this means you need to go chasing down multiple locations to make layout changes.

This code should use an alternate class attribute specified in the switcher tool and use the details there.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...