ECサイトでよく見かける、ドロワーメニューの横または中に必ずといっていいほど存在する、アカウント操作系のボタン。
なぜかShopifyのテーマによっては、ログインできてもログアウトする導線がなかったり、新規会員登録するボタンがなく、ログインの画面に入って、ID/PASS入力フォームの下にようやく小さく”アカウントを作成する”のテキストリンク、、など、なんとも片手落ちな残念仕様のものがある。
INDEX
このコード使い回しで完了！
以下のコードを雛形にすればどんなテーマでも使用できますので、備忘録として。
<div>
<div>
{% if shop.customer_accounts_enabled %}
{% if customer %}
<!--ログアウト-->
<a href="/account">
マイページ
</a>
<a href="/account/logout">
ログアウト
</a>
{% else %}
<!--新規会員登録-->
<a href="{{ routes.account_register_url }}">
新規会員登録
</a>
<!--ログイン-->
<a href="{{ routes.account_login_url }}">
ログイン
</a>
{% endif %}<!-- endif customer -->
{% endif %}<!-- endif shop.customer_accounts_enabled -->
<p>
<a href="{{ routes.cart_url }}">
カート
</a>
</p>
</div>
</div>解説
{% if customer %}この条件文で、ページに訪れているユーザがログイン状態かどうかを判別しています。
ログインしている=会員登録済みなので、表示するボタンは”マイページ”と”ログアウト”のみでよいはずです。
次に、
{% else %}ここで、ログインしていない=会員登録していないかもしれない条件になるので、表示するボタンは”新規会員登録”と”ログイン”のみでよいはずです。
最後に、
{% endif %}<!-- endif customer -->ここで、ログイン状態うんぬんの判定は終了し、続いてログイン中でもゲスト状態でも表示が必要な”カート”のボタンを。
以上です！はい！また作業がショートカットできました！