[Shopify] セクション開発メモ

<p>テキスト1は「{{ section.settings.text1 }}」です。</p>
<p>テキスト2は「{{ section.settings.text2 }}」です。</p>

{% schema %}
  {
    "name": "Sample Section",
    "class": "sample_section_class",
    "settings": [
      {
        "type": "text",
        "id": "text1",
        "label": "テキスト1"
      },
      {
        "type": "text",
        "id": "text2",
        "label": "テキスト2"
      }
    ],
    "presets": [{
      "name": "Sample Section(presets)"
    }]
  }
{% endschema %}

{
  "sections": {
    "xxx-xxx-xxx": {
      "type": "sample",
      "settings": {
        "text1": "あいうえお",
        "text2": "かきくけこ"
      }
    },
    "yyy-yyy-yyy": {
      "type": "sample",
      "settings": {
        "text1": "さしすせそ",
        "text2": ""
      }
    }
  },
  "order": [
    "xxx-xxx-xxx",
    "yyy-yyy-yyy"
  ]
}

<div id="shopify-section-template--zzzzz__xxx-xxx-xxx" class="shopify-section sample_section_class">
  <p>テキスト1は「あいうえお」です。</p>
  <p>テキスト2は「かきくけこ」です。</p>
</div>
<div id="shopify-section-template--zzzzz__yyy-yyy-yyy" class="shopify-section sample_section_class">
  <p>テキスト1は「さしすせそ」です。</p>
  <p>テキスト2は「」です。</p>
</div>

{%- if section.blocks.size > 0 -%}
  {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when 'slide' -%}
      <p><img src="{{ block.settings.image | image_url }}" alt=""></p>
    {%- endcase -%}
  {%- endfor -%}
{%- endif -%}

{% schema %}
  {
    "name": "Sample Section with block",
    "class": "sample_section-with-block_class",
    "settings": [
    ],
    "blocks": [
      {
        "name": "Slide",
        "type": "slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "画像"
          }
        ]
      }	
    ],
    "presets": [{
      "name": "Sample Section with block(presets)"
    }]
  }
{% endschema %}

{
  "sections": {
    "xxx-xxx-xxx": {
      "type": "sample",
      "blocks": {
        "aaa-aaa-aaa": {
          "type": "slide",
          "settings": {
            "image": "shopify:\/\/shop_images\/01.jpg"
          }
        },
        "bbb-bbb-bbb": {
          "type": "slide",
          "settings": {
            "image": "shopify:\/\/shop_images\/02.jpg"
          }
        }
      },
      "block_order": [
        "aaa-aaa-aaa",
        "bbb-bbb-bbb"
      ],
      "settings": {
      }
    }
    "section1": {
      "type": "sample_section",
      "blocks": {
        "block1": {
          "image_pc": "shopify:\/\/shop_images\/img01.jpg",
        },
        "block2": {
          "image_pc": "shopify:\/\/shop_images\/img02.jpg",
        },
        "block3": {
          "image_pc": "shopify:\/\/shop_images\/img03.jpg",
        }
      }
      "block_order": [
        "block1",
        "block2",
        "block3"
      ],
    }
  },
  "order": [
    "xxx-xxx-xxx"
  ]
}

<div id="shopify-section-template--zzzzz__xxx-xxx-xxx" class="shopify-section sample_section_class">
  <p><img src="/cdn/shop/files/img01.jpg"></p>
  <p><img src="/cdn/shop/files/img02.jpg"></p>
</div>

(前略)
"settings": [
  {
    "type": "text", (←この部分の一覧です)
    "id": "text1",
    "label": "テキスト1"
  }
}
(後略)