Solved

Pagination of Products Doesn't work on Page

55trexodore
Shopify Partner
9 0 33

I am trying to create a custom page that shows inventory for our wholesalers for all products and is paginated. For whatever reason, the products in the for loop do not paginate. The pagination navigation shows all of the pages for our products but when clicked it still shows the same first 25 products no matter what page it is on. 

 

{%- assign featured_collection = section.settings.collection -%}
{% paginate featured_collection.products by 25 %}
<h1>{{section.settings.heading}}</h1>
{{ paginate | default_pagination: next: '>', previous: '<' }}
<table>
  <tr>
    <th>Collection</th>
    <th>Item Name</th>
    <th>Mockup</th>
    <th>Design Code / Season</th>
    <th>Wholesale Price</th>
    <th>Available Sizes</th>
    <th>Total Available</th>
  </tr>

  {% for product in featured_collection.products %}
    {% assign total_inventory = 0 %}
    {% assign sku_length = product.first_available_variant.sku | size | minus: 1%}
    <tr>
      <td>{{product.collections[1].title}}</td>
      <td>{{product.title}}</td>
      <td><img src="{{product.featured_image | image_url }}" alt=""></td>
      <td>{{product.first_available_variant.sku | slice: 0,sku_length  }}</td>
      <td>{{product.price | times: 0.5 | money }}</td>
      <td>
        {% for variant in product.variants %}
          {{variant.option1}}: {{variant.inventory_quantity}}<br>
          {% assign total_inventory = total_inventory | plus: variant.inventory_quantity %}
        {% endfor %}
      </td>
      <td>{{total_inventory}}</td>
    </tr>
  {% endfor %}
  
</table>
{{ paginate | default_pagination: next: '>', previous: '<' }}
{% endpaginate %}
{% style %}
  td img {
    max-height: 300px;
  }
{% endstyle %}

{% schema %}
{
    "name": "Inventory Table",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading"
      },
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      }
    ],
    "presets": [
      {
        "name": "Inventory Table",
        "category": "Store information"
      }
    ]
}
{% endschema %}

 

 

 

 

www.greatstateclothing.com/pages/inventory

Accepted Solution (1)

Jason
Shopify Expert
11191 225 2283

This is an accepted solution.

Pagination will only work in templates that support it. You can not paginate a collection in a page template. The Page template isn't given the pagination data so even though your code looks good it just can't run.

 

So what you're seeing is the expected result.

You could look to pull in the additional pages with AJAX calls instead. It means doing more with JavaScript but you'd still get a similar result.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★

View solution in original post

Replies 2 (2)

Jason
Shopify Expert
11191 225 2283

This is an accepted solution.

Pagination will only work in templates that support it. You can not paginate a collection in a page template. The Page template isn't given the pagination data so even though your code looks good it just can't run.

 

So what you're seeing is the expected result.

You could look to pull in the additional pages with AJAX calls instead. It means doing more with JavaScript but you'd still get a similar result.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
55trexodore
Shopify Partner
9 0 33

@Jason

I just made an alternate collection template and made a new collection for it and that worked! Thank you!