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

Question

Shopify Dawn 2.0 Theme RE: Countdown Timer

Im trying my hand at the Shopify code framework.

I want to make my own countdown timer and to start, I have duplicated the Announcement Bar code in Sections and named it countdown.

I have also duplicated the anncoument bar css.

I have renamed everything annoucement to countdown - to not confuse both in css and html classes.

I have gotten as far as to have the Count Timer appear as a selectable section in the Customiser but when it is active, it is not showing up.

[Screenshot of the Customiser and by Countdown Timer appearing][1]

I noticed it does not have a similar icon as the header / announcement bar would.

What am I doing wrong?

Here is my current code:

  {%- 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

You need to add presets to end of section schema.

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

Answer 2

I have been adding custom sections to my site and have created a checklist to make it easier for me to do so, as it turned out there were some (for a newbie like me) nonintuitive things that you need to do.

What you likely missed is that you need to edit the json file that is being used by your site. In my case, that is en.default.schema.json. In the json file, lookup the name of the section that you copied and renamed and duplicate the info and edit it to the new section name as you did in the section code.

As a reference, here is my checklist:

To create a new section:

1. Add a new section
2. Name section logically
3. Add code copied from a similar section, edit code
4. Search code for "render" items
5. Copy code in the render item and create a new snippet with the copied code
6. Edit code in snippet and add notes to each edit with details, reason, date
7. Edit section schema to represent the new section name
8. Edit en.default.schema.json with new section details

Answer 3

Did you add the section into the template? I created a cheatsheet for new sections with a kind of a hierarchy:

New Section Checklist

1. Template.JSON
2. Sections.liquid
3. Default Schema
4. CSS Styling (optional)

1-3 need to be modified for your new section to show up and work, 4 is optional if you want to add some styling to your section.