自定义创建的部分未显示 - Dawn 2.0 Shopify

Question

Shopify 黎明 2.0 主题 RE：倒数计时器

我正在尝试 Shopify 代码框架。

我想制作自己的倒数计时器并开始，我复制了部分中的公告条码并将其命名为倒数。

我还复制了公告栏 css。

我已将所有公告重命名为倒计时 - 不要混淆 css 和 html 类。

我已经让计数计时器在定制器中显示为可选部分，但是当它处于活动状态时，它没有显示出来。

[定制器和倒数计时器出现的屏幕截图][1]

我注意到它没有与 header / 公告栏类似的图标。

我究竟做错了什么？

这是我当前的代码：

  {%- 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. 逻辑地命名部分
3. 添加从类似部分复制的代码，编辑代码
4. “渲染”项目的搜索代码
5. 复制渲染项中的代码并使用复制的代码创建一个新片段
6. 在片段中编辑代码并为每个编辑添加注释，包括详细信息、原因、日期
7. 编辑部分架构以表示新的部分名称
8. 使用新的部分详细信息编辑 en.default.schema.json

Answer 3

您是否将该部分添加到模板中？ 我为具有某种层次结构的新部分创建了备忘单：

新部分清单

1. 模板.JSON
2. Sections.liquid
3. 默认架构
4. CSS 造型（可选）

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