FROM CACHE - jp_header
解決済

動的セクションにブロックを追加する際のpresetsに関して。

yoshimitsu
Shopify Partner
4 0 1

shopify初心者です。

https://www.shopify.jp/blog/partner-shopify-theme-section-first-create

上記のページでセクションに関して学習中です。


ページの中に
「動的セクションにブロックを追加する」
という項目があり、サンプル通りに試して問題なく動くのですが、なぜそのようにコードを書いているのかが理解できない点がありますのでご質問です。

<hr>
<div id="section-cta">
  <div class="section-header text-center">
    <h3> {{ section.settings.text-box }} </h3>
  </div>

  {% for block in section.blocks %}  
  <div class="btn" id="call-to-action">   
    <a href="{{ block.settings.link }}" class="btn">{{ block.settings.linktext }}</a>
  </div> 
  {% endfor %}

</div>  
<hr>
{% schema %}
{
  "name": "CTA Blocks",
	"max_blocks": 3,
  "settings": [
    {
      "id": "text-box",
      "type": "text",
      "label": "Heading",
      "default": "Title"
    }
  ],
  "blocks": [
    {
      "type": "select",
      "name": "Add Button",
      "settings": [
        {
          "id": "link",
          "type": "url",
       		"label": "Button link"
        },
        {
          "id": "linktext",
          "type": "text",
          "label": "Button text",
          "default": "Click here"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Call to Action Blocks",
      "category": "CTA button",
      "blocks": [
        { 
          "type": "select"
        },
        {
          "type": "select"
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}


上記のコードの中の下記の部分です。

  "presets": [
    {
      "name": "Call to Action Blocks",
      "category": "CTA button",
      "blocks": [
        { 
          "type": "select"
        },
        {
          "type": "select"
        }
      ]
    }
  ]

 
presetsの中に"name","category"が入るのは理解しているのですが、presetsの中にblocksがあるのはなぜでしょうか?
またそのblocksの中の"type":"select"が入っている理由が理解できなくて腑に落ちない状態です。。。

何故でpresetsの中にblocksが必要で"type":"select"が入っているかを教えていただきたく思います。

宜しくお願い致します。

1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
1006 380 697

成功

■presetsの中のblocksに関しまして

記載されているリンク先の以下の文章(ページ中程です)で説明されているかと思いますが、この内容以上にということでしょうか?

その下に、動的セクションのためpresetsのエリアがあり、インデックスページへの追加が可能になっています。presetsにブロックを追加することで、デフォルトでのブロック表示数を定義することができます。上の例では2つのCTAボタンが表示されることになりますが、上限を3に設定していることを思い出してください。つまり、もう1つブロックを追加することが可能になります。

 

■typeに関しまして

スクリーンショット 2020-12-14 21.49.10.png

上記赤枠部分のように、作成したblockのtypeがselectで設定されているからかと思います。

全ての場合において勧めるわけではありませんが、今回に関しては試しにtypeをtextなど別の値に書き換えてみることをお勧めします。ターミナルなどでエラーがでて大まかな理由がわかりますので。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

2件の返信2

Jizo_Inagaki
Shopify Partner
1006 380 697

成功

■presetsの中のblocksに関しまして

記載されているリンク先の以下の文章(ページ中程です)で説明されているかと思いますが、この内容以上にということでしょうか?

その下に、動的セクションのためpresetsのエリアがあり、インデックスページへの追加が可能になっています。presetsにブロックを追加することで、デフォルトでのブロック表示数を定義することができます。上の例では2つのCTAボタンが表示されることになりますが、上限を3に設定していることを思い出してください。つまり、もう1つブロックを追加することが可能になります。

 

■typeに関しまして

スクリーンショット 2020-12-14 21.49.10.png

上記赤枠部分のように、作成したblockのtypeがselectで設定されているからかと思います。

全ての場合において勧めるわけではありませんが、今回に関しては試しにtypeをtextなど別の値に書き換えてみることをお勧めします。ターミナルなどでエラーがでて大まかな理由がわかりますので。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
yoshimitsu
Shopify Partner
4 0 1

ご回答ありがとうございます。

blockのtypeがselectで設定されているので、presetsのblocksでもtypeがselectなのですね!
理解致しました。
typeを変更してエラーを見て理解度も深めてまいります。

ご回答ありがとうございました!