【Shopify】条件分岐や繰り返しをどこよりも詳しく解説してみた。
ぶんけいです。今回は弊社でも採用しているネットショップを構築する際に必要なShopifyを取り上げて、その中でも少しカスタマイズをしたいという方に向けて記事を書きました。
Shopifyのテーマをカスタマイズする際には、Liquidというテンプレート言語を使用します。その中でも、条件分岐は非常に重要な概念で、Shopifyのテーマを自由に操るための鍵となります。今回は、Shopifyの条件分岐をどこよりも詳しく解説します。
Contents
Liquidとは？
Liquidは、Shopifyで使用されるテンプレート言語です。テーマのカスタマイズには、このLiquidを理解することが必要となります。Liquidには大きく「Object」、「Tag」、「filter」という概念がありますが、今回はその中から「Tag」について、特に条件分岐に関連する部分を詳しく解説します。
LiquidのTagとは？
LiquidのTagは、{% %}で囲んで記述する条件分岐や繰り返しの記述のことです。基本的にはphpなどと同じようにif文（条件分岐）やfor文（繰り返し）などがあります。
if文
if文は、特定の条件が真である場合に処理を行います。例えば、以下のコードは、「もし 商品のタイトルが スペシャルアイテム とイコールだったら」という意味です。特定のタグが入っていたらラベルを表示したりする時に使用します。
{% if product.title == 'スペシャルアイテム' %}
<p>この商品はスペシャルアイテムです</p>
{% endif %}unless文
unless文は、特定の条件が偽である場合に処理を行います。以下のコードは、「もし 商品のタイトルが スペシャルアイテム とイコールじゃなかったら」という意味になります。if文で!=（もしxxじゃなかったら）と書いた場合と同じです。
{% unless product.title == 'スペシャルアイテム' %}
<p>この商品はスペシャルアイテムではありません</p>
{% endunless %}
else / elsif
if文に続けて別の条件を指定する場合は、else/elsifを使います。以下のコードは、「もし商品のタイトルがスペシャルアイテムなら、スペシャルアイテムと表示し、プレオーダーアイテムならプレオーダーアイテムと表示し、それ以外なら通常の商品と表示する」という意味です。
{% if product.title == 'スペシャルアイテム' %}
この商品はスペシャルアイテムです
{% elsif product.title == 'プレオーダーアイテム' %}
この商品はプレオーダーアイテムです
{% else %}
この商品は通常の商品です
{% endif %}
case / when
case / whenは、特定の値に応じて処理を分岐させます。以下のコードは、「商品のタイトルがスペシャルアイテムなら、スペシャルアイテムと表示し、プレオーダーアイテムならプレオーダーアイテムと表示し、限定アイテムなら限定アイテムと表示し、それ以外なら通常の商品と表示する」という意味です。if文と似たような動きですが、if文が細かい条件指定に適しているのに対し、case / whenは単純で数の多い条件を指定する際に使用します。
{% case product.title %}
{% when 'スペシャルアイテム' %}
<p>この商品はスペシャルアイテムです</p>
{% when 'プレオーダーアイテム' %}
<p>この商品はプレオーダーアイテムです</p>
{% when '限定アイテム' %}
<p>この商品は限定アイテムです</p>
{% else %}
この商品は通常の商品です
{% endcase %}複数の条件 (and / or)
if文に複数の条件を指定することも可能です。以下のコードは、「もし商品のタイトルが限定アイテムまたはプレオーダーアイテムなら、限定アイテムまたはプレオーダーアイテムと表示する」という意味です。orがどちらかに合致した場合、andが両方に合致した場合の指定になります。
{% if product.title == '限定アイテム' or 'プレオーダーアイテム' %}
<p>この商品は限定アイテムまたはプレオーダーアイテムです。</p>
{% endif %}for文
for文は、特定の範囲の値に対して繰り返し処理を行います。以下のコードは、ハンドルがshoesのコレクションにある商品のタイトルを全て表示します。
{% for product in collection.shoes %}
{{ product.title }}
{% endfor %}else
for文で条件に当て嵌まるものがなかった場合の記述はelseで行います。以下のコードは、コレクションに商品がなかった場合に、「このコレクションに商品はありません」と表示します。
{% for product in collection.products %}
{{ product.title }}
{% else %}
<p>このコレクションに商品はありません</p>
{% endfor %}break
繰り返しの途中で特定の値に遭遇した時、そのループを中断するにはbreakという記述を追加します。以下のコードは、1-5までの数字を繰り返し出力していますが、4に当たった時にbreakが入っているので、1、2、3の数字が出力されます。
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
continue
continueは、特定の値をスキップするための記述です。breakの例でcontinueと指定をすれば、4を除く１、2、3、5の値が出力されます。
{% for i in (1..5) %}
{% if i == 4 %}
{% continue %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
for tag parameters（for文で使えるパラメータ）
for文では、以下のようなパラメータを使用することができます。
- limit: for文で出力する値の数を制限することができます。
- offset: 最初からxx個を除く値を出力します。（3番目の項目から表示）
- range(in): 出力する値の範囲を指定することもできます。
- reversed: 後ろから順番に表示をさせることもできます。
{% for product in collection.shoes limit:2 %}
{% for product in collection.shoes offset:2 %}
{% for i in (3..5) %}
{% for item in array reversed %}
assign
assignは、特定の変数に値を代入します。以下のコードは、favorite_storeに'神戸北野'という文字列を入れています。出力は{{ }}で囲み、{{ favorite_store }}のような形で行います。
{% assign favorite_store = '神戸北野' %}2.3.2 capture
captureは、複数の値を一つの変数に格納します。以下のコードは、お気に入り店舗と所属を一つの変数profileに格納しています。{{ profile }}と記述するだけで、年齢とお気に入り店舗を出力することができます。
{% assign favorite_store = '神戸北野' %}
{% assign affiliation = PIPELINE %}
{% capture profile %}
所属：{{ affiliation }}
お気に入り店舗：{{ favorite_store }}
{% endcapture %}increment / decrement
incrementは、登場した回数分だけ数字を振ることのできるタグです。以下を出力すると、商品1から商品4までに0から3までの数字が振られます。decrementは-1、-2、-3とマイナス方向に数字を振っていきます。
【入力例】
<ul>
<li class="product-{% increment counter %}">PIPELINE_1</li>
<li class="product-{% increment counter %}">PIPELINE_2</li>
<li class="product-{% increment counter %}">PIPELINE_3</li>
<li class="product-{% increment counter %}">PIPELINE_4</li>
</ul>【出力】
<ul>
<li class="product-0}">PIPELINE_1</li>
<li class="product-1">PIPELINE_2</li>
<li class="product-2">PIPELINE_3</li>
<li class="product-3">PIPELINE_4</li>
</ul>以上がShopifyの条件分岐の詳細な解説です。これらの知識を活用して、Shopifyのテーマカスタマイズを行いましょう。
弊社ではネットショップやECサイトの制作も行っております。詳しくは下記リンクをご覧ください。
Website Creation
