如何使用模式集合从部分输出产品

Question

我是 shopify 新手，我正在尝试展示收藏中的产品。

我在部分中创建了一个部分，并使用 shopify 架构来显示此设置。

页面中仅显示标题和说明。

如何在页面中显示所选系列中的所有产品？我整天都在网上搜索答案。

这是我的架构。

希望有人能帮助我，谢谢。

<h3>{{ section.settings.title }}</h3>

<p>{{ section.settings.column_richtext }}</p>

<a href="{{ section.settings.collection}}"></a>

{{ section.settings.collection | products}}


{% schema %}
  {
    "name": "Collection list 2",
    "class": "index-section",
    "max_blocks": 3,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Collection list 2"
      },
      {
         "type": "richtext",
         "id": "column_richtext",
         "label": "Short Description",
         "default": "<p></p>"
      },
      {
        "id": "collection",
        "type": "collection",
        "label": "Chose a collection"
      },
      {
        "type": "range",
        "id": "grid",
        "label": "Collections per row",
        "min": 2,
        "max": 4,
        "step": 1,
        "default": 3
      }
    ],
    "blocks": [
      {
        "type": "collection",
        "name": "Collection 2",
        "settings": [
          {
            "type": "collection",
            "id": "collection2",
            "label": "Collection 2"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Collection list 2",
        "category": "Collection",
        "blocks": [
          {
            "type": "collection"
          },
          {
            "type": "collection"
          },
          {
            "type": "collection"
          }
        ]
      }
    ]
  }
{% endschema %}

Answer 1

使用它来访问产品：

{%- assign collection = collections[section.settings.collection] -%}

{%- for product in collection.products -%}
    {{ product.title }}
{%- endfor -%}

除非您在集合页面上，否则您无法对 collection 对象进行分页。按照上面的例子使用for循环我认为你只能得到50个产品。

Answer 2

这里是部分代码添加创建新部分并添加到相关模板中

<div class="page-width">
  {%- comment -%} {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
    </div>
  {% endif %}

  {%- endcomment -%}
  
  {%- assign collection = collections[section.settings.collection] -%}

  {% case section.settings.grid %}
    {% when 2 %}
      {%- assign max_height = 530 -%}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign max_height = 345 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
      {%- assign max_height = 250 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
      {%- assign max_height = 195 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
  {% endcase %}

  {%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

  <div class="grid grid--uniform grid--view-items">
    {% for product in collection.products limit: product_limit %}
      <div class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
        {% include 'product-card-grid', max_height: max_height %}
      </div>
    {% else %}

      {% for i in (1..product_limit) %}
        <div class="grid__item .grid__item--{{section.id}} {{ 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">
                {% include 'product-price' %}
              </div>
            </a>
          </div>
        </div>
      {% endfor %}
    {% endfor %}
  </div>

  {% if section.settings.show_view_all %}
    <hr class="hr--invisible"></hr>
    <div class="text-center">
      <a href="{{ collection.url }}" class="btn">
        {{ 'collections.general.view_all' | t }}
      </a>
    </div>
  {% endif %}

</div>

{% schema %}
  {
    "name": "Featured collection",
    "class": "index-section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Featured collection"
      },
      {
        "id": "collection",
        "type": "collection",
        "label": "Collection",
         
      },
      {
        "type": "range",
        "id": "grid",
        "label": "Products per row",
        "min": 2,
        "max": 5,
        "step": 1,
        "default": 3
      },
      {
        "type": "range",
        "id": "rows",
        "label": "Rows",
        "min": 1,
        "max": 5,
        "step": 1,
        "default": 2
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show product vendors",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_view_all",
        "label": "Show 'View all' button",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured collection",
        "category": "Collection"
      }
    ]
  }
{% endschema %}