Question

我正为自己的网站制作自己的产品滑块。我有自己的动态部分，其中自定义主题＆＃39;你可以选择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 %}

所以这个想法是在每个画廊 - 细胞div将是一个不同的产品。

Answer 1

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

Sections为您的代码逻辑提供了一个非常好的补充 - Blocks（a.k.a动态内容）

{% 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个请求，而且会产生液体错误。

在Shopify中提取产品数据

1 个答案: