Dirty Butter Posted May 8, 2015 Share Posted May 8, 2015 I would like for medium to have 2 columns grid view, instead of 3, OR use list view for small and medium (whichever is simpler to code). Grid works fine for large. How do I modify content.category.php? Quote Link to comment Share on other sites More sharing options...
bsmither Posted May 8, 2015 Share Posted May 8, 2015 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. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 8, 2015 Author Share Posted May 8, 2015 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted May 8, 2015 Share Posted May 8, 2015 Looking at "Infantino" in grid view with a narrow browser window, I get two columns. (List view is bad.)I see you still have small-block-grid-3. Try small-block-grid-1. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 8, 2015 Author Share Posted May 8, 2015 I've played with it so much I may have to go back to stock and start again. I don't have small-block-grid-3 in content.category.php, but who knows where it is coming from. Quote Link to comment Share on other sites More sharing options...
bsmither Posted May 9, 2015 Share Posted May 9, 2015 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. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 9, 2015 Author Share Posted May 9, 2015 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'); } Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 10, 2015 Author Share Posted May 10, 2015 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> Quote Link to comment Share on other sites More sharing options...
bsmither Posted May 10, 2015 Share Posted May 10, 2015 "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! Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 11, 2015 Author Share Posted May 11, 2015 (edited) 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 May 11, 2015 by Dirty Butter Quote Link to comment Share on other sites More sharing options...
kealan Posted June 16, 2015 Share Posted June 16, 2015 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'); Quote Link to comment Share on other sites More sharing options...
bsmither Posted June 16, 2015 Share Posted June 16, 2015 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. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted June 16, 2015 Author Share Posted June 16, 2015 This code should use an alternate class attribute specified in the switcher tool and use the details there. Should this be reported to GitHub? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.