見出し画像

Shopifyテーマ Chapter 8 スニペットの使い方

Yuya M

以前のチャプターでも紹介しましたが、Shopifyでスニペットを使うにあたって下記の事を覚えておくとわかりやすいです。

  • スニペットは再利用するコードの塊をまとめたファイル。

  • スニペットはスニペットフォルダに格納します。

  • スニペットファイルには.liquidの拡張子をつけます。

  • スニペットファイルはストア全体を通して複数回使うコードに使われます。

  • テンプレート内で仕様するにはLiquidコードタグ{% render %}を使います。

  • 使用するときに{% render 'snippets-name' %}とスニペットファイルの名前をいれますが、.liquidの拡張子を付ける必要はありません。

  • スニペットはその使用先のテンプレートのvariableを引き継ぐことができます。

  • SNSリンクやパジネーションなどもスニペットを使う例の一つです。

スニペットの使い方(応用)

スニペットを使えば同じコードを何度も書く必要がなくなり、そのコードについて一元管理できるのは利点の一つです。サイト全体の複数のテンプレートに何度も使われるコードをスニペットとして管理しておけば、そのスニペットの内容を一つ書き加えるだけで、すべての共通コードをアップデートできます。

またスニペットを使いテンプレートファイルを構成しておけば、長いコードで構成されるファイルになることを防ぐことができます。

もちろんファイルの構成の仕方の方針は人によって違いますが、スニペットを使うのには他にも理由があります。

条件によりうスニペットのローディング

スニペット活用の一例として条件によるローディングがあります。

商品のハンドル名

Shopifyのすべてのオブジェクトにはそれぞれ固有のハンドル名があります。
それはWordpressでいういうところのslugのようなものです。ハンドル名はURLで使えるような名前になっています。

すべての商品は管理画面で登録したときにその商品名を参考にして自動的にハンドル名が割り振られます。
基本的には自動で行われる処理ですが、自分で好きなハンドル名をつけることができます。
特に日本語で商品名を入力すると、わかりにくいハンドル名となってしまうこともあるのでハンドル名を変えるのも良いかもしれません。

ハンドル名は商品ページでも確認できます。商品管理ページの｢検索結果のプレビュー｣の項目にあるURLハンドル名のところを確認してください。
下記の写真の例だと、この商品のハンドル名は｢blue-pants｣です。

このハンドル名があることによりShopifyテーマ上で商品をオブジェクトとして扱うのがとても簡単になります。

if文の中のハンドル名

Liquidの条件分岐if文を使うことにより、現在の商品ページのハンドル名をチェックしスニペットを読み込ませるかどうかを決めることが可能です。

例えばcoffe-cupというハンドル名の特定の商品群を表示したいとします。

