自定义创建的区段未显示-曙光2.0示例

Question

Shopify曙光2.0主题RE:倒计时

我正在尝试使用Shopify代码框架。

我想做我自己的倒数计时器，并开始，我已经复制了通知条形码的章节，并命名为倒计时。

我也复制了连载条css。

我已经把一切都重新命名为倒计时--不要混淆css和html类。

我甚至让计数计时器在自定义器中显示为一个可选择的部分，但是当它处于活动状态时，它不会出现。

定制化和倒计时出现的屏幕截图

我注意到它没有一个类似于标题/公告栏的图标。

我做错了什么？

以下是我的当前代码：

  {%- case block.type -%}
    {%- when 'countdown' -%}
      <div class="countdown-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.countdown' | t }}" {{ block.shopify_attributes }}>
        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            <a href="{{ block.settings.link }}" class="countdown-bar__link link link--text focus-inset animate-arrow">
          {%- endif -%}
              <p class="countdown-bar__message h5">
                {{ block.settings.text | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "Countdown Timer",
  "max_blocks": 2,
  "blocks": [
    {
      "type": "announcement",
      "name": "Countdown Timer",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "We must edit the code to configure the timer",
          "label": "t:sections.countdown-bar.blocks.countdown.settings.text.label"
        },
        {
          "type": "select",
          "id": "color_scheme",
          "options": [
            {
              "value": "background-1",
              "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.options__1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.options__2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.options__3.label"
            },
            {
              "value": "accent-1",
              "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.options__4.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.options__5.label"
            }
          ],
          "default": "accent-1",
          "label": "t:sections.countdown-bar.blocks.countdown.settings.color_scheme.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.countdown-bar.blocks.countdown.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }

}
{% endschema %}```

  [1]: https://i.stack.imgur.com/HDlMz.png

Answer 1

您需要向节架构的末尾添加预置。

"presets": [
  {
    "name": "Countdown Timer"
  }
]

Answer 2

我一直在我的网站添加自定义部分，并创建了一个检查表，以使我更容易做到这一点，因为事实证明，有些(对于像我这样的新手)非直觉的事情，你需要做。

您可能忽略的是，您需要编辑站点正在使用的json文件。在我的例子中，那是en.default.schema.json。在json文件中，查找您复制和重命名的部分的名称，并复制信息并将其编辑到新的节名中，就像在节代码中所做的那样。

作为参考，这是我的清单：

若要创建新的部分，请执行以下操作：

1. 添加一个新的节
2. name节逻辑上添加从类似部分复制的代码，在呈现项中编辑“呈现”项的
3. 搜索代码，并在呈现项中复制代码<

>H 210<

1. ><
2. ><代码>H 111编辑代码，并在每个编辑中添加注释，其中包含详细信息、原因、日期< code >H 113编辑部分模式，以表示新的区段名称< code >H 214H 115Een.default.schema.json与新节详细信息H 216

Answer 3

你把该部分添加到模板中了吗？我为具有某种层次结构的新节创建了一个备忘表：

新科核对表

1. Template.JSON
2. Sections.liquid
3. Default Schema
4. CSS样式(可选)

1-3需要修改为您的新部分显示和工作，4是可选的，如果您想要添加一些样式到您的部分。