Adding Dropdown Menu for Number of Products Per Page

Highlighted
Tourist
10 0 0

Hello! 

 

I'm using the Debut Theme, I'd like to add this feature to my collections page. 

Something like this:

https://miro.medium.com/max/1400/1*Dfgx8v8gZb934MmZRWMFaQ.png

 

I found a link that says I can accomplish in 3 steps:

1. Go to collection-template.liquid and add the ff at the end:

{% javascript %}
/* Bind a change event to the dropdown */
$('#paginateBy').on('change', function(){
/* Get the current value. Some value validation could be added here (but we don't) */
var val = $(this).val();
/* Send the value as a cart attribute via the AJAX API */
$.ajax({
type: "POST",
url: '/cart.js',
data: {"attributes[pagination]": val}, /* We are using an attribute named "pagination" */
success: function(d){
window.location.reload();
},
dataType: 'json'
});
});
{% endjavascript %}

 

2.  Replace this: 

{% if section.settings.layout == 'grid' %}
{%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% else %}
{%- assign limit = 16 -%}
{% endif %}

 

TO THIS: 

{% if section.settings.layout == 'grid' %}
{%- assign limit = cart.attributes.pagination -%}
{% else %}
{%- assign limit = cart.attributes.pagination -%}
{% endif %}

 

3. Add these lines of code into where you want to show the list of product per page:

 

< select name=”paginateBy” id=”paginateBy” class=”collection-sort__input”> {% for i in (4..50) %} {% assign v = i | append:’’ %} < option value=”{{ v }}”{% if cart.attributes.pagination != blank and cart.attributes.pagination %}{% if cart.attributes.pagination == v %} selected{% endif %}{% else %}{% if i == 40 %} selected{% endif %}{% endif %}>{{ i }} per page < /option> {% endfor %} < /select>

 

 

Could someone tell me where exactly to insert step 3? I've tried several places and it doesn't work. Thanks! 

 

 

 

0 Likes
Highlighted
Shopify Partner
154 23 32

@VishCee Hi there,

You have to add the code of select tag into the "collection-template.liquid" section, right after the <div class="filters-toolbar__item-wrapper"> tag.

By the way, the selection code has to be wrapped with a using Debut theme markup, here the correct select tag code:

              <div class="filters-toolbar__item-child">
                <div class="filters-toolbar__input-wrapper select-group">
                  <select name='paginateBy' id='paginateBy' class='collection-sort__input filters-toolbar__input'> {% for i in (4..50) %} {% assign v = i | append: '' %} <option value='{{ v }}'{% if cart.attributes.pagination != blank and cart.attributes.pagination %}{% if cart.attributes.pagination == v %} selected{% endif %}{% else %}{% if i == 40 %} selected{% endif %}{% endif %}>{{ i }} per page </option> {% endfor %} </select>
                  {% include 'icon-chevron-down' %}
                </div>
              </div>

Here the screenshot for reference:Screenshot_1.jpg

 

0 Likes
Highlighted
Tourist
10 0 0

Thank you, the dropdown menu showed up. But it somehow changed all my products to one per page, and regardless of how many products per page I clicked, it didn't change. 

0 Likes
Highlighted
Shopify Partner
154 23 32

@VishCee 

1. To show by default 40 products per page, not 1, kindly use next one code for the second step of your solution:

{% if section.settings.layout == 'grid' %}
{%- assign limit = cart.attributes.pagination | default: 40 -%}
{% else %}
{%- assign limit = cart.attributes.pagination | default: 40 -%}
{% endif %}

2. I have used the code of your solution for my Debut theme, and it's working correctly. Kindly share your store URL, so I will able to check why the solution is not working at your Debut theme.

Highlighted
New Member
2 0 0

@Sasha2 Hello, im follow all this steps and works... some little things to fix, but works... i have a important, questions... i have my first template on Narrative Theme, is possible... copy this setting from Debut... and apply to my Narrative theme? the same thing to create a new section for a Gallery slide... ? The most tutorials show everything on Debut Theme...

0 Likes
Highlighted
Shopify Partner
154 23 32

Hi @SantiagoCruz,

I have checked the Narrative theme and it is possible to use there the same functionality.

For the Narrative theme, the selection tag have to be inserted to the "collection-template.liquid" section right after the Collection description section:

narrative-theme-select-per-page-insert.png

 

As you may notice, the select tag does not contain the Icon snippet anymore:

{% include 'icon-chevron-down' %}

I can't use it because the Narrative theme doesn't have such snippet.

 

Let me know, if you will fill some difficulties with using my solution.

0 Likes
Highlighted
New Member
2 0 0

Hello @Sasha2 , thanks for the answer... well, after a lot of test, finally worked... but i put it few lines more down... and appear how you show me, looks fine... but... the selection doesn't works... i mean... appears the block on the site, but no change anything... the amount of products still equal

Screen Shot 2020-09-30 at 3.15.49 PM.png

In the image there are two blocks, I wanted test if the position could change something,,, but the number of products does not change per page. Maybe lack something in the scheme? or jquery?

0 Likes
Highlighted
Shopify Partner
154 23 32

Hi @SantiagoCruz 

 

Sorry for the so long reply. I hope you have already turnaround somehow the issue.

I just post my message for purpose if someone else will search a way to implement the "Number of Products Per Page" selection to the Narrative theme.

 

1. For the Narrative theme there is need to replace the code from the "collection-template.liquid" section, that placed at the first line:

{%- assign limit = section.settings.products | times: section.settings.rows -%}

to next one code:

{% if cart.attributes.pagination != blank %}
  {%- assign limit = cart.attributes.pagination %}
{% else %}
  {% assign limit = section.settings.products | times: section.settings.rows -%}
{% endif %}

 

2. The JavaScript code that mentioned in the first message of the current topic has to be placed not into the "collection-template.liquid" section, but into the asset "custom.js":

narrative-custom-js-file.png

 

0 Likes