Shopify - 提取收藏信息

Question

我正在尝试编写一个允许在自定义页面中选择集合的 shopify 部分。我正在努力了解如何提取收集信息以用于该部分的液体文件。

我已经阅读了文档，并尝试了很多不同的 sn-ps，我发现这些 sn-ps 遍布互联网，但实际上似乎没有任何信息可以提取信息。

以下是我目前拥有的

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 %}

Answer 1

在 for 循环中，您正在使用 尚未分配的液体变量 collection。您需要在 for 循环的第一行添加类似 {% assign collection = collections[block.settings.flex-collection] %}

的内容

提示：您可以将集合输出为 JSON 对象，以检查是否使用以下内容进行了正确分配：

<script>
console.log({{ collection | json }});
</script>

要检查 json 对象，请使用 Chrome devTools (F12) -> 控制台中的 javascript 控制台。

赋值后的液体变量collection会引用对应的collection object，所以你需要修改访问字段的方式，比如你要输出集合标题，你可以这样做：<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 %}