通常のプランでチェックアウト前にログイン画面を表示させる方法

カートページでチェックアウトボタンをクリックすると、ログイン画面へ飛びチェックアウト画面の前にログインもしくはゲスト購入させるための覚書です。

コードだけ知りたいかたはこちら

下記コードをカートの送信ボタンがあるページに貼り付けます。

{%- unless customer -%}
  $('[name="checkout"]').on('click',function(e){
    e.preventDefault();
    window.location.href = "{{ routes.account_login_url }}?checkout_url=%2Fcheckouts";
  });
{%- endunless -%}

強制的にログインさせるには？

Shopifyの設定画面でログイン画面を表示させるには、購入にアカウント登録、ログインが必須をONにすればチェックアウト画面の前にログイン画面を表示することはできます。

しかし、その場合アカウント作成が必須、となるのでゲスト購入はできません。

そこで、ログインページに ?checkout_url=%2Fcheckouts をつけることで、ゲスト購入のボタンを表示させることができます。

コードでやっていること

{%- unless customer -%}
	// ログイン状態かどうか
{%- endunless -%}

上記で、ログイン状態かどうかを確認しています。

{%- unless customer -%}
  $('[name="checkout"]').on('click',function(e){
    e.preventDefault(); // 送信キャンセル
    window.location.href = "{{ routes.account_login_url }}?checkout_url=%2Fcheckouts"; // ログイン画面へリダイレクト
  });
{%- endunless -%}

window.location.href でログイン画面へリダイレクトさせています。

フォームの送信ボタンをクリックするとフォームが送信されてしまうので、e.preventDefault() でキャンセルさせています。

まとめ

Shopify plusのストアでなくても、こちらのコードは有効です。
ぜひお試してください！