如何在任何页面中创建和调用 shopify 自定义块

Question

我需要在 Shopify 上创建一个自定义部分，每个页面都会调用该自定义部分

Answer 1

在主题的 /sections 目录中为我们将添加部分的每个页面创建一个文件。例如，我们可以创建 /sections/about.liquid 以与关于模板一起使用。这些文件中的标记大部分是一个长的 switch 语句，后面跟着一个伴随的模式。像这样：

{% for block in section.blocks %} {% case block.type %}

       {% when 'hero' %}
       {% include 'snippet_hero-banner' %}

       {% when 'program' %}
       {% include 'snippet_module-program' %}

       {% when 'coaching' %}
       {% include 'snippet_coaching' %}

       {% when 'shop' %}
       {% include 'snippet_shop-now' %}

       {% when 'promo' %}
       {% include 'snippet_promo' %}

       {% when 'comparison' %}
       {% include 'snippet_comparison' %}

     {% endcase %}
   </div>
   {% endfor %}
 </div>

 {% schema %}
   {
     "blocks": [
       {
         "type": "hero",
         "name": "Hero Banner",
         "settings": [
           {
             "id": "bannerImage",
             "type": "image_picker",
             "label": "Banner Image"
           }
         ]
       },
       {
         "type": "program",
         "name": "Program Selector",
         "settings": [
           {
             "id": "program",
             "type": "radio",
             "label": "Choose a program",
             "options": [
               {"value": "planA", "label": "Plan Type A"},
               {"value": "planB", "label": "Plan Type B"},
               {"value": "planC", "label": "Plan Type C"}
             ]
           }
         ]
       },
       {
         "type": "coaching",
         "name": "Coaching",
         "settings": [
           {
             "id": "coachingTitle",
             "type": "text",
             "label": "Title"
           },
           {
             "id": "coachingSummary",
             "type": "textarea",
             "label": "Summary"
           },
           {
             "id": "coachingImage",
             "type": "image_picker",
             "label": "Image"
           }
         ]
       },
       {
         "type": "shop",
         "name": "Shop Now",
         "settings": [
           {
             "id": "shopNowTitle",
             "type": "text",
             "label": "Title",
             "default": "What do you have to lose? Shop now."
           },
           {
             "id": "shopNowHeader1",
             "type": "text",
             "label": "Left Header",
             "default": "The 4-1-1"
           }
         ]
       },
       {
         "type": "promo",
         "name": "Promo",
         "settings": [
           {
             "id": "promoTitle",
             "type": "textarea",
             "label": "Title"
           },
           {
             "id": "promoSubtitle",
             "type": "textarea",
             "label": "Subtitle"
           }
         ]
       },
       {
         "type": "comparison",
         "name": "Compare",
         "settings": [
           {
             "id": "comparisonImage",
             "type": "image_picker",
             "label": "image"
           },
           {
             "id": "comparisonTitle",
             "type": "text",
             "label": "Title"
           },
           {
             "id": "comparisonSummary",
             "type": "textarea",
             "label": "Summary"
           },
           {
             "id": "comparisonButtonLink",
             "type": "url",
             "label": "Button Link"
           },
           {
             "id": "comparisonButtonText",
             "type": "text",
             "label": "Button Text"
           }
         ]
       }
     ]
   }
 {% endschema %}

自定义页面。在主题编辑器中，您会看到页面只有一个部分——模板文件中包含的部分。与主页不同，您需要“向下钻取”才能查看页面的可用部分。

我们为每个页面元素页面创建片段，这些片段可作为一个部分进行编辑。上面的代码使用 include 根据块的类型从 /snippets 目录中引用标记。该类型以及块的名称在 switch 语句下方的架构部分中表示。

id 是特定可编辑特征的句柄区块
type表示是什么设置。例如：
color 类型将在自定义侧边栏中生成一个字段，允许您从调色板中进行选择。
label 只是字段的标签。

在 /templates 目录中，将页面中的标记（例如 /templates/page.about.liquid）替换为如下内容： {% section 'about' %} 这将包括 /sections/about.liquid 文件我们在上一步中创建的。

enter image description here

单击以编辑此部分，我们发现我们可以添加我们构建的任何块——只要我们将可能性写入 case 语句。

使块的元素可自定义。这可以通过在该部分的 {% schema %} 中定义设置并使用 {{ block.settings.yoursetting }} 液体标签来呈现内容来完成。现在您可以自定义图像、纯文本、URL 等。

结果

恭喜！如果您一直在关注，那么您已经为整个商店带来了版块功能。

enter image description here

如何在任何页面中创建和调用 shopify 自定义块

How to shopify custom block create and call in any page

shopify

shopify-template