#06 ダイナミックセクションでコレクションの商品を表示する方法

2021年10月14日 13:42

このページ見ることで以下のことがわかります。
・ダイナミックセクションにコレクションの商品を表示する方法
・Liquidの在り方（なぜそのコードになったのか）
・Liquidの流れがイメージできる

セクションファイル新規作成とJSONコードの追加

「sections」フォルダに新しいファイルを作成します。
ファイル名「featured-collection.liquid」

新規作成した「featured-collection.liquid」に以下のJSONコードを記述することで管理画面からコレクションの商品を表示する設定が可能になります。

{% schema %}
{
   "name": "Featured Collection",
   "class": "featured-collection-section",
   "settings": [
       {
           "type": "collection",
           "id": "featured_collection",
           "label": "Collection"
       },
       {
           "type": "text",
           "id": "title",
           "default": "Featured Collection",
           "label": "Title"
       }
   ],
   "presets": [
       {
           "category": "Collection",
           "name":"Featured Collection"
       }
   ]
}
{% endschema %}

ダイナミックセクション-コレクション追加

JSONのコードだけでは、プレビュー画面に表示されないのでHTMLコードを追記していきます。

これからやること
①コレクションに登録されている商品を表示する
②登録されている商品のタイトル・価格を表示する
③登録されている商品のリンクと画像を表示する
④商品が横並びになるようにHTMLとCSSでコーディングする

①コレクションに登録されている商品を表示する

下準備
あらかじめ管理画面から商品Ａを登録しています。
商品Aにはコレクションはデフォルトの「ホームページ」を反映中。

<section class="container">
   {% for product in collections[section.settings.featured_collection].products %}
       {{ product.title }}
   {% endfor %}
</section>

{% for product in collections[section.settings.featured_collection].products %}
繰り返し処理内容
{% endfor %}

コレクションに登録されている商品があれば
繰り返し処理内容
を実行する

管理画面から設定したコレクションの商品情報を取得するLiquidコード
collections[section.settings.featured_collection].products

Liquidコードの読み方
基本的に左から順番に読んでいく。
大きな箱の中から欲しいモノ（情報）を取り出すイメージです。
左に記載されているコードが大きな箱です。

collections　の箱に入っている
[section.settings.featured_collection] 管理画面から選択したコレクション
.products　商品情報

collections　グローバルオブジェクト

グローバルオブジェクトはどこからでも中身を取り出せるオブジェクトのこです。詳しくは以下から参照できます。

[section.settings.featured_collection]

ファイル名「featured-collection.liquid」で記述したJSONコード

