Shopify-在产品页面上添加可选择的相关产品

Question

我正在创建一个新的自定义部分，我想在其中添加不同的块。但是我找不到任何现有 /可用 /本机块类型的列表（block.type）。

编辑：我正在寻找可用的“专业输入设置”，而不是“块类型”。 在此相关文档！

我的最终目标是将元字段添加到产品实体中，允许管理员从现有产品中选择一系列产品，然后将此元产品字段绑定到我的新自定义部分中的“产品”块类型。

编辑：在回复中添加了一个解决方案。

Answer 1

好吧，因此，感谢来自Discord的@Onkar和Patrick，这里相关文档： https://shopify.dev/themes/architecture/settings/settings/input-settings#specialized-input-settings

为了做我上述所描述的事情，我创建了一个专用的新元字段“相关信息”，产品实体：后端＆GT;设置＆gt; Metafields＆gt;自定义字段＆gt;产品（类型产品：产品列表）。

然后，我在主题文件中创建了一个新部分（部分/产品相关。liquid）：

{%- liquid
    assign grid = section.settings.per_row
-%}

{% unless section.settings.product_list == empty %}
    <div class="product-recommendations row" data-product-id="{{ product.id }}">
            <div class="section-title {% if settings.section_titles == 'lines' %}lines {% elsif settings.section_titles == 'btm_border' %}btm_border {% endif %} desktop-12 tablet-6 mobile-3">
                <h2>{{ section.settings.heading }}</h2>
            </div>
        <div class="product-loop">
            {%- for product in section.settings.product_list limit: section.settings.limit -%}
                <div class="product product-index js-product-listing">
                    {% render 'product-listing', template: 'product', product: product %}
                </div>
            {%- endfor -%}
        </div>
    </div>
{% endunless %}

{% schema %}
    {
        "name": "Related Products",
        "settings": [
            {
                "type": "text",
                "id": "heading",
                "label": "Heading",
                "default": "You may also like"
            },
            {
                "type": "product_list",
                "id": "product_list",
                "label": "Products",
                "limit": 12
            },
            {
                "type": "range",
                "id": "per_row",
                "min": 2,
                "max": 4,
                "step": 1,
                "label": "Products per row",
                "default": 4
            },
            {
                "type": "range",
                "id": "limit",
                "min": 2,
                "max": 6,
                "step": 1,
                "label": "Products shown",
                "default": 4
            }
        ],
        "presets": [
            {
                "name": "Related Products"
            }
        ],
        "templates": [
            "product"
        ]
    }
{% endschema %}

{% stylesheet %}
    .product-recommendations .product-loop {
        margin: 20px auto;
        display: grid;
        width: 100%;
        margin-left: 1.04166667%;
        margin-right: 1.04166667%;
        grid-template-columns: repeat({{ grid }}, 1fr);
        grid-row-gap: 25px;
        grid-column-gap: 40px;
    }
    @media screen and (min-width: 741px) and (max-width: 980px){
        .product-recommendations .product-loop {
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }
    }
    @media screen and (max-width: 740px){
        .product-recommendations .product-loop {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 10px;
            margin: 0 auto;
        }
    }
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

之后，我可以通过主题自定义将该部分添加到产品模板中。最后要做的是将我的自定义元字段映射到“ product_list”块 /输入。瞧！