Product display changes from list to grid on re-size

[nathanbright]

On CC6 using the Foundation skin

On a Windows browser, desktop size screen, I have my product category page set to "list" display (i.e. I have clicked on the list icon at top right of the list of products)

I then reduce the width of the browser window to simulate seeing the page on a mobile. Then click on the home icon whilst at this minimal screen size, then get back to the product category page by selecting it from the Shop By Category drop-down

Then re-size the page back up to desktop size, the display is now in grid layout not list

This is a problem for us (besides being unexpected behaviour) as in our skin, based on Foundation, I have removed the layout icons, so we can't get back to the desired list layout

I note that a cookie has been set called product_view, with value "grid"

Can anyone suggest a way I can get back to the list layout in these cases?

Do we think that the core code should not do this in the first place?

 

[bsmither]

Try this. In your Foundation skin javascript file, 2.cubecart.js, near line 280:

    /* We must only show grid view with 1 grid column for medium */
    if(Foundation.utils.is_small_only()) {
        grid_view(0);
    }
    if(Foundation.utils.is_medium_up()) {
        $('.field_small_only').attr('disabled', true);
    }

Change to:
    /* We must only show grid view with 1 grid column for small */
    if(Foundation.utils.is_small_only()) {
        grid_view(0);
    }
    /* But force back to list for medium-up */
    if(Foundation.utils.is_medium_up()) {
        $('.field_small_only').attr('disabled', true);
        list_view(0);
    }

 

This still keeps the cookies going, however. We can try to remove setting the cookie. In the same file, near lines 420 and 443:

420     $('.product_list').fadeIn(duration, function() {
            $.cookie('product_view', 'grid', {expires: 730});

443     $('.product_list').fadeIn(duration, function() {
            $.cookie('product_view', 'list', {expires: 730});

Change to:
        $('.product_list').fadeIn(duration);

        $('.product_list').fadeIn(duration);

 

[nathanbright]

Brilliant, thanks, exactly what I needed, really appreciated