【Shopify】ログイン/ログアウト/新規会員登録/マイページのボタン設置なんかもう悩まない！

ECサイトでよく見かける、ドロワーメニューの横または中に必ずといっていいほど存在する、アカウント操作系のボタン。

なぜかShopifyのテーマによっては、ログインできてもログアウトする導線がなかったり、新規会員登録するボタンがなく、ログインの画面に入って、ID/PASS入力フォームの下にようやく小さく”アカウントを作成する”のテキストリンク、、など、なんとも片手落ちな残念仕様のものがある。

このコード使い回しで完了！

以下のコードを雛形にすればどんなテーマでも使用できますので、備忘録として。

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

ここで、ログイン状態うんぬんの判定は終了し、続いてログイン中でもゲスト状態でも表示が必要な”カート”のボタンを。

以上です！はい！また作業がショートカットできました！