shopify - Shopify - 提取收藏信息
问题描述
我正在尝试编写一个允许在自定义页面中选择集合的 shopify 部分。我正在努力了解如何提取收集信息以用于该部分的液体文件。
我已经阅读了文档,并尝试了很多我在互联网上发现的不同片段,但实际上似乎没有任何信息可以提取信息。
以下是我目前拥有的
p 标签是我只是看看是否有任何输出,而没有。for 循环似乎正在工作,因为对于选择的集合数量,我得到了一个列表项(是的,我猜?) - 但这就是我所能召集的魔法。
<div data-section-id="{{ section.id }}" >
<div class="flex-wrapper ignite-collection">
<ul>
{%- for block in section.blocks -%}
<li>
<a href="{{ collection.url }}">
<img src="{{ collection.image | img_url: '350x' }}" alt="{{collection.title}}">
<h4 class="flex-collection-heading">{{ collection.title }}TEXT HEADING</h4>
</a>
// all of these p tags are left overs from me trying variations of getting info
<p>collection.image {{collections['flex-collection'].image}}</p>
<p>collection.image.url {{ collections['flex-collections'].image.url }}</p>
<p>{{ collections.flex-collection.image.url }}</p>
<p>{{ collections[settings.flex-collection].url }}</p>
<p>collection.url {{settings.flex-collection.url}}</p>
</li>
{%- endfor -%}
</ul>
</div>
</div>
{% schema %}
{
"name": "Ignite Collection list",
"class": "ignite-collection-list-section",
"max_blocks": 6,
"settings": [
{
"type": "select",
"id": "justify-content",
"label": "Justify Content",
"options": [
{"value": "flex-start", "label":"Flex Start"},
{"value": "flex-end", "label":"Flex End"},
{"value": "center", "label":"Center"},
{"value": "space-between","label":"Space Between"},
{"value": "space-around","label":"Space Around"},
{"value": "space-evenly","label":"Space Evenly"}
]
}
],
"presets": [
{
"name": "Ignite Collection list",
"category": "Collections",
"blocks": [
{
"type": "collection"
},
{
"type": "collection"
}
]
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"id": "flex-collection",
"type": "collection",
"label": "Collection"
}
]
}
]
}
{% endschema %}
解决方案
在 for 循环中,您使用的是尚未分配的collection
液体变量。您需要添加作为 for 循环的第一行,例如{% assign collection = collections[block.settings.flex-collection] %}
提示:您可以将集合输出为 JSON 对象,以检查是否使用以下内容进行了正确的分配:
<script>
console.log({{ collection | json }});
</script>
赋值后的liquid变量collection
会引用对应的collection对象,所以需要修改访问字段的方式,比如要输出collection标题,可以这样做:<span>{{ collection.title }}</span>
.
您必须在代码中更改以下内容:
{%- for block in section.blocks -%}
{% unless block.settings.flex-collection %}
{% continue %}
{% endunless %}
{% assign collection = collections[block.settings.flex-collection] %}
<li>
<a href="{{ collection.url }}">
<img src="{{ collection.image | img_url: '350x' }}"
alt="{{collection.title}}">
<h4 class="flex-collection-heading">{{ collection.title }}TEXT HEADING</h4>
</a>
// all of these p tags are left overs from me trying variations of getting info
<p>collection.image {{ collection.image }}</p>
<p>collection.image.url {{ collection.image.url }}</p>
<p>collection.url {{ collection.url }}</p>
</li>
{%- endfor -%}
每次需要访问集合的字段时,使用变量比查找感兴趣的集合对象更有效。
此外,如果集合未在块中设置(来自定制器),您希望跳过 for 循环的当前迭代,为此,您可以在 for 循环的第一行添加以下内容:
{% unless block.settings.flex-collection %}
{% continue %}
{% endunless %}
推荐阅读
- c# - 将对象添加到具有相关数据的上下文中
- android - HttpCookie.hasExpired() 在 pre Nougat(24) 中无法正常工作
- git - 当我是唯一在两个相关分支上工作时,我应该使用 git rebase 而不是 git merge
- javascript - 如果我从数据库中删除,如何从地图中删除标记
- python - 如何使用 PyCharm 查看 SQLite 数据库中的哪些数据?
- python - 无法用日期填写两个输入框
- python - 协程中的异步任务
- .net - 不支持 DataContract 中的非映射字段
- apache-spark - Spark 流式加入 Kafka 主题对比
- java - java.lang.UnsupportedOperationException at java.nio.ByteBuffer.arrayOffset?