{% if product.handle contains 'coffee-cup %}
 {% render 'special-offer %}
{% endif %}

 上記例ではまずLiquidのif文によりproduct.handleがcoffee-cupという値を持つかどうか判断し、もしそうであればspecial-offerのスニペットを読み込ませるものとなっています。

これはもっともシンプルな例ですが、この方法を用いれば商品によってページの内容を変化させることができるようになります。オンラインストアの魅せ方・表現の幅を広げられます。
このシンプルな方法だけでもShopifyのテーマを独自に・柔軟なものに構成することができるようになります。

スニペットの名前の付け方の例


Dawnテーマの中のスニペット

先にも紹介したようにスニペットフォルダは、すべてのスニペットが入った大きな｢カゴ｣のようなものです。大きなカゴの中にたくさんのファイルを上手に整理しておくためにも名前の付け方は非常に重要です。できるかぎり明確でわかりやすい名前をつけるようにしてくと良いです。

例えば下記のような名前の付け方。

  • product-limited-edition-coffee-cup.liquid

  • product-showcase.liquid

  • collections-coffee-cups.liquid

またこの例ではテンプレートの名前に続いて名前をつけてあることによって、テンプレートと共に使うワークフローがわかりやすくなるようにしてあります。

Variable Scope 変数 スコープ

スニペットがテンプレートファイル内で使われるとき、スニペットはそのテンプレートの変数(variable)にアクセスすることができます。
ただし、そのテンプレートが持つ変数(variable)に限り使用でき、またその変数に対応する形でしかアクセスできません。

グローバルやテンプレートの持つ変数の形式以外のものにアクセスしたい場合は、{% assign %}のliquidコードタグを使います。

{% assign my_variable = 'banana' %}
{% render 'name', my_variable: my-variable, my_other_variable: 'orange'%}

これでこのスニペットはbananaとorangesという変数にアクセスできます。

また下記のようなフォーマットでコレクションにもアクセスできます。

{% assign all_products = collections.all.products %}
{% render 'snippet', products: all_products %}

またスニペット内で新しい変数にアサインを行っても、その親テンプレートの変数が上書きされるわけではない点にご注意ください。

withの使い方

つづいてrenderタグ内のパラメーターwithについて見ます。さまざまなアプリケーションに使える再利用可能なスニペットを作成する時、このアプローチは非常に便利なものになります。

下記はテンプレート内に商品コレクションをアウトプットさせるためのスニペットの例です。

<ul>
{% for product in collections.all.products %}
<li><a href="{{ product.url }}"> {{ product.title }}</a>
{% endfor %}
</ul>

このcollectionsはグローバルな変数であるため、どのテンプレート上でも使えます。そのためこのスニペットはシンプルShopifyストアすべての商品をアウトプットすることが可能です。

もし特定のコレクションだけを表示させたい場合は、下記のようなスニペットを書く必要があります。

<ul>
{% for product in collection-product-list %}
<li><a href="{{ product.url }}"> {{ product.title }}</a>
{% endfor %}
</ul>

見てわかるようにcollections.all.productsというliquidコレクションのループさせるのでなく、かわりにcollection-product-listという変数をループさせていることがわかります。

このスニペットをすべての商品だけでなく汎用性をもたせて使用する方法をみてみます。

{% assign c = collections.all.products %}
{% render 'collection-product-list' with c %}

最初にcollections.all.productsを変数cにアサインさせていることがわかります(この変数名は好きな名前をつけることができます。)

そしてrenderのLiquidタグを見るとcollection-product-listに続きwith c と付け加えられていることがわかります。

このwithのパラメーターはスニペットとして同じ名前を共有し、スニペットの中の変数に値をアサインさせます。

この説明だけではすこしわかりにくいので例を使って説明すると、

{% for product in collection-product-list %}

ここで変数cはスニペット内でcollection-product-listによって参照されることになります。この時点でスニペットはwithのパラメーターによって渡されたどのコレクションでも機能するようになります。

汎用性のあるスニペットの拡張

スニペットには一つ以上の変数を渡すことも可能です。例えば表示する商品数を制限することなどにも使われます。liquidのforループでは下記の例のようにループする回数を制限します。limit: のパラメーターによってループする回数を指定できます。

<ul>
{% for product in collection-product-list limit: limit_count %}
<li><a href="{{ product.url }}">{{ product.title }}</a>
{% endfor %}
</ul>

そして下記のようにスニペットをレンダリングするときにスニペットにある変数を利用することができます。

{% assign c = collections.all.products %}
{% render ‘collection-product-list’ with c, limit_count: 2 %}

上記の例ではこのスニペットがレンダリングされたとき、2回目がループされたらそこでループするのは終わりになります。回数を指定しなければliquidコレクションはすべて繰り返します。
またliquidコレクションに含まれる商品するよりlimit_countの方が多い場合は、最後の商品でforループは終わります。商品数より多くループされることはありません。

また変数はコンマで区切ることでさらに追加できます。例えば以下のような例です。

{% render 'collection-product-list' with c, limit_count:2, heading_text: "すべての商品" %}

これでスニペット内に{{ heading_text }}というアウトプットタグがあればrenderの変数で指定した値をアウトプットできるようになります。
この例では｢すべての商品｣とアウトプットされます。

スニペットは単純なツールのように見えるかもしれませんが、テーマの様々な要素に応用が効き、Shopifyテーマの構成をより柔軟なものにしてくれます。

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