こんにちは。たかとです。
先日案件の中で、会員の中でも特定のタグを持ったユーザーのみアクセスできるページを作成したので、その実装方法について解説していきます！
アプリは使わずにShopifyの独自言語であるLiquidのみで実装します。
やりたいこと
特定のタグを持ったユーザーがアクセスした場合は通常通り表示して、そうでない場合は違うページにリダイレクトさせます。
今回の場合、「VIP」というタグを持ったユーザーが「VIP専用商品」にアクセスした場合は表示、それ以外の場合はトップページに飛ばすようにします！
Shopifyで特定会員のみアクセスできる限定ページを作成する方法
大枠の流れとしては、下記になります。
していない場合はログインページに飛ばす
特定会員のみアクセスさせるためのコード
{% comment %}
--------------------------------------------
15%対象ユーザーはリダイレクト
--------------------------------------------
{% endcomment %}
{% if template == "product" %}
{% if product.title == 'VIP限定商品' %}
{% if customer %}
{% for tag in customer.tags %}
{% if tag == 'VIP' %}
{% assign vip = true %}
{% endif %}
{% endfor %}
{% else %}
<meta content="0; url="ログインページのURL" http-equiv="refresh" />
{% endif %}
{% endif %}
{% endif %}
{% unless vip %}
<meta content="0; url="トップページのURL" http-equiv="refresh" />
{% endunless %}
ユーザーがVIPタグをもった会員の場合、「vip = true」と定義し、vip = trueでない場合にトップページにリダイレクトさせています。VIP限定商品にアクセスしているのにログインしていない場合は、ログイン画面にリダイレクトするようにしてます！
コードは<head></head>内に書くので、使用しているテーマにもよりますが、殆どの場合は「theme.liquid」に記述すると思います！
特定会員のみアクセスさせるためのコード解説
①現在のページが制限をかけたい商品ページかどうか判定
現在のページが何なのか取得してif文で条件分岐します。
{% if template == "product" %}
{% if product.title == 'VIP限定商品' %}
{% endif %}
{% endif %}
この文では、
①商品ページであるかどうか
②商品のタイトルがVIP限定商品であるかどうか
の2つで条件分岐しており、どちらにも当てはまるもののみを出力するようにしています。
今回は、「VIP限定商品」という商品のみに対して制限をかけるのでこの記述になりますが、もし特定のコレクションにかけたい場合は、下記のようにforで全部出力した上で、if文にかけることで対応できます！（試してはないので動かなかったらごめんなさい笑）
{% if template == "product" %}
{% for c in product.collections %}
{% if c.title == 'VIP限定コレクション' %}
{% endif %}
{% endfor %}
{% endif %}②ストアのにログインしているか判定
{% if customer %}
{% else %}
<meta content="0; url="ログインページのURL" http-equiv="refresh" />
{% endif %}ログインしているかどうかは、{% if customer %}で確認できます！
この後に会員情報を使った条件分岐をしますが、会員情報の取得はユーザーがログインしていないとできないので、必ず{% if customer %}で先に条件分岐します！
また、ログインしていない人はVIP会員であっても判定できないので、その場合は{% else %}以下の文章にて、ログイン画面にリダイレクトするようにしています！「ログインページのURL」のところを自由に書き換えることで、リダイレクト先も変えられます！
③VIPのタグを持っているか判定
{% for tag in customer.tags %}
{% if tag == 'VIP' %}
{% assign vip = true %}
{% endif %}
{% endfor %}会員がVIPタグを持っているかどうかを判定します。
customer.tagsは複数のタグの配列なので、これをforで一個ずつ回していき、VIPタグが出てきたら、{% assign vip = true %}によって、「vip」変数をtrueにします。
assignはLiquid上での変数宣言で、JavaScriptのconst、let、var に当たります！
④VIPタグを持っていない場合、トップページにリダイレクト
最後に条件に当てはまるユーザー以外をトップページに飛ばすプログラムを書きます。
{% unless vip %}
<meta content="0; url="トップページのURL" http-equiv="refresh" />
{% endunless %}もし、vipがtrueではない時、トップページに飛ばします。こちらも先程と同様に、「トップページのURL」のところを変えることで好きなページにリダイレクト可能です！
unlessはifの反対の意味で、当てはまる時は出力しないというツンデレみたいなやつです。
まとめ：Shopifyで特定会員のみアクセスできる限定ページを作成する方法
いかがだったでしょうか？今回はアプリを使わずにShopifyで特定会員のみアクセスできる限定ページを作成する方法を解説しました。僕自身、まだまだ学習途中なこともあり、コードが汚かったり、もっとこうしたほうがいいなどありましたらすみません。
Shopifyの良さはアプリで機能の拡張ができる点ですが、コードを使うことで機能拡張できる良さもあります！アプリによっては月額がかかるものもあるので、開発料金をもらってアプリを使わずに実装できるとクライアントにも喜ばれるかもしれません！
また、今回の技術を応用すれば、同じ商品を会員のランクによって割引したいという場合でも、価格を変えた商品を3つ作った上で、ランクが上のユーザーがランクが下のユーザー用の商品ページにアクセスしてしまった場合、強制的に上のランクのユーザー用の商品ページにリダイレクトするなどの処理も可能です！
カスタマイズ性は無限だと思うので、ぜひお試しください！
Shopifyのテーマ開発を学ぶ
今回はShopifyのLiquidを使った開発でしたが、よりShopifyについて深く知りたいという場合はテーマの開発を経験してみるのもいいかと思います。一度0から作り上げることでより理解が深まると思います。
おすすめはこちらです。
コメント