shopify - shopify集合页面上的分页
问题描述
我想在shopify中修改收藏页面的分页。我想展示四个类别的产品，例如第一个应该是 - 20，第二个 - 30，第三个 - 40 和第四个应该是 - 所有产品。分页也适用于收藏页面。喜欢 -
查看：20 | 30 | 40 | 下面
是我的代码。但它不起作用。我想按编号过滤产品。
{% case section.settings.grid %}
{% when '2' %}
{%- assign max_height = 530 -%}
{% when '3' %}
{%- assign max_height = 345 -%}
{% when '4' %}
{%- assign max_height = 250 -%}
{% when '5' %}
{%- assign max_height = 195 -%}
{% endcase %}
{% if section.settings.layout == 'grid' %}
{%- assign limit = cart.attributes.pagination -%}
{% else %}
{%- assign limit = cart.attributes.pagination -%}
{% endif %}
{{cart.attributes.pagination}}
{% paginate collection.products limit %}
<div data-section-id="{{ section.id }}" data-section-type="collection-template">
<header class="collection-header">
<label for="paginateBy">Paginate By</label>
<select name="paginateBy" id="paginateBy">
{% for i in (1..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>
{% if section.settings.show_collection_image and collection.image %}
<div class="collection-hero">
<div class="collection-hero__image ratio-container lazyload js"
data-bgset="{% include 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-image: url('{{ collection.image | img_url: '300x300' }});"></div>
<noscript>
<div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '2048x600', crop: 'top' }});"></div>
</noscript>
<div class="collection-hero__title-wrapper">
<h1 class="collection-hero__title page-width">{{ collection.title }}</h1>
</div>
</div>
{% if collection.description != blank %}
<div class="rte collection-description page-width">
{{ collection.description }}
</div>
{% endif %}
{% else %}
<div class="page-width">
<div class="section-header text-center">
<h1>{{ collection.title }}</h1>
{% if collection.description != blank %}
<div class="rte">
{{ collection.description }}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
{% if section.settings.tags_enable or section.settings.sort_enable %}
<div class="filters-toolbar-wrapper">
<div class="page-width">
<div class="filters-toolbar">
{% if section.settings.tags_enable %}
<div class="filters-toolbar__item">
<label for="SortTags" class="label--hidden">{{ 'collections.filters.title_tags' | t }}</label>
<select class="filters-toolbar__input filters-toolbar__input--filter hidden" name="SortTags" id="SortTags">
{% if current_tags %}
{% if collection.handle %}
<option value="/collections/{{ collection.handle }}">{{ 'collections.filters.all_tags' | t }}</option>
{% elsif collection.current_type %}
<option value="{{ collection.current_type | url_for_type }}">{{ 'collections.filters.all_tags' | t }}</option>
{% elsif collection.current_vendor %}
<option value="{{ collection.current_vendor | url_for_vendor }}">{{ 'collections.filters.all_tags' | t }}</option>
{% endif %}
{% else %}
{% if current_tags contains tag %}
<option value="">{{ 'collections.filters.all_tags' | t }}</option>
{% else %}
<option value="">{{ 'collections.filters.title_tags' | t }}</option>
{% endif %}
{% endif %}
{% for tag in collection.all_tags %}
<option value="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
{% endfor %}
</select>
</div>
{% endif %}
<div class="filters-toolbar__item filters-toolbar__item--count">
<span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
</div>
{% if section.settings.sort_enable %}
<div class="filters-toolbar__item text-right">
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
<label for="SortBy" class="label--hidden">{{ 'collections.sorting.title' | t }}</label>
<select name="SortBy" id="SortBy" class="filters-toolbar__input filters-toolbar__input--sort hidden">
{% if sort_by == collection.default_sort_by %}
<option value="title-ascending" selected="selected">{{ 'collections.sorting.title' | t }}</option>
{% if collection.default_sort_by != 'manual' %}
<option value="manual"{% if sort_by == "manual" %} selected="selected"{% endif %}>{{ 'collections.sorting.featured' | t }}</option>
{% endif %}
{% if collection.default_sort_by != 'best-selling' %}
<option value="best-selling"{% if sort_by == "best-selling" %} selected="selected"{% endif %}>{{ 'collections.sorting.best_selling' | t }}</option>
{% endif %}
{% if collection.default_sort_by != 'title-ascending' %}
<option value="title-ascending"{% if sort_by == "title-ascending" %}selected="selected"{% endif %}>{{ 'collections.sorting.az' | t }}</option>
{% endif %}
{% if collection.default_sort_by != 'title-descending' %}
<option value="title-descending"{% if sort_by == "title-descending" %} selected="selected"{% endif %}>{{ 'collections.sorting.za' | t }}</option>
{% endif %}
{% if collection.default_sort_by != 'price-ascending' %}
<option value="price-ascending"{% if sort_by == "price-ascending" %} selected="selected"{% endif %}>{{ 'collections.sorting.price_ascending' | t }}</option>
{% endif %}
{% if collection.default_sort_by != 'price-descending' %}
<option value="price-descending"{% if sort_by == "price-descending" %} selected="selected"{% endif %}>{{ 'collections.sorting.price_descending' | t }}</option>
{% endif %}
{% if collection.default_sort_by != 'created-descending' %}
<option value="created-descending"{% if sort_by == "created-descending" %} selected="selected"{% endif %}>{{ 'collections.sorting.date_descending' | t }}</option>
{% endif %}
{% if collection.default_sort_by != 'created-ascending' %}
<option value="created-ascending"{% if sort_by == "created-ascending" %} selected="selected"{% endif %}>{{ 'collections.sorting.date_ascending' | t }}</option>
{% endif %}
{% else %}
<option value="manual"{% if sort_by == "manual" %} selected="selected"{% endif %}>{{ 'collections.sorting.featured' | t }}</option>
<option value="best-selling"{% if sort_by == "best-selling" %} selected="selected"{% endif %}>{{ 'collections.sorting.best_selling' | t }}</option>
<option value="title-ascending"{% if sort_by == "title-ascending" %}selected="selected"{% endif %}>{{ 'collections.sorting.az' | t }}</option>
<option value="title-descending"{% if sort_by == "title-descending" %} selected="selected"{% endif %}>{{ 'collections.sorting.za' | t }}</option>
<option value="price-ascending"{% if sort_by == "price-ascending" %} selected="selected"{% endif %}>{{ 'collections.sorting.price_ascending' | t }}</option>
<option value="price-descending"{% if sort_by == "price-descending" %} selected="selected"{% endif %}>{{ 'collections.sorting.price_descending' | t }}</option>
<option value="created-descending"{% if sort_by == "created-descending" %} selected="selected"{% endif %}>{{ 'collections.sorting.date_descending' | t }}</option>
<option value="created-ascending"{% if sort_by == "created-ascending" %} selected="selected"{% endif %}>{{ 'collections.sorting.date_ascending' | t }}</option>
{% endif %}
</select>
<input id="DefaultSortBy" type="hidden" value="{{ collection.default_sort_by }}">
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
</header>
<div class="page-width" id="Collection">
{% if section.settings.layout == 'grid' %}
{% case section.settings.grid %}
{% when '2' %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when '3' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when '4' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when '5' %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}
<div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
{% for product in collection.products %}
<div class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid', max_height: max_height %}
</div>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
<div class="grid__item">
<div class="grid grid--uniform">
{% for i in (1..limit) %}
<div class="grid__item {{ grid_item_width }}">
<div class="grid-view-item">
<a href="#" class="grid-view-item__link">
<div class="grid-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
<span class="product-price__price">$19.99</span>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</div>
{% else %}
<div class="list-view-items">
{% for product in collection.products %}
<a href="{{ product.url | within: collection }}" class="list-view-item">
{% include 'product-card-list', product: product %}
</a>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
{% for i in (1..4) %}
<a href="#" class="list-view-item">
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper">
<div class="list-view-item__image">
{%- assign placeholder = 'placeholder-product-' | append: i -%}
{% include placeholder %}
</div>
</div>
</div>
<div class="list-view-item__title-column">
<div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
</div>
<div class="list-view-item__price-column">
<span class="product-price__price">$19.99</span>
</div>
</a>
{% endfor %}
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</div>
{% endif %}
{% if is_empty_collection %}
<div class="grid__item small--text-center">
<p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
</div>
</div>
{% endpaginate %}
<script>
/* 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'
});
});
</script>解决方案
推荐阅读
- pandas - 如何删除 Pandas DataFrame 中部分重复的行？
- python - AWS EC2 Linux 实例，在更新 bindIp mongod 服务失败后
- if-statement - BI Publisher rtf 模板日期空条件
- typescript - 打字稿联合类型泛型参数
- python-3.x - 在 pandas 数据框中创建一个新列，该列由数据框中每个玩家的前一年统计数据组成
- java - 为什么 JVM 没有在字符串池内存中“看到”重复的字符串值？
- core-bluetooth - 问：CoreBluetooth 外围设备：didConnect 调用了两次
- git - Git通过命令行压缩分支时，如何更新消息的日期
- c# - 从同一解决方案中的不同测试项目引用项目中的 C# 命名空间
- python - 有没有办法将 openpyxl 行（存储在列表中）写入新的 Excel 文件？