时间戳

首页 > 解决方案 > Shopify 架构 - 获取集合 URL

schema - Shopify 架构 - 获取集合 URL

问题描述

我在集合选择器字段的部分中创建了一些架构，如果可能，我正在尝试输出集合的 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

提前致谢。

标签： schemashopifyliquid

解决方案

如果您查看 Shopify Schema docs for Collection Picker，它指出

集合类型的设置会生成一个下拉列表，该下拉列表会自动填充商店中所有集合的名称。商家从下拉列表中选择的选项的输出是集合的句柄。

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

{%- 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对象获取不同的属性

推荐阅读