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
148 23 30

@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
148 23 30

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

0 Likes