shopify - Shopify ：强制收集页面属性

Question

我有一个模板中列出的集合。（这是 list-collections.json）

{
  "sections": {
    "main": {
      "type": "main-list-collections",
      "settings": {
        "title": "Solutions",
        "collection": "all-1",
        "sort": "alphabetical",
        "image_padding": false,
        "products_per_page": 50,
        "image_ratio": "adapt",
        "show_secondary_image": false,
        "add_image_padding": false,
        "show_vendor": false,
        "enable_filtering": true,
        "enable_sorting": true
      }
    }
  },
  "order": [
    "main"
  ]
}

问题是，即使我将 ?page=x 属性放在 URL 中，该模板始终会显示页面 #1 上的结果。

那么有没有办法“手动”呢？我可以去哪里检查 URL 中的页面属性，并根据 URL 将部分分配为显示第 2 页或第 3 页？

编辑：这是模板代码 menu-list-collections.liquid

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}


<link rel="preload" href="{{ 'component-badge.css' | asset_url }}" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ 'component-rte.css' | asset_url }}" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

<noscript>{{ 'component-badge.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>

<script src="{{ 'collection-filters-form.js' | asset_url }}" defer="defer"></script>
<style>
    {% assign section_selector = '#shopify-section-' | append: section.id %}
    #MainContent {
        overflow-x: hidden;
    }

    {{ section_selector }}
    .title--primary {
        font-size: 100px;
        line-height: 90px;
        color: #4B529E;
        margin: 120px 0 141px 0;
    }

    {{ section_selector }}
    .pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 24px;
        height: 50px;
        font-size: 15px;
        line-height: 28px;
        background: #f4f4f4;
        border-radius: 999vw;
        margin-right: 20px;
        color: #000;
        text-decoration: none;
        margin-bottom: 20px;
        transition: 0.4s ease-in-out;

    }

    {{ section_selector }}
    .pill:hover, {{ section_selector }} .pill.active {
        color: #fff;
        background: #4B529E;
    }

    {{ section_selector }}
    .count {
        font-size: 20px;
        margin-bottom: 20px;
    }

    {{ section_selector }}
    .filters {
        margin-bottom: 25px;
    }

    {{ section_selector }}
    .section_products {
        background-color: #E6E7E8;
    }

    {{ section_selector }}
    #loadMore {
        margin-top: 92px;
        margin-bottom: 90px;
    }

    {{ section_selector }}
    .more-section__button:hover .path_arrow {
        stroke: #e5e5e5;
    }

    {{ section_selector }}
    .more-section__button:hover .path_round {
        fill: #4B529E;
    }

    {{ section_selector }}
    .more-section__button svg {
        margin-left: 15px;
    }

    {{ section_selector }}
    .more-section__button svg .path_round {
        fill: #e5e5e5;
    }


    {{ section_selector }}
    .text-count {
        text-align: right;
        margin-bottom: 35px;
        font-size: 20px;
        margin-top: 35px;
    }

    {{ section_selector }}
    .act-filters {
        background: #4B529E;
        color: #fff;
        position: relative;
        z-index: 2;
    }

    {{ section_selector }}
    .act-filters .page-width {
        overflow: visible;
    }

    {{ section_selector }}
    .facets__form {
        gap: 0 2rem;
    }

    {{ section_selector }}
    .nav-tabs {
        list-style-type: none;
        border: none;
    }

    {{ section_selector }}
    .nav-tabs .nav-link {
        color: #fff;
        font-family: "PxGrLight", 'sans-serif';
        font-size: 14px;
        line-height: 14px;
        padding: 13px 0;
        width: 100%;
        border: none;
        text-align: left;
        transition: none;
        cursor: pointer;
        margin-bottom: 0;
    }

    {{ section_selector }}
    .nav-tabs .nav-link .button_filter {
        padding: 14px 48px;
        border-right: 1px solid rgba(255, 255, 255, 0.3);

    }

    {{ section_selector }}
    .nav-tabs .nav-item:first-child .nav-link:before,
    {{ section_selector }} .nav-tabs .nav-item:last-child .nav-link:after {
        position: absolute;
        height: 100%;
        width: 50vw;
        background-color: #575EB5;
        top: 0;
        right: 100%;
        content: "";
        opacity: 0;
    }

    {{ section_selector }}
    .nav-tabs .nav-item:last-child .nav-link:after {
        left: 100%
    }

    {{ section_selector }}
    .nav-tabs .nav-item:first-child .nav-link:hover:before,
    {{ section_selector }} .nav-tabs .nav-item:last-child .nav-link:hover:after {
        opacity: 1;
    }

    {{ section_selector }}
    .nav-tabs .nav-item:first-child .nav-link .button_filter {
        padding-left: 0;
    }

    {{ section_selector }}
    .nav-tabs .nav-link:hover,
    {{ section_selector }} .nav-tabs .nav-link.is-clicked {
        background-color: #575EB5;
        border: none;
    }

    {{ section_selector }}
    .nav-tabs .nav-item:last-child .nav-link .button_filter {
        border-right: 1px solid rgba(255, 255, 255, 0);
    }

    {{ section_selector }}
    .nav-tabs .nav-link.active .button_filter, {{ section_selector }} .nav-tabs .nav-link:hover .button_filter {
        border-right: 1px solid rgba(255, 255, 255, 0);
    }

    {{ section_selector }}
    .nav-tabs .nav-link .filter_title {
        text-transform: uppercase;
        display: flex;
        align-items: center;
        justify-content: flex-start;

    }

    {{ section_selector }}
    .nav-tabs .nav-link .filter_title svg {
        height: 5px;
        width: 10px;
        margin-left: 11px;
    }

    {{ section_selector }}
    .nav-tabs .nav-link .filter_desc {
        display: flex;
        font-size: 15px;
        line-height: 26px;
        opacity: 0.7;
        margin-top: 7px;
    }

    {{ section_selector }}
    .tab-pane {
        position: absolute;
        width: 100%;
        background-color: #575EB5;
        padding-top: 48px;
        top: 99%;
        left: 0;
        display: none;
    }

    @media (min-width: 992px) {
    {{ section_selector }}
        .tab-pane.is-hovered {
            display: block;
        }
    }

    {{ section_selector }}
    .tab-pane .content {
        position: relative;
        z-index: 20;
    }

    {{ section_selector }}
    .tab-pane:before {
        position: absolute;
        background-color: #575EB5;
        content: "";
        width: 50vw;
        height: 100%;
        top: 0;
        left: -50vw;
        z-index: 10;
    }

    {{ section_selector }}
    .tab-pane:after {
        position: absolute;
        background-color: #575EB5;
        content: "";
        width: 50vw;
        height: 100%;
        top: 0;
        right: -50vw;
        z-index: 10;
    }

    {{ section_selector }}
    .tab-pane .bloc_content {
        padding-bottom: 48px;

    }

    {{ section_selector }}
    .tab-pane .bloc_content .img_time svg {
        width: 32px;
        margin-right: 25px;
        height: 32px;
    }

    {{ section_selector }}
    .productBox {
        display: none;
    }

    {{ section_selector }}
    .productBox.is_filtered.visible {
        display: block;
    }

    {{ section_selector }}
    .filter_info_duration .clear_filter,
    {{ section_selector }} .filter_info_type .clear_filter,
    {{ section_selector }} .filter_info_spec .clear_filter {
        display: none;
        padding-left: 8px;
    }

    {{ section_selector }}
    .filter_data_duration .desc_time:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    {{ section_selector }}
    .filter_data_type, .filter_data_profiles {
        font-family: "SuiLight", 'sans-serif';
        font-size: 13px;
        line-height: 22px;
    }

    {{ section_selector }}
    .filter_data_type .row,
    {{ section_selector }} .filter_data_profiles .row,
    {{ section_selector }} .filter_data_context .row {
        width: 100%;
    }

    {{ section_selector }}
    .filter_data_type .desc_type, .filter_data_profiles .desc_type {
        /*padding-left: 32px;*/
    }

    {{ section_selector }}
    .filter_data_type .title_type,
    {{ section_selector }} .filter_data_profiles .title_type,
    {{ section_selector }} .filter_data_context .title_type {
        font-family: "SuiBook", 'sans-serif';
        font-size: 15px;
        line-height: 26px;
        display: block;
        margin-bottom: 10px;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .img_type {
        width: 66px;
        max-width: 66px;
    }

    .img_type svg {
        max-width: 34px;
    }

    .filter_data_type > .row {
        --bs-gutter-x: 0;
    }

    .selectsfournisseurs {
        margin-bottom: 50px;
        font-size: 13px;
        color: #6D6D6D;
    }

    .selectsfournisseurs select {
        background: none;
        border: 1px solid #000;
        border-width: 0 0 1px;
        font-size: 13px;
        color: #000;
        min-width: 160px;
        padding: 0;
        margin-left: 10px;
        height: 28px;
        outline: none !important;
        box-shadow: none !important;
    }

    .is-checkbox {
        color: #000;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .is-checkbox input {
        position: absolute;
        left: -999vw;
    }

    .is-checkbox .fakecheck {
        width: 25px;
        height: 25px;
        border: 1px solid #A6A1A1;
        border-radius: 999vw;
        margin-right: 10px;
        position: relative;
        transition: 0.3s all ease-out;
    }

    .is-checkbox input:checked + .fakecheck {
        background: #a6a1a1;
    }

    /*.is-checkbox input+.fakecheck:before{
        opacity:.5;
        display:block;
        content:' ';
        position:absolute;
        top:2.5px;
        left:2.5px;
        width:20px;
        height:20px;
        background:#a6a1a1;
        border-radius:999vw;
        transition:0.3s all ease-out;
    }
    .is-checkbox input:checked+.fakecheck:before{
        opacity:1;
    }*/
    .is-toggle {
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

    .is-toggle .plus {
        width: 50px;
        height: 50px;
        border: 1px solid #4b529e;
        margin-left: 15px;
        display: inline-block;
        vertical-align: middle;
        border-radius: 999vw;
        position: relative;
    }

    .is-toggle .plus:before, .is-toggle .plus:after {
        height: 2px;
        width: 16px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        content: ' ';
        border-radius: 999vw;
        background: #4B529E;
        position: absolute;
    }

    .is-toggle .plus:after {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .filters-hidden .to-hide {
        display: none;
    }

    #CollectionFiltersForm:not(.filters-hidden) .is-toggle .plus:after {
        opacity: 0;
    }

    .sort_type {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-items: normal !important;
    }

    .sort_type:not(.is-active) {
        display: none;
    }

    .filter-select {
        background: #F4F4F4;
        border-radius: 999vw;
        font-size: 15px;
        line-height: 28px;
        font-weight: 500;
        width: 100%;
        height: 50px;
        border: 0;
        padding: 0 24px;
        box-shadow: none !important;
        outline: none !important;
    }

    @media (max-width: 992px) {
        .to-hide > div, .to-hide > label {
            margin-top: 12px;
        }

    {{ section_selector }} .title--primary {
                               font-size: 55px;
                               line-height: 55px;
                               margin-bottom: 94px;
                           }

    {{ section_selector }} .filters {
                               margin-bottom: 35px;
                               outline: none;
                               box-shadow: none;
                           }

    {{ section_selector }}
        .nav-tabs {
            flex-wrap: wrap;
        }

    {{ section_selector }}
        .nav-tabs .nav-link .button_filter {
            padding: 24px 24px !important;
            border-right: 0;
        }

    {{ section_selector }}
        .nav-tabs .nav-link .button_filter .filter_title {
            font-weight: 700;
        }

    {{ section_selector }}
        .nav-item {
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-width: 1px 0 0;
        }

    {{ section_selector }}
        .tab-pane {
            position: static !important;
        }

    {{ section_selector }}
        .act-filters .page-width {
            padding: 0;
        }

    {{ section_selector }}
        .filter_data_type,
        {{ section_selector }} .content {
            padding-left: 1.5em;
            padding-right: 1.5em;
        }

    {{ section_selector }}
        .bloc_content {
            padding: 20px 24px !important;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

    {{ section_selector }}
        .is-clicked .tab-pane {
            display: block;
        }

    {{ section_selector }}
        .tab-pane {
            padding-top: 0;
        }

    {{ section_selector }}
        .tab-pane .row {
            padding: 0;
        }

    {{ section_selector }}
        .nav-tabs .nav-link {
            padding: 0 !important;
        }

    {{ section_selector }}
        .nav-tabs .nav-link .filter_desc {
            margin-top: 0;
        }
    }
</style>
<script>
    /*jQuery(function ($) {


        $(document).ready(function () {
            var products_count = {{ shop.products_count }},
                pages_count = Math.ceil(products_count / 50),
                base_url = location.pathname + '?page=',
                i = 2;
            if (pages_count > 1) {
                $('.pagination-wrapper').hide();

                var getItems = function () {
                    var dfd = $.Deferred(),
                        collection = $('.sort_type');

                    for (i = 2; i <= pages_count; i++) {
                        $.get(base_url + i, function (data) {
                            var items = $(data).find('.sort_type .productBox');
                            collection.append(items);
                            //redoSearch();
                            //setLazy();
                            console.log(i + ' ' + pages_count)
                            if (i = pages_count) {
                                dfd.resolve();
                                //filterCollections();
                                console.log('resolve');
                                //window.setTimeout(function(){
                                 //$('select[name="sort_by"]').trigger('change');
                                 //},100)
                            }
                        });
                    }
                    console.log('x');
                    window.setTimeout(function () {
                        $('select[name="sort_by"]').trigger('change');
                    }, 100)
                    return dfd.promise();
                }

                getItems().done(function () {
                    //setLazy();
                    console.log('done')
                    $('#pagination').hide();
                    window.scroll(0, 1);
                    //filterCollections();
                    window.setTimeout(function () {
                        console.log('change');
                        $('select[name="sort_by"]').trigger('change');
                    }, 100)
                    //redoSearch();
                });
            }

            $('{{ section_selector }}  .nav-tabs .nav-link').hover(
                function () {
                    $(this).find('.tab-pane').addClass('is-hovered');
                }, function () {
                    $(this).find('.tab-pane').removeClass('is-hovered');
                }
            );
            window.setTimeout(function () {
                $('{{ section_selector }}  .nav-tabs .nav-link').removeClass('is-clicked')
            }, 100)
            $('{{ section_selector }}  .nav-tabs .nav-link').on('click', function () {
                var isAlreadyShown = false;
                if ($(this).hasClass('is-clicked')) {
                    isAlreadyShown = true;
                }
                $('{{ section_selector }}  .nav-tabs .nav-link').removeClass('is-clicked')
                if (!isAlreadyShown) {
                    $(this).addClass('is-clicked');
                }
            })
            $('#CollectionFiltersForm.filters-hidden .is-toggle').click(function () {
                $('#CollectionFiltersForm').toggleClass('filters-hidden')
            })
        });

        $('#CollectionFiltersForm select').on('change', function () {
            //redoSearch();
        })

    });*/
</script>

<div class="page-width">
    <h1 class="title title--primary heading">{{ section.settings.title | escape }}</h1>
    
    <div class="collection page-width">
        <div class="loading-overlay">
            <div class="loading-overlay__spinner">
                <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66"
                     xmlns="http://www.w3.org/2000/svg">
                    <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                </svg>
            </div>
        </div>

        <div id="main-collection-product-grid" data-id="{{ section.id }}"
             data-init-visible="{{ section.settings.products_per_page }}"
             data-visible="{{ section.settings.products_per_page }}" class="">
            {% assign loopcounter = 0 %}
            <!--
                SORTS
                price
                title
            -->
            {% paginate section.settings.collection.all_products by 50 %}
            {% assign sorts = 'title' %}
                <div class="sort_type {{ sort_type }} p-{{ current_page }} row gy-5 gx-5 w-offset-x" style="display:flex !important;">
                    {%- for product in section.settings.collection.all_products -%}

                        {% assign collections_product = '' %}
                        {% for collection_product in product.collections %}
                            {% assign collections_product = collections_product | append : '#' | append : collection_product.title %}
                        {% endfor %}
                        {% assign tag_duration = '' %}
                        {% if product.tags contains 'lessthan30' %}
                            {% assign tag_duration = '20' %}
                        {% elsif product.tags contains '30to60' %}
                            {% assign tag_duration = '45' %}
                        {% elsif product.tags contains 'morethan60' %}
                            {% assign tag_duration = '75' %}
                        {% endif %}

                        {% assign tags_product = '' %}
                        {% for tag_product in product.tags %}
                            {% assign tags_product = tags_product | append : '#' | append : tag_product %}
                        {% endfor %}

                        <div class="col-lg-4 col-12 col-md-6 productBox moreProduct
                            {% if loopcounter >= section.settings.products_per_page %} visible {% endif %} "
                             data-collection="{{ collections_product }}"
                             vendor="{{ product.vendor  | handle }}"
                             data-duration="{{ tag_duration }}"
                             data-tag="{{ tags_product }}"
                             data-price="{{ product.price }}"
                             data-title="{{ product.title }}"
                        >
                            {% render 'product-card',
                                product_card_product: product,
                                media_size: section.settings.image_ratio,
                                show_secondary_image: section.settings.show_secondary_image,
                                add_image_padding: section.settings.add_image_padding,
                                show_vendor: section.settings.show_vendor %}
                        </div>
                        {%- assign loopcounter = loopcounter | plus: 1 -%}
                    {%- endfor -%}

                    {% render 'pagination', paginate: paginate, anchor: '' %}

                </div>
            {% endpaginate %}


        </div>
        <div id="loadMore" style="">
            <button href="#" class="button button--arrow-right button--ghost more-section__button">
                                <span class="button__text">
                                    {{ 'sections.collection_list.view_more' | t }}
                                    {% include 'icon-arrow-down' %}
                                </span>
            </button>
            <div class="noMore button button--arrow-right button--ghost more-section__button"
                 style="display:none;">{{ 'sections.collection_list.no_more' | t }}</div>


        </div>
    </div>
</div>

{% schema %}
    {
    "name": "t:sections.main-list-collections.name",
    "settings": [
    {
    "type": "text",
    "id": "title",
    "label": "t:sections.main-list-collections.settings.title.label",
    "default": "Collections"
    },
    {
    "type": "collection",
    "id": "collection",
    "label": "t:sections.featured-collection.settings.collection.label"
    },
    {
    "type": "select",
    "id": "sort",
    "options": [
    {
    "value": "alphabetical",
    "label": "t:sections.main-list-collections.settings.sort.options__1.label"
    },
    {
    "value": "alphabetical_reversed",
    "label": "t:sections.main-list-collections.settings.sort.options__2.label"
    },
    {
    "value": "date_reversed",
    "label": "t:sections.main-list-collections.settings.sort.options__3.label"
    },
    {
    "value": "date",
    "label": "t:sections.main-list-collections.settings.sort.options__4.label"
    },
    {
    "value": "products_high",
    "label": "t:sections.main-list-collections.settings.sort.options__5.label"
    },
    {
    "value": "products_low",
    "label": "t:sections.main-list-collections.settings.sort.options__6.label"
    }
    ],
    "default": "alphabetical",
    "label": "t:sections.main-list-collections.settings.sort.label"
    },


    {
    "type": "checkbox",
    "id": "image_padding",
    "default": false,
    "label": "t:sections.main-list-collections.settings.image_padding.label"
    },
    {
    "type": "range",
    "id": "products_per_page",
    "min": 8,
    "max": 24,
    "step": 4,
    "default": 16,
    "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },
    {
    "type": "header",
    "content": "t:sections.main-collection-product-grid.settings.header__3.content"
    },
    {
    "type": "select",
    "id": "image_ratio",
    "options": [
    {
    "value": "adapt",
    "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
    },
    {
    "value": "portrait",
    "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
    },
    {
    "value": "square",
    "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
    }
    ],
    "default": "adapt",
    "label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
    },
    {
    "type": "checkbox",
    "id": "show_secondary_image",
    "default": false,
    "label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
    },
    {
    "type": "checkbox",
    "id": "add_image_padding",
    "default": false,
    "label": "t:sections.main-collection-product-grid.settings.add_image_padding.label"
    },
    {
    "type": "checkbox",
    "id": "show_vendor",
    "default": false,
    "label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
    },
    {
    "type": "header",
    "content": "t:sections.main-collection-product-grid.settings.header__1.content"
    },
    {
    "type": "checkbox",
    "id": "enable_filtering",
    "default": true,
    "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
    "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
    },
    {
    "type": "checkbox",
    "id": "enable_sorting",
    "default": true,
    "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
    }
    ]
    }
{% endschema %}

{{ current_page }} 给出了正确的页码。当我看到分页链接时，它也指向正确的页面。

它就像 section.settings.collection.all_products 总是包含相同的 50 个产品，我别无选择。

标签： shopify

Answer 1

找到杀死我的东西。

/collections 页面不用于列出产品，因此不支持列出超过 50 个产品和分页。

在 shopify 中，您需要进行集合，然后将产品列在集合中。

所以在 /collection 上没有任何效果，但是 /collection/all-1 （我们有一个包含所有产品的集合）一切都很好。