基本的にペアで使用される「case」と「when」。両者の使い方と利用シーンと、「case」が複数ある場合についてサンプルコードを交えながら解説します。
Shopifyストアの設定>通知でよく登場するLiquid制御構文「case」と「when」。
基本的にペアで使用される事が多いですが、両者の使い方と利用シーンついて簡単に紹介します。
「case」と「when」利用シーン
まず、2つの関係について。上述したように「case」と「when」は基本的にペアで使用されます。
よく利用されるシーンは、「case」でShopifyの変数を参照し、「when」で実行するというケースが多いです。
以下は、顧客への通知に使用される実際の構文です。
{% case delivery_method %}
{% when 'pick-up' %}
注文の受取の準備が整うと、メールが届きます。
{% when 'local' %}
{{ customer.last_name }}様、ご注文の品を配達する準備を行っております。
{% else %}
注文の発送準備を行なっております。商品を発送いたしましたら、改めてお知らせいたします。
{% endcase %}
「case」でdelivery_method
という通知のプロパティを参照して、「when」で「〇〇〇の時は、〇〇〇を実行して」とアクションを指示するという仕組みになります。
ここでは、配送方法(delivery_method)のプロパティを参照し「pick-up(受取り)」の場合は「注文の受取の準備が整うと、メールが届きます。」と、「local(ローカル配達)」の場合は「{{ customer.last_name }}様、ご注文の品を配達する準備を行っております。」と表示されます。
※{{ customer.last_name }}
は、顧客の苗字(ラストネーム)のオブジェクトとプロパティです。
{% else %}
は、どれにも当てはまらない場合の処理。そして最後は{% endcase %}
で構文を閉じます。
以上、caseとwhenの使い方について紹介しました。
「case」が複数ある場合は?
が、ここで別の疑問が・・もし、顧客が複数の商品を購入して、配送方法がバラバラだったら?
{% for item in checkout.line_items %}
<h3>{{ item.title }}</h3>
{% assign delivery_method = item.delivery_method %}
{% case delivery_method %}
{% when 'pick-up' %}
<p>注文の受取の準備が整うと、メールが届きます。</p>
{% when 'local' %}
<p>ご注文の品を配達する準備を行っております。</p>
{% else %}
<p>注文の発送準備を行なっております。商品を発送いたしましたら、改めてお知らせいたします。</p>
{% endcase %}
{% endfor %}
ここではfor文を使います。
Liquidにおいて「for文」は、変数が持つ要素を「1つずつ取り出して変数に代入して、アクションを手助けする」という役割を持っています。
処理とは主に、表示やデータ転送などがあります。
ここでも、checkout.line_items
という「チェックアウト済みの商品リスト」から商品を1つずつ取り出してitem
という変数に代入し、その後続く処理を手助けしています。
①{{ item.title }}
と、商品のタイトルを表示
②item.delivery_method
という商品の配送方法を、item.delivery_method
という変数に代入
③caseとwhenを使用し、商品ごとの配送方法に沿って処理を行います。
for文なので、注文済みの商品の数ほどループして処理を実行します。
このLiquid文は、例えば、以下のようなHTMLになります。
<h3>冷凍餃子30個入り</h3>
<p>注文の受取の準備が整うと、メールが届きます。</p>
<h3>冷やし中華</h3>
<p>ご注文の品を配達する準備を行っております。</p>
「assign」はなぜ使うの?
ここでもう1つの疑問が・・「なぜassginを使うの?」です。
以下の構文を見てみてください。
{% for item in checkout.line_items %}
<h3>{{ item.title }}</h3>
{% case item.delivery_method %}
{% when 'pick-up' %}
<p>注文の受取の準備が整うと、メールが届きます。</p>
{% when 'local' %}
<p>ご注文の品を配達する準備を行っております。</p>
{% else %}
<p>注文の発送準備を行なっております。商品を発送いたしましたら、改めてお知らせいたします。</p>
{% endcase %}
{% endfor %}
この構文では、assign
を使って変数代入をせず、{% case item.delivery_method %}
と、直接Shopifyのオブジェクトとプロパティを用いています。
これでも結果は変わらないですが、ループ(商品)ごとにitem.delivery_method
を変数に一時的に代入することによってスムーズで分かりやすい構文になるので、私見ですが、ループのエラーが発生しても容易にトラブルシュートができると思います。