renderを使いこなす！

{% render 'card-product',
  card_product: product,
  media_aspect_ratio: section.settings.image_ratio,
  show_secondary_image: section.settings.show_secondary_image,
  show_vendor: section.settings.show_vendor,
  show_rating: section.settings.show_rating,
  show_quick_add: section.settings.enable_quick_add,
  section_id: section.id
%}

配列内の変数を繰り返し処理することも可能

forを使って配列内の変数を繰り返しスニペットファイル内で読み込むことが可能です！

{% render 'ファイル名' for array as item %}

ちなみに配列の要素とは別で合わせて変数も渡すことが可能です

{% render 'ファイル名' for array as item, variable1: value1 %}

セクションを作って実際にrenderを触ってみよう

今回は「render確認用セクション」を作ります
実際にコードを書いてみると理解が深まるので、ぜひコピペでもいいので書いてみてください！！

以下の2つのファイルをそれぞれのフォルダに作成します

sectionsフォルダ内に
・c_render-test-section.liquid

snippetsフォルダ内に
・c_section-title.liquid

以下のコードをコピペして動きを見てみて下さい！

セクションファイル（c_render-test-section.liquid）

<div class="page-width">
  
  <h2>■渡す変数なし</h2>
  {% render 'c_section-title' %}
  
  <h2>■渡す変数あり</h2>
  {% render 'c_section-title', 
    title: section.settings.title , 
    color: 'color' 
  %}
  
  <h2>■配列を繰り返し処理 </h2>
  <!-- 配列を定義 -->
  {% assign mushroom = '松茸,舞茸,まちたけ,エリンギ' %}
  {% assign mushroomArray = mushroom | split: ',' %}

  {% render 'c_section-title' for mushroomArray as title %}

</div>

{% schema %}
{
  "name": "render確認用セクション",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "見出し",
      "default": "見出し"
    },
    {
      "type": "color",
      "id": "color",
      "label": "テキストカラー",
      "default": "#ff0000"
    }
  ],
  "presets":[
    {
      "name" : "render確認用セクション",
      "category": "カスタムパーツ"
    }
  ]
}
{% endschema %}

スニペットファイルを読み込むためだけに作ったセクションです

スニペットファイル（c_section-title.liquid）

<h3 class="c_section-title {{color}}">タイトル：{{ title }}</h3>
<style>
  .c_section-title {
    font-size: 36px;
    font-weight: 700;
    color: #000;
    margin: 16px;
  }
  
  .color {
    color: {{ section.settings.color }};
  }
</style>

• {{ color }}と{{ title }}についてはrenderで渡した変数になります
• スキーマの値もそのまま取得可能→section.settings.color

スニペットファイルのコードがそのままセクションファイル内に反映されるイメージです！

まとめ

今回はrenderについて解説しました！

render確認用セクションで作成したセクションタイトルのスニペットなど
デザインで繰り返し使われるものはスニペット化しておいた方が後々楽です！

サイト全体で10箇所同じデザインのタイトルがあった場合、修正のたびに10箇所修正するの大変ですよね。。

スニペット化しておけば1箇所で修正が終わっちゃいます！！楽ですよねー！

繰り返しになりますが、以下の３つのコードを理解しておくだけで
テーマのカスタマイズやオリジナルセクションの作成がよりやりやすくなります！

{% render 'ファイル名' %}
{% render 'ファイル名', variable1: value1, variable2: value2 %}
{% render 'ファイル名' for array as item %}

はい、スニペットに登録しましょう！！

コード忘れた時もこのブログを思い出して参考にしていただけると幸いです！

各種リンク

• render