在塊中創建帶有文本的可鏈接圖像 Shopify

Question

我試圖在 Shopify 部分創建一個塊，一個帶有文本的可鏈接圖像 - 它們應該成為我頁面的一個新部分並且具有 3 個功能：添加圖像，圖像鏈接，header 和描述。 它也可以有 2 列。 但是，無法保存此腳本。 這是它的

 {% for block in section.blocks %} <div class="img" id="call-to-action"> <h1> {{ block.settings.text-box-title }} </h1> <h3> {{ block.settings.text-box-content }} </h3> <a href="{{ image-settings.link }}" class="img img--cta">{{ image.settings.link }}</a> </div> {% endfor %} {% schema %} { "name": "CTA Blocks", "max_blocks": 3, "settings": [ { "id": "text-box", "type": "text", "label": "Heading", "default": "Title" } ], "blocks": [ { "name": "Add Image with Text", "settings": [ { "id": "image", "type": "image_picker", "label": "Image" }, { "id": "link", "type": "url", "label": "Image link" }, { "name": "Text Box", "settings": [ { "id": "text-box-title", "type": "text", "label": "Heading", "default": "Title" }, { "id": "text-box-content", "type": "richtext", "label": "Add custom text below", "default": "<p>Add your text here</p>" } ] } ], "presets": [ { "name": "Call to Action Blocks", "category": "CTA button", "blocks": [ { "type": "select" }, { "type": "select" } ] } ] } {% endschema %} {% stylesheet %} {% endstylesheet %} {% javascript %} {% endjavascript %}

請你幫助我好嗎？ 謝謝。

Answer 1

這是我添加新節塊（或新圖像）時腳本的結果

這是添加新部分塊（或新圖像）時我需要的

Answer 2

你有無效的JSON，它應該是：

{
    "name": "CTA Blocks",
    "max_blocks": 3,
    "settings": [{
        "id": "text-box",
        "type": "text",
        "label": "Heading",
        "default": "Title"
    }],
    "blocks": [{
        "name": "Add Image with Text",
        "settings": [{
                "id": "image",
                "type": "image_picker",
                "label": "Image"
            },
            {
                "id": "link",
                "type": "url",
                "label": "Image link"
            },
            {
                "name": "Text Box",
                "settings": [{
                        "id": "text-box-title",
                        "type": "text",
                        "label": "Heading",
                        "default": "Title"
                    },
                    {
                        "id": "text-box-content",
                        "type": "richtext",
                        "label": "Add custom text below",
                        "default": "<p>Add your text here</p>"
                    }
                ]
            }
        ],
        "presets": [{
            "name": "Call to Action Blocks",
            "category": "CTA button",
            "blocks": [{
                    "type": "select"
                },
                {
                    "type": "select"
                }
            ]
        }]
    }]
}

這是一個很好的工具來檢查你的 JSON： https://jsonlint.com/

Answer 3

我已經解決了您的代碼的問題。 所以，請使用下面附加的更新代碼。

{% for block in section.blocks %}  
  <div class="img" id="call-to-action-{{ block.id }}">   
    <h1> {{ block.settings.text-box-title }} </h1>
    <h3> {{ block.settings.text-box-content }} </h3>
    <a href="{{ block.settings.link }}" class="img-link-wrap img--cta">
      <img src="{{ block.settings.image | img_url : '600x600' }}" alt="" >
    </a>
  </div>
{% endfor %}


{% schema %}
{
    "name": "CTA Blocks",
    "max_blocks": 2,
    "settings": [
      {
        "id": "text-box",
        "type": "text",
        "label": "Heading",
        "default": "Title"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Add Image with Text",
        "settings": [
            {
              "id": "image",
              "type": "image_picker",
              "label": "Image"
            },
            {
              "id": "link",
              "type": "url",
              "label": "Image link"
            },
            {
              "id": "text-box-title",
              "type": "text",
              "label": "Heading",
              "default": "Title"
            },
            {
              "id": "text-box-content",
              "type": "richtext",
              "label": "Add custom text below",
              "default": "<p>Add your text here</p>"
            }
          ]
       }     
    ],
    "presets": [
      {
        "name": "CTA Blocks",
        "category": "CTA button",
        "blocks": [
          { 
            "type": "image"
          }
        ]
      }
    ]
}
{% endschema %}