Shopifyの公式ブログにも記載されていますが、Shopifyのチートシートを見ると、テーマの構築を行うための構文や、取得できる情報がわかります。
商品情報やブログ記事などの取得も可能ですが、ここでは複雑な事は行わず、アクセスしたユーザーが会員か否かを判定し、ウェルカムメッセージを表示させてみましょう。
会員か否かの判定
サイトを訪れたリピーターがログインしていれば、そのユーザー名が存在するはずです。
アクセスしたユーザーに名前が存在するか否かを判定するには「customer.name」を使用します。
※自身のアカウントがない場合は、あらかじめ作成し、ログインしておいてください。
前回の記事を参考に、「Sections」フォルダ内の「header.liquid」に記述します。
判定文に関しての説明はここでは割愛しますが、以下のソースをコピペして、保存→プレビューすれば、ヘッダー内に結果が表示されます。
{% if customer.name %}
<p>会員です。</p>
{% else %}
<p>ゲストです。</p>
{% endif %}
名前が存在したら「会員です。」、非ログインユーザーの場合は「ゲストです。」と表示されます。
取得した情報を表示
せっかくなので、取得した名前を表示させましよう。
<p>ようこそ
{% if customer.name %}
{{ customer.name }}
{% else %}
{{ 'ゲスト' }}
{% endif %}
様</p>
<!---- または ---->
<p>ようこそ {% if customer.name %}{{ customer.name }}{% else %}ゲスト{% endif %} 様</p>
判定文
判定文について補足です。
チートシート左カラムにあるリンク先で詳解されていますが、{% if %}、{% else %}、{% endif %}などはLiquidの構文です。
プログラミング言語に親しい方ならば説明は不要かと思われますが、全く知らないという方もいらっしゃると思うので、記述した構文がどう判定しているのかだけ説明しておきます。
<p>ようこそ
{% if customer.name %} <!-- もしcustomer.nameがあれば -->
{{ customer.name }} <!-- customer.nameを表示 -->
{% else %} <!-- そうでなければ -->
{{ 'ゲスト' }} <!-- 「ゲスト」を表示 -->
{% endif %} <!-- 判定終了 -->
様</p>
また、上記の記述と出力結果は同じですが、構文をhtmlタグで囲わず、変数に代入しておく書き方も存在します。
以下の記述では、ページのどこでも{{ user_name }}でユーザーの名前が出力できるようになります。
{% if customer.has_account %}
{% assign user_name = customer.name %}
{% else %}
{% assign user_name = 'ゲスト' %}
{% endif %}
<p>ようこそ {{ user_name }} 様</p>
最後に
ECサイトによっては、ユーザー名+ポイント表示などのカスタマイズを行うケースがあるかもしれませんが、記事執筆時点ではShopifyの標準機能としてポイント機能が備わっていないため、ポイント管理が行えるアプリを使用する事になると思われます。
その場合はアプリ側でユーザー名も表示してくれるはずなので、Liquidの構文を必ずしも覚える必要はないでしょう。
ですが、名前を表示したいだけなのに、真っ先にアプリを導入するのは、不要な機能が増えて管理が面倒になる場合もあります。
Shopifyが標準でできる事とアプリで補う必要がある事、両方を見極めて、より良いサイトに仕上げてください！