Jump to content

{Resolved with Patch] Traditional pagination in Foundation skin


Recommended Posts

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>
 

more.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>
  

 

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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'.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by bsandall
  • Like 1
Link to comment
Share on other sites

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!!!

Link to comment
Share on other sites

  • 2 weeks later...

@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.

Link to comment
Share on other sites

   </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.

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...