"settings": [
{
"type": "collection",
"id": "featured_collection",
"label": "Collection"
},

collections[section.settings.featured_collection]の
[ ] とは ”ハンドル" のことです。

グローバルオブジェクト collections の中の情報を
[ ハンドル ] をつかって情報を取得している

ハンドルの特徴
・オブジェクトはハンドルを持っている
・ハンドルはオブジェクトが持っている情報にアクセスするために使用
・ハンドルは URLにも使われる
・ハンドルは同じ名前は不可。同名の場合は〇〇-1 のように採番される

これまでハンドルのことをURLと認識していました。
しかし、ハンドルはオブジェクトにも使われていることを知りました。

グローバルオブジェクトの中の情報をハンドルをつかって
欲しい情報を指定しているイメージです。

@t-kurasawaさんの記事が参考になります。

課題：ハンドルに指定できる文字について他にどんな種類があるのか？
[section.settings.id名]
（例）[section.settings.featured_collection]

.products
オブジェクトに対するプロパティ（商品に関する情報をもっている）

（例）forの繰り返し処理の中に　{{ product.title }}　がある場合
「商品のタイトル」を表示する

プレビュー画面-商品名表示

プレビュー画面でコレクション「ホームページ」に設定されている
「商品A」のタイトルが表示されます。

②登録されている商品のタイトル・価格を表示する

商品の価格を表示するコードを追記します。

<section class="container">
   {% for product in collections[section.settings.featured_collection].products %}
       <div class="card">
           <h3>{{ product.title }}</h3>
           <p>{{ product.price | money }}</p>
       </div>   
   {% endfor %}
</section>

{{ product.price | money }}　moneyフィルター

moneyフィルターの種類

| money
¥100

| money_with_currency
¥100 JPY

| money_without_currency
100

| money_without_trailing_zeros
¥100

③登録されている商品のリンクと画像を表示する

商品のリンクと画像を表示するコードを追記します。

<section class="container">
   {% for product in collections[section.settings.featured_collection].products %}
       <div class="card" style="width: 18rem;">
           <img src="{{ product.featured_media.preview_image | img_url }}" alt="{{ product.title }}">
           <div class="card-body">
               <h3><a href="{{ product.url }}">{{ product.title }}</a></h3>
               <p>{{ product.price | money_without_trailing_zeros }}</p>
           </div>
       </div>   
   {% endfor %}
</section>

商品画像を表示する
{{ product.featured_media.preview_image | img_url }}

product　オブジェクト
.featured_media.preview_image
　・商品登録されている最初の画像を表示する
　・プレビュー画像を表示する
| img_url　URLフィルター　画像までのURLを表示する

.preview_image
プレビュー画像だと解像度が低い画像が表示されるため、画像がぼやける
※画像サイズを大きいサイズに変更する必要あり

画像サイズの指定方法
featured_media.preview_image | img_url
↓
featured_media.preview_image | img_url : 'medium'

img_urlの後にパラメーター「: 'medium'」でサイズを指定することができる
※mediumは240×240のサイズ

| img_url : 'medium' の 「: 'medium'」は何か？

フィルターの後ろにある「:」に続くのはパラメーターです。

・フィルターには「:」のあとにパラメーターを指定できるフィルターがある
・パラメーターを指定するときに「:」でつなげてパラメーターを指定する

パラメーターの例として画像のサイズがありこの場合は”中サイズ”でとなる
| img_url : 'medium'

商品詳細ページへのURLを表示する
{{ product.url }}

プレビュー画面に画像とタイトルにURLを設定ができました。

プレビュー画面-商品画像とリンク表示

商品画像がないときはShopifyにあらかじめ登録されているSVG画像を表示する設定をする　プレースホルダの設定

変数を用意するコード編集動画

編集後のコード


<section class="container">
   {% for product in collections[section.settings.featured_collection].products %}
       {% assign image = product.featured_media.preview_image %}
       <div class="card" style="width: 18rem;">
           <img src="{{ image | img_url }}" alt="{{ product.title }}">
           <div class="card-body">
               <h3><a href="{{ product.url }}">{{ product.title }}</a></h3>
               <p>{{ product.price | money_without_trailing_zeros }}</p>
           </div>
       </div>   
   {% endfor %}
</section>

もし、最初の商品画像が設定されているなら、最初の商品画像を表示する、それ以外なら、Shopifyにあらかじめ登録されているSVG画像を表示する

<section class="container">
   {% for product in collections[section.settings.featured_collection].products %}
       {% assign image = product.featured_media.preview_image %}
       <div class="card" style="width: 18rem;">
           {% if image != blank %}
               <img class="card-img-top" src="{{ image | img_url }}" alt="{{ product.title }}">
               {% else %}
               {{ 'product-1' | placeholder_svg_tag: 'card-img-top' }}
           {% endif %}               
           <div class="card-body">
               <h3><a href="{{ product.url }}">{{ product.title }}</a></h3>
               <p>{{ product.price | money_without_trailing_zeros }}</p>
           </div>
       </div>   
   {% endfor %}
</section>

{% assign image = product.featured_media.preview_image %}
{% if image != blank %}
<img class="card-img-top" src="{{ image | img_url }}" alt="{{ product.title }}">
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'card-img-top' }}
{% endif %}

もし、最初の商品画像が設定されているなら、最初の商品画像を表示する、それ以外なら、Shopifyにあらかじめ登録されているSVG画像を表示する

商品画像のURLを表示する
{{ image | img_url }}

{{ 'product-1' | placeholder_svg_tag: 'card-img-top' }}

'product-1'　Shopifyにあらかじめ登録されているSVG

プレースホルダ―2

プレースホルダー名「product-1」です。
詳しくは公式のサイトで確認ができます。
https://shopify.dev/api/liquid/filters/additional-filters#placeholder_svg_tag

| placeholder_svg_tag: 'card-img-top'　SVGにCSSのクラス名を追加できる
↓
<svg class="card-img-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525.5 525.5"><path d="M727.XXXXX"></svg>

プレビュー画面でプレースホルダ「product-1」を設定できました。

プレビュー画面-商品画像プレースホルダ化

④商品が横並びになるようにHTMLとCSSでコーディングする

編集したコードです。Bootstrapの記述をつかっています。

<section class="container py-4">
   <h2 class="text-center my-3">{{ section.settings.title }}</h2>
   <div class="row">
       {% for product in collections[section.settings.featured_collection].products %}
           {% assign image = product.featured_media.preview_image %}
           <div class="col">
               <div class="card" style="width: 18rem;">
                   {% if image != blank %}
                       <img class="card-img-top" src="{{ image | img_url }}" alt="{{ product.title }}">
                       {% else %}
                       {{ 'product-1' | placeholder_svg_tag: 'card-img-top' }}
                   {% endif %}               
                   <div class="card-body">
                       <h3><a href="{{ product.url }}">{{ product.title }}</a></h3>
                       <p>{{ product.price | money_without_trailing_zeros }}</p>
                   </div>
               </div>   
           </div>            
   {% endfor %}
   </div>    
</section>

以上でダイナミックセクションでコレクションの商品を表示する方法を終わります。

この記事が気に入ったらサポートをしてみませんか？