Shopify自作で「商品一覧」を作る！カスタマイズ画面で簡単に指定できるスキーマ設定の後編、TMLとLiquidの書き方について解説します。
前の記事Shopify自作で「商品一覧」を作る！カスタマイズ画面で簡単に指定できるスキーマ設定の後編になります。
この記事では、スキーマ設定によってカスタマイズ画面で入力・指定したものを表示させるためのHTMLとLiquidの書き方についてご紹介します。
※カスタマイズ画面とは、Shopifyテーマで用意されているビジュアルエディタ、ビルダーのような画面。テーマエディタともいう。
HTMLとLiquid
簡単に言うと、
①Shopify自作で「商品一覧」を作る！カスタマイズ画面で簡単に指定できるスキーマ設定によって、カスタマイズ画面で各種「値」設定できるようになる。
②HTMLとLiquidコードで、設定済みの「値」を取得・表示させる。
になります。
スキーマ設定が「器」を作る作業であれば、カスタマイズ画面で器に盛った「料理(値)」をお客様に出す作業が、HTMLとLiquidのコードになります。
{%- assign collection = collections[section.settings.collection_handle] -%}
<div id="section-collection-products" data-aos="fade-up" data-aos-duration="1100">
<div class="container productBox">
<div class="collection-products-heading">
<h2>{{ section.settings.title | escape }}</h2>
</div>
<ul class="collection-products">
{% assign sorted_products = collection.all_products | sort: 'published_at' %}
{% for product in sorted_products reversed limit: section.settings.product_limit %}
<li class="collection-product-item">
<a href="{{ product.url }}"> //商品URL
<div class="collection-product-image">
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }} //サムネイル">
</div>
<div class="collection-product-info">
<div class="collection-product-title"><p>{{ product.title }}</p></div> //商品名
<div class="collection-product-price">{{ product.price | money }}</div> //価格
</div>
</a>
</li>
{% endfor %}
</ul>
<p class="viewall"><a href="{{ collection.url }}" class="viewall">VIEW ALL</a></p>
</div>
</div>では、１つずつ解説してまいります。
{%- assign collection = collections[section.settings.collection_handle] -%}
まず「collection」という変数を定義します。「collections」はLiqudオブジェクトで、後ろの[section.settings.news_list]のnews_listは、ブログ選択のスキーマID。
これにより、カスタマイズ画面で指定したコレクションを「collection」という変数に格納できます。後述する、ループを作成する「for文」の「対象」となるコレクションを指定する事前作業になります。
次は、商品一覧のタイトル{{ section.settings.title | escape }}。こちらもスキーマIDのsettings.titleを取得・表示します。
公開順でソートしたループを作る
<ul class="collection-products">
{% assign sorted_products = collection.all_products | sort: 'published_at' %}
{% for product in sorted_products reversed limit: section.settings.product_limit %}
<li class="collection-product-item">
...
</li>
</ul>まず、ここでもう1度、変数格納を行います。すでに作成した変数collectionの後ろに.all_productというプロパティを付けて、「すでに指定されたコレクションのすべての商品」という変数オブジェクトを作ります。
| sort: 'published_at'は、公開日でソートするという役割を果たします。
これらがsorted_productsという変数に格納し、次に続く「for文」で作るループの対象になるのです。
{% for product in sorted_products reversed limit: section.settings.product_limit %}
reversedは「逆順」という意味。「公開日が新しいものが一番先頭に来るように」という役割を持ちます。
limit: section.settings.product_limitは、カスタマイズ画面で指定した「表示件数」である、スキーマIDproduct_limitを用いて「表示件数」を制御する役割を持ちます。
商品情報の取得・表示
「li」と「/li」の間には、商品のタイトルやサムネイル、値段などの情報を取得・表示されます。
例えば、
{{ product.title }}は、商品タイトル{{ product.url }}は、商品ページのURL{{ product.featured_image.src | img_url: 'large' }}は、商品のサムネイル(画像のURL)
など。ちなみにproductを「オブジェクト」といい、「.」の後ろに続くurlなどは「プロパティ」といいます。
最後の<p class="viewall"><a href="{{ collection.url }}" class="viewall">VIEW ALL</a></p>は、コレクションページへのリンクになります。
「ディスカウント前後の価格」「割引率」を表示させたい
もし、ディスカウントがなされた場合、ディスカウント前後の価格と割引率を表示させ、顧客にお得感を際立たせたいものです。
商品一覧に「ディスカウント前後の価格」と「割引率」を表示させる手法については、以下の記事をご確認ください。
【Shopify小技】商品一覧に「ディスカウント前後の価格」「割引率」を表示させたい
スライドショーにしたい
作成した一覧をより見栄えよくスライドショーにしたいと思う方も以下の記事をご一読ください。
【Shopify小技】スライドショーjQueryプラグイン「slick」を実装したい
以上「Shopify自作で「商品一覧」を作る！」後編となるHTMLとLiquidの書き方について解説しました。
