【Shopify】条件分岐や繰り返しをどこよりも詳しく解説してみた。

ぶんけい

ぶんけいです。今回は弊社でも採用しているネットショップを構築する際に必要なShopifyを取り上げて、その中でも少しカスタマイズをしたいという方に向けて記事を書きました。

Shopifyのテーマをカスタマイズする際には、Liquidというテンプレート言語を使用します。その中でも、条件分岐は非常に重要な概念で、Shopifyのテーマを自由に操るための鍵となります。今回は、Shopifyの条件分岐をどこよりも詳しく解説します。

Liquidとは?

Liquidは、Shopifyで使用されるテンプレート言語です。テーマのカスタマイズには、このLiquidを理解することが必要となります。Liquidには大きく「Object」、「Tag」、「filter」という概念がありますが、今回はその中から「Tag」について、特に条件分岐に関連する部分を詳しく解説します。

LiquidのTagとは?

LiquidのTagは、{% %}で囲んで記述する条件分岐や繰り返しの記述のことです。基本的にはphpなどと同じようにif文(条件分岐)やfor文(繰り返し)などがあります。

Control flow tags(条件分岐)

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 %}

Iteration tags(繰り返し)

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を除く1、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 %}

 

ここからおまけ:Variable tags(変数)

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

おすすめ記事

お問い合わせ

WEB制作、動画制作、オンライン配信、SNS運用代行などお気軽にご相談、お問い合わせください。

お問い合わせはこちら