Shopify 架构 - 获取 Collection URL

Question

我在 collection 选择器字段的部分中创建了一些模式，如果可能的话，我正在尝试输出 collection 的 url。 collection 选择器已出现在设置中，我选择了 collection 但我似乎无法为其输出 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 架构文档，它指出

Settings of type collection generate a drop-down that is automatically filled with the names of all the collections in the store. The output of the option the merchant selects from the drop-down is the handle of the collection.

因为输出的是collection句柄，所以你必须通过句柄得到collection，然后得到图像，标题或任何需要的东西。这样做，您的代码将像

{%- 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
使用Collection object得到不同的属性

Shopify 架构 - 获取 Collection URL

Shopify Schema - Get Collection URL

schema

liquid

shopify