{%- liquid
# Determine the number of products per page
if cart.attributes.pagination != blank and cart.attributes.pagination
assign products_per_page = 2
else
assign products_per_page = 3
endif
-%}
<script src="{{ 'sticky-add-to-cart.js' | asset_url }}" defer="defer"></script>
<!-- Main Wrapper Start -->
<div class="wrapper">
<!-- Breadcrumb area Start -->
<div class="breadcrumb-area bg--white-6 pt--60 pb--70 pt-lg--40 pb-lg--50 pt-md--30 pb-md--40">
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<h1 class="page-title">{{ page_title }}</h1>
<ul class="breadcrumb justify-content-center">
<li><a href="{{ 'index.html' | url }}">Home</a></li>
<li class="current"><span>{{ 'Shop Pages' }}</span></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Breadcrumb area End -->
<!-- Main Content Wrapper Start -->
{%- paginate collection.products by products_per_page -%}
{% comment %} {{ collection.products | json }} {% endcomment %}
<div id="content" class="main-content-wrapper">
<div class="shop-page-wrapper">
<div class="container">
<div class="row">
<div class="col-12 pt--45 pt-md--35 pt-sm--20 pb--60 pb-md--50 pb-sm--40">
<div class="shop-toolbar">
<div class="shop-toolbar__inner">
<div class="row align-items-center">
<div class="col-md-6 text-md-start text-center mb-sm--20">
<div class="shop-toolbar__left">
<p class="product-pages">Showing 1–{{ collection.products_count }} of {{ collection.products_count }} results</p>
</div>
</div>
<div class="col-md-6">
<div class="shop-toolbar__right">
<a href="#" class="product-filter-btn shop-toolbar__btn">
<span>{{ 'Filters' }}</span>
<i></i>
</a>
{% comment %} <select class="product-ordering " id="sort-by" style=" border: 1px solid #C5C5C5;
padding: 10px;
background: transparent;
color: #000;
border-radius: 25px;
}">
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
{% for option in collection.sort_options %}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
{{ option.name }}
</option>
{% endfor %}
</select> {% endcomment %}
<div class="product-ordering">
<a href="" class="product-ordering__btn shop-toolbar__btn">
<span>{{ 'Sort By' }}</span>
<i></i>
</a>
<ul class="product-ordering__list">
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
{% for option in collection.sort_options %}
<li {% if option.value == sort_by %}class="active"{% endif %}>
<a href="{{ collection.url }}?sort_by={{ option.value }}">
{{ option.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="advanced-product-filters">
<div class="product-filter">
<div class="row">
<!-- Categories filter -->
{% comment %} <div class="col-md-3">
<div class="product-widget product-widget--category">
<h3 class="widget-title">{{ 'Categories' }}</h3>
<ul class="product-widget__list">
{% assign available_categories = collection.products | map: 'product.type' | compact | uniq %}
{% for product in collection.products %}
<p>{{ product.type }}</p>
{% endfor %}
</ul>
</div>
</div> {% endcomment %}
<div class="col-md-3">
<div class="product-widget product-widget--price">
<h3 class="widget-title">{{ 'Price' }}</h3>
<ul class="product-widget__list">
{% assign price_ranges = collection.products | map: 'price' | compact | uniq | sort %}
{% for range in price_ranges %}
{% assign next_range = forloop.next | times: 10 %}
{% if forloop.last %}
<li>
<a href="{{ collection.url }}?price_min={{ range }}">
<span class="ammount">{{ range | money }}</span> +
</a>
</li>
{% else %}
<li>
<a href="{{ collection.url }}?price_min={{ range }}&price_max={{ next_range }}">
<span class="ammount">{{ range | money }}</span> -
<span class="ammount">{{ next_range | money }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% comment %} <div class="product-widget product-widget--price">
<h3 class="widget-title">{{ 'Prices' }}</h3>
<ul class="product-widget__list">
{% assign available_prices = collection.products | map: 'price' | compact | uniq %}
{% for price in available_prices %}
<li>
<a href="/price/{{ price | handle }}">
{{ price | money }}
</a>
</li>
{% endfor %}
</ul>
</div> {% endcomment %}
</div>
<!-- Brands filter -->
<div class="col-md-3">
<div class="product-widget product-widget--brand">
<h3 class="widget-title">{{ 'Brands' }}</h3>
<ul class="product-widget__list">
{% assign available_tags = collection.all_tags | compact | uniq %}
{% for tag in available_tags %}
<li>
<a href="/tag/{{ tag | handle }}">
{{ tag }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<!-- Colors filter -->
<div class="col-md-3">
<div class="product-widget product-widget--color">
<h3 class="widget-title">{{ 'Colors' }}</h3>
<ul class="product-widget__list product-color-swatch">
{% assign available_colors = collection.products | map: 'variants' | map: 'option2' | compact | uniq %}
{% for color in available_colors %}
<li>
<a href="{{ collection.url }}?color={{ color | handle }}"
class="product-color-swatch-btn {{ color | handle }}">
<span class="product-color-swatch-label">{{ color }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<!-- Sizes filter -->
<div class="col-md-3">
<div class="product-widget product-widget--size">
<h3 class="widget-title">{{ 'Sizes' }}</h3>
<ul class="product-widget__list">
{% assign available_sizes = collection.products | map: 'variants' | map: 'option1' | compact | uniq %}
{% for size in available_sizes %}
<li>
<a href="/size/{{ size | handle }}" >
<span>{{ size }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<!-- Add more filters as needed -->
</div>
<a href="#" class="btn-close"><i class="dl-icon-close"></i></a>
</div>
</div>
</div>
{%- if collection.products.size > 0 -%}
<div class="shop-products">
<div class="row">
{% for product in collection.products %}
<div class="col-12 mb--40 mb-md--30">
<div class="airi-product airi-product-list">
<div class="product-inner">
<figure class="product-image">
<div class="product-image--holder">
<a href="{{ product.url }}">
<img src="{{ product.featured_image.src | img_url: 'medium' }}"
alt="{{ product.title }}" class="primary-image">
{% if product.images.size > 1 %}
<img src="{{ product.images[1].src | img_url: 'medium' }}"
alt="{{ product.title }}" class="secondary-image">
{% endif %}
</a>
</div>
<div class="airi-product-action">
<div class="product-action">
<a class="quickview-btn action-btn card-product__group-item card-quickview card-quickviewIcon{% if settings.show_quick_view_mb %} show-mb{% endif %}{% if settings.product_quick_view_type == 'default' %} default{% endif %}"
href="#" onclick="void false" title="{{ 'products.product.quick_view' | t }}" data-product-id="{{ product.id }}" data-open-quick-view-popup data-product-handle="{{ product.handle }}">
<span class="visually-hidden">{{ 'products.product.quick_view' | t }}</span>
<span data-bs-toggle="modal" data-bs-target="#productModal">
<i class="dl-icon-view"></i>
</span>
</a>
</div>
</div>
</figure>
<div class="product-info">
<h3 class="product-title">
<a href="{{ product.url }}">{{ product.title }}</a>
</h3>
<span class="product-price-wrapper">
<span class="money">{{ product.price | money }}</span>
{% if product.compare_at_price > product.price %}
<span class="product-price-old">
<span class="money">{{ product.compare_at_price | money }}</span>
</span>
{% endif %}
</span>
<p class="product-short-description">
{{ product.description | truncate: 150 }}
</p>
<div class="product-btn-group">
<a href="#" class="btn btn-medium btn-style-1">{{ 'Add To Cart' }}</a>
<a href="#" class="btn btn-medium btn-style-1">{{ 'Add To Wishlist' }}</a>
<a href="#" class="btn btn-medium btn-style-1">{{ 'Add To Compare' }}</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{%- if paginate.pages > 1 -%}
{% render 'pagination-listing',
paginate: paginate,
show_infinite_scrolling: show_infinite_scrolling,
anchor: '',
class: 'pagination-wrapper text-center'
%}
{%- endif -%}
{%- endif -%}
</div>
</div>
</div>
</div>
</div>
{% endpaginate %}
</div>
{% comment %} {% comment %}
<script>
Shopify.queryParams = {};
// Preserve existing query parameters
if (location.search.length) {
var params = location.search.substr(1).split('&');
for (var i = 0; i < params.length; i++) {
var keyValue = params[i].split('=');
if (keyValue.length) {
Shopify.queryParams[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
}
}
} {% endcomment %}
{% comment %} // // Update sort_by query parameter on select change
// document.querySelector('#sort-by').addEventListener('change', function(e) {
// var value = e.target.value;
// Shopify.queryParams.sort_by = value;
// location.search = new URLSearchParams(Shopify.queryParams).toString();
// });
// </script>
// <script> {% endcomment %}
{% comment %} // // Add JavaScript to handle dropdown functionality
// document.addEventListener("DOMContentLoaded", function() {
// var dropdownBtn = document.querySelector('.product-ordering__btn');
// var dropdownList = document.querySelector('.product-ordering__list');
// dropdownBtn.addEventListener('click', function() {
// dropdownList.classList.toggle('show');
// });
// // Handle selection of an option
// dropdownList.addEventListener('click', function(e) {
// if (e.target.tagName === 'A') {
// var selectedValue = e.target.getAttribute('data-value');
// // Add logic to handle the selected value (e.g., trigger sorting)
// console.log('Selected value:', selectedValue);
// }
// });
// // Close the dropdown when clicking outside of it
// document.addEventListener('click', function(e) {
// if (!dropdownBtn.contains(e.target) && !dropdownList.contains(e.target)) {
// dropdownList.classList.remove('show');
// }
// });
// });
// </script> {% endcomment %} {% endcomment %}
Topic summary
A developer is experiencing a pagination malfunction on a Shopify collection page when filters are applied. The shared code snippet reveals a custom Liquid template implementing dynamic pagination (2-3 products per page based on cart attributes) alongside product filtering by size and color.
Key Technical Details:
- Pagination is controlled via
cart.attributes.pagination - Filter widgets for sizes and colors are built using
collection.productsvariants - The code appears corrupted or improperly formatted in sections (reversed/garbled text visible)
Current Status:
- No responses or solutions have been provided yet
- The discussion remains open with the core issue unresolved
- Missing information: specific error behavior, browser console errors, or steps to reproduce the pagination failure
The code formatting issues may be contributing to the problem, suggesting potential template syntax errors or encoding problems that could affect filter-pagination interaction.