SergeiG Posted May 4, 2017 Share Posted May 4, 2017 Hello! I changed content.category.php for traditional pagination, according to internal comment. However, in desktop version I have number of pages buttons _and_ more button. In mobile version it lloks properly. Screenshot is attached, the piece of code is following next. Where did I a mistake? {* Uncomment for traditional pagination *} <div class="row"> <div class="small-12 large-9 columns"> {$PAGINATION} </div> <div class="large-3 columns show-for-medium-up"> <dl> <dd> <select class="url_select"> {foreach from=$PAGE_SPLITS item=page_split} <option value="{$page_split.url}"{if $page_split.selected} selected{/if}>{$page_split.amount}</option> {/foreach} </select> </dd> </dl> </div> </div> {* Add "hide-for-small-up" to the class attribute to not display the more button *} <div class="hide-for-small-up" id="ccScrollCat">{$category.cat_id}</div> {if $page!=='all' && ($page < $total)} {$params[$var_name] = $page + 1} <a href="{$current}{http_build_query($params)}{$anchor}" data-next-page="{$params[$var_name]}" data-cat="{$category.cat_id}" class="button tiny expand ccScroll-next">{$LANG.common.more} <svg class="icon"><use xlink:href="#icon-angle-down"></use></svg></a> {/if} </div> <div class="hide-for-small-up" id="lang_loading">{$LANG.common.loading}</div> Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 4, 2017 Share Posted May 4, 2017 Perhaps it's a cache issue?? Be sure to clear all CC cache except images AND your browser cache as well. PS Sergei - the <> in the post menu gives you a box to save code in - without it sometimes it doesn't appear properly - like it's trying to execute the code or something. Quote Link to comment Share on other sites More sharing options...
bsandall Posted May 4, 2017 Share Posted May 4, 2017 There is an open bug report on GitHub about this. For now, do not use traditional pagination. 1 Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 4, 2017 Share Posted May 4, 2017 Well this is a little different, but if clearing cache doesn't fix it - I'll add this thread link to the GitHub post. Quote Link to comment Share on other sites More sharing options...
SergeiG Posted May 4, 2017 Author Share Posted May 4, 2017 6 minutes ago, Dirty Butter said: Well this is a little different, but if clearing cache doesn't fix it - I'll add this thread link to the GitHub post. I cleaned cache on both sides (browser and hosting), unfortunately, it didn't help. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 4, 2017 Share Posted May 4, 2017 Sorry. I added this thread link to the GitHub post. In the meantime try commenting out this whole section and see what happens: {* Add "hide-for-small-up" to the class attribute to not display the more button *} <div class="hide-for-small-up" id="ccScrollCat">{$category.cat_id}</div> {if $page!=='all' && ($page < $total)} {$params[$var_name] = $page + 1} <a href="{$current}{http_build_query($params)}{$anchor}" data-next-page="{$params[$var_name]}" data-cat="{$category.cat_id}" class="button tiny expand ccScroll-next">{$LANG.common.more} <svg class="icon"><use xlink:href="#icon-angle-down"></use></svg></a> {/if} </div> <div class="hide-for-small-up" id="lang_loading">{$LANG.common.loading}</div> Quote Link to comment Share on other sites More sharing options...
SergeiG Posted May 5, 2017 Author Share Posted May 5, 2017 21 hours ago, Dirty Butter said: Sorry. I added this thread link to the GitHub post. In the meantime try commenting out this whole section and see what happens: {* Add "hide-for-small-up" to the class attribute to not display the more button *} <div class="hide-for-small-up" id="ccScrollCat">{$category.cat_id}</div> {if $page!=='all' && ($page < $total)} {$params[$var_name] = $page + 1} <a href="{$current}{http_build_query($params)}{$anchor}" data-next-page="{$params[$var_name]}" data-cat="{$category.cat_id}" class="button tiny expand ccScroll-next">{$LANG.common.more} <svg class="icon"><use xlink:href="#icon-angle-down"></use></svg></a> {/if} </div> <div class="hide-for-small-up" id="lang_loading">{$LANG.common.loading}</div> I have tried to comment whole this piece. It gives positive and negative results: 1) Positive. At desktop - no 'More' button, everything is fine 2) Negative. At mobile version I don't have any tools to reach the next page. Which file should contain a description the 'hide-for-small-up' class? Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 5, 2017 Share Posted May 5, 2017 Without doing anything to comment out the section - what happens on mobile? Do you see More and Pagination on small? Quote Link to comment Share on other sites More sharing options...
SergeiG Posted May 5, 2017 Author Share Posted May 5, 2017 1 minute ago, Dirty Butter said: Without doing anything to comment out the section - what happens on mobile? Do you see More and Pagination on small? All scenarios: 1) Original file version: Desktop - More Mobile - More 2) Unhided traditional pagination/ No add "hide-for-small-up" to the class attribute Desktop - Pages numbers and More Mobile - More 3) Unhided traditional pagination/ Add "hide-for-small-up" to the class attribute (I checked two classes - "hide-for-small-up" and "hide hide-for-small-up". Same results) Desktop - Pages numbers and More Mobile - More 4) Unhided traditional pagination/ Commented bottom sections Desktop - Pages numbers Mobile - nothing Actually, the name 'hide-for-small-up' sounds strange, according to logic it should be 'hide-for-medium-up' or 'show-for-small-up'. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 5, 2017 Share Posted May 5, 2017 21 minutes ago, SergeiG said: Actually, the name 'hide-for-small-up' sounds strange, according to logic it should be 'hide-for-medium-up' or 'show-for-small-up'. Well the idea I guessed was to keep it from showing at all if pagination was wanted. I'm sorry, but I have suggested everything I know how. Since we know there is a bug report concerning pagination, and I've added your issue to it - best to follow @bsandall's advice and use More for now. Quote Link to comment Share on other sites More sharing options...
bsandall Posted May 5, 2017 Share Posted May 5, 2017 (edited) There is a bug in the foundation skin that prevents the 'More' button from being hidden - see this PR for how to fix it. 'hide-for-small-up' means that the element will be hidden for all window sizes of small or larger. However, as you noted, this means it will not display for mobile, which defeats the purpose - you should indeed change it to 'hide-for-medium-up' or your mobile users will not have any way to paginate. One other thing - this line: <div class="hide-for-medium-up" id="ccScrollCat">{$category.cat_id} The {$category.cat_id} should be removed or you will have a seemingly random (to the customer) number show up just above the 'More' button. Removing this does not appear to have any effect on the button's functionality. Edited May 5, 2017 by bsandall 1 Quote Link to comment Share on other sites More sharing options...
SergeiG Posted May 5, 2017 Author Share Posted May 5, 2017 49 minutes ago, bsandall said: There is a bug in the foundation skin that prevents the 'More' button from being hidden - see this PR for how to fix it. 'hide-for-small-up' means that the element will be hidden for all window sizes of small or larger. However, as you noted, this means it will not display for mobile, which defeats the purpose - you should indeed change it to 'hide-for-medium-up' or your mobile users will not have any way to paginate. One other thing - this line: <div class="hide-for-medium-up" id="ccScrollCat">{$category.cat_id} The {$category.cat_id} should be removed or you will have a seemingly random (to the customer) number show up just above the 'More' button. Removing this does not appear to have any effect on the button's functionality. Thank you! It works fine!!! Quote Link to comment Share on other sites More sharing options...
bsandall Posted May 5, 2017 Share Posted May 5, 2017 I also fixed the bug raised in the other pagination issue - take a look if you want to get it before the next release. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 5, 2017 Share Posted May 5, 2017 Fantastic!! Thank you for your patience and perseverance. @SergeiG ! Glad you were on the forum, @bsandall! Quote Link to comment Share on other sites More sharing options...
bsandall Posted May 16, 2017 Share Posted May 16, 2017 @SergeiG Turns out {$category.cat_id} was needed for the 'More' button pagination to work; the instructions for hiding the button should have been above the <a> element rather than the <div>. See current template in the 6.1.8 branch for what yours should look like. To hide the button, add 'hide-for-medium-up' to the class list of the <a> element directly below the instructions in the current code. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 16, 2017 Share Posted May 16, 2017 </div> *} <div class="hide" id="ccScrollCat">{$category.cat_id}</div> {if $page!=='all' && ($page < $total)} {$params[$var_name] = $page + 1} {* Add "hide-for-medium-up" to the class attribute to not display the more button *} <a href="{$current}{http_build_query($params)}{$anchor}" data-next-page="{$params[$var_name]}" data-cat="{$category.cat_id}" class="button tiny expand ccScroll-next">{$LANG.common.more} <svg class="icon"><use xlink:href="#icon-angle-down"></use></svg></a> {/if} </div> <div class="hide" id="lang_loading">{$LANG.common.loading}</div> This is the correct code for 6.1.7 skin/templates/content.category.php. 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.