Adding Dropdown Menu for Number of Products Per Page

VishCee
Tourist
10 0 1

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! 

 

 

 

Replies 14 (14)
Sasha2
Shopify Partner
171 22 44

@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

 

VishCee
Tourist
10 0 1

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. 

Sasha2
Shopify Partner
171 22 44

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

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

Sasha2
Shopify Partner
171 22 44

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.

SantiagoCruz
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?

Sasha2
Shopify Partner
171 22 44

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

 

dpotterbonar
New Member
2 0 0

I have been trying to figure it out, but is there a way to add a step  in the drop down, e.g., 20, 30 40 50 as the drop down options. I know that ruby has the step method which would be a contender to accomplish this, but I am not yet familiar enough with liquid to figure out what the implementation might look like. any guidence would be appreciated.

Sasha2
Shopify Partner
171 22 44

@dpotterbonar 

Sure, here how will looks the select tag with the "Step" feature:

 

{% assign step = 10 %}

<select name="paginateBy" id="paginateBy" class="collection-sort__input">
  {% for i in (4..50) %}
    {% assign modulo = i | modulo: step %}
    {% unless modulo == 0 %}{% continue %}{% endunless %}
    {% 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>

 

dpotterbonar
New Member
2 0 0

Thank you so much. It worked like a charm.

BradleyDevilier
Tourist
8 0 2

Hey Sasha,

I have been trying to replicate this into the debut theme but the javascript doesn't seem to work. I've gotten my products per page dropdown to function properly and you can click different values and it will update, but the java doesn't run so the page never refreshes and takes on new values. I was using the same java at the start of the thread. Is it because of the line in the java url: '/cart.js' not being existent in my theme?

Any help would be appreciated, thanks. 

Sasha2
Shopify Partner
171 22 44

Hi @BradleyDevilier 

Yeah, it is because the Debut theme does not use the JQuery library by default.

But you can connect it by adding the code 

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' | script_tag }}

right before the {% javascript %} code-line mentioned in the first message of this thread.

So, as a result, the code should be:

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' | script_tag }}
{% 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 %}

 

BradleyDevilier
Tourist
8 0 2

Hey @Sasha2,

Unfortunately this did not work. Is there a certain place that I need to have my java? Currently, it is in a standalone asset that I created. 

Thanks

Sasha2
Shopify Partner
171 22 44

@BradleyDevilier Ah, sorry for the missunderstadng.

The code have to placed in the collection-template.liquid section - exactly as suggested in the topic message of the current thread.

Other mentions from the topic message have to be complied too.