Shopify 架构 - 获取集合 URL

Question

我在集合选择器字段的一个部分中创建了一些架构，并且如果可能，我正在尝试输出集合的 url。集合选择器已出现在设置中，我已经选择了一个集合，但我似乎无法输出它的 url，这是代码：

<div class="col-md-6">
      <div class="category-box">
        **<a href="{{ section.settings.category_top_left.url | default: "#" }}">**
          <img src="{{ section.settings.category_top_left_image | img_url: '856x'}}" alt="">
          <div class="content">
            <h3>{{ section.settings.category_top_left_header }}</h3>
            <p>{{ section.settings.category_top_left_text }}</p>
      </div></a>
</div>

架构：

{
  "type": "collection",
  "id": "category_top_left",
  "label": "Category Top Left"
}

目前是默认输出，不知道哪里出错了。

这是我正在查看的文档 - https://shopify.dev/docs/themes/liquid/reference/objects/section#section-settings

提前致谢。

Answer 1

如果您查看 Collection Picker 的 Shopify Schema 文档，它会指出

集合类型的设置会自动生成一个下拉菜单 填满了店里所有藏品的名字。输出 商家从下拉列表中选择的选项是 集合。

由于输出是集合句柄，因此您必须通过句柄获取集合，然后获取图像、标题或所需的任何内容。这样做，你的代码会像

{%- if section.settings.category_top_left -%}
      {% assign collectionTopLeft = collections[section.settings.category_top_left] %}
      <div class="col-md-6">
          <div class="category-box">
            <a href="{{ collectionTopLeft.url | default: "#" }}">
              <img src="{{collectionTopLeft.image | img_url: '856x'}}" alt="">
              <div class="content">
                <h3>{{collectionTopLeft.title }}</h3>
                <p>{{ collectionTopLeft.description }}</p>
              </div>
            </a>
          </div>
    </div>
{%- endif -%}

它的作用是

• 检查设置是否有一些价值
• 按句柄获取集合
• 使用Collection对象获取不同的属性