在 Shopify 中提取产品数据
Pull through product data in Shopify
我正在为我的网站制作自己的产品滑块。
我有自己的动态部分,在 'customise theme' 中您可以 select 5 个产品。
我可以通过 {{ section.settings.product-1 }} 获取产品句柄,但我如何才能获得产品 ID、产品名称、产品价格、产品图片 url 等。 ?
像 {{ 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 将是不同的产品。
看来您正在使用一个很棒的部分,但您没有以有用的方式使用它。
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 个请求,超过此数量将引发液体错误。
我正在为我的网站制作自己的产品滑块。 我有自己的动态部分,在 'customise theme' 中您可以 select 5 个产品。
我可以通过 {{ section.settings.product-1 }} 获取产品句柄,但我如何才能获得产品 ID、产品名称、产品价格、产品图片 url 等。 ?
像 {{ 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 将是不同的产品。
看来您正在使用一个很棒的部分,但您没有以有用的方式使用它。
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 个请求,超过此数量将引发液体错误。