在 Shopify 中提取产品数据

Question

我正在为我的网站制作自己的产品滑块。 我有自己的动态部分，在“自定义主题”中您可以选择 5 个产品。

我可以使用 {{ section.settings.product-1 }} 拉出产品句柄，但是如何获取产品 ID、产品名称、产品价格、产品图片网址等？

像 {{ product.title }} 这样的东西不起作用，因为它不知道从哪里获取信息。

我当前的代码是：

<div class="wrapper">
  <div class="section-header text-center">
    <h2 class="h1 section-header__title"> {{ section.settings.text-box }} 
    </h2>
  </div>

  <div class="rte">

    <div class="gallery js-flickity" data-flickity-options='{ "freeScroll": true, "wrapAround": true }'>
       <div class="gallery-cell"> </div>
       <div class="gallery-cell"> Text </div>
       <div class="gallery-cell"> Text </div>
       <div class="gallery-cell"> Text </div> 
   </div>
 </div>
</div>

{% schema %}
{
"name": "Featured Slider",
"settings": [

{
    "id" : "text-box",
    "type" : "text",
    "label" : "Title of Section",
    "default" : "Featured Products"
},

{
    "type" : "product",
    "id" : "product-1",
    "label" : "Featured Product"
},

{
    "type" : "product",
    "id" : "product-2",
    "label" : "Featured Product"
},

{
    "type" : "product",
    "id" : "product-3",
    "label" : "Featured Product"
},

{
    "type" : "product",
    "id" : "product-4",
    "label" : "Featured Product"
},

{
    "type" : "product",
    "id" : "product-5",
    "label" : "Featured Product"
}],

"presets": [
    {
    "name" : "Featured Product Slider",
    "category" : "Allsops Sections"
    }
        ]
 }
{% endschema %}

所以这个想法是在每个画廊单元格中都会有不同的产品。

Answer 1

您似乎正在使用一个很棒的部分，但您并没有以有用的方式使用它。

Sections 为您的代码逻辑提供了一个很好的补充 - 块（也称为动态内容）

{% schema %}
{
    "name": "Featured Slider",
    "settings": [
        {
            "id" : "text-box",
            "type" : "text",
            "label" : "Title of Section",
            "default" : "Featured Products"
        }
    ],
    "blocks": [
        {
            "type": "slide",
            "name": "Slide",
            "settings": [
            {
                "id": "product",
                "type": "product",
                "label": "Featured Products"
            }
            ]
        }
    ],
    "presets": [
        {
            "name" : "Featured Product Slider",
            "category" : "Allsops Sections"
        }
    ]
}
{% endschema %}

{% for block in section.blocks %}
    {% assign product = all_products[block.settings.product] %}
    <div class="slider">
        <a href="{{ product.url }}">
            <img src="{{ product.featured_image | img_url: 'master' }}">
            {{ product.title }}
        </a>
    </div>
    ...
{% endfor %}

通过这种方式，您可以添加任意数量的幻灯片并按照您喜欢的方式重新排序。

至于您的问题，您使用all_products 对象获取产品以获取特定对象。在我提供的架构中，您可以看到我在这里使用它{% assign product = all_products[block.settings.product] %}

请注意，all_products 只允许 20 个请求，超过此数会引发流动错误。