Shopifyでログイン後に任意のURLにリダイレクトさせる

窓辺

以前はJSでcookieなどを使って実行していた機能を、基本的な動作に関してはliquidだけで対応できるようになりました。

実現したいこと

Shopifyでログインした後に以下のような動作を実行します。

  • 任意のページに移動させる
  • ログイン前のページに移動させる

ログイン後に会員用のセールス情報ページを見せたり、ログインリンクをクリックしたページに戻るなどの動作を想定をしています。

サンプル

任意のページに移動させる


<a href="/customer_authentication/login?return_to={{ "/pages/contact" | url_encode }}">Contact</a>

上記のようにログイン用URLにパラメータreturn_toを追加し、キーにリダイレクト先を設定することで、ログイン後に指定したURLにリダイレクトされます。
以下のようにリダイレクト先のURLは相対パスを用いる必要があり注意が必要です。

The return_to parameter will only work with relative URLs.

ログイン前のページに移動させる


<a href="/customer_authentication/login?return_to={{ request.path | url_encode }}">ログイン</a>

上記のようにrequest.pathを使えば、基本的には元のページに戻ることが可能です。
ただしパラメータなしのURLが設定されるため、商品ページでバリエーションを選んだ状態のURLの場合は、バリエーションを選んでいない状態の商品ページにリダイレクトされます。

バリエーション用パラメータ対応


<script>
document.addEventListener('DOMContentLoaded',()=>{
  const t = document.querySelector(".my_login_link");
  t.addEventListener("click", (e) => {
    e.preventDefault();
    let href = e.target.href;
    const queryString = window.location.search;
    const params = new URLSearchParams(queryString);
    const paramValue = params.get('variant');
    if (paramValue) {
      const newParams = {
        variant: paramValue
      };
      const newParamStrings = new URLSearchParams(newParams).toString();
      href = `${href}?${newParamStrings}`;
    }
    window.location.href = href;
  });
});
</script>
<a href="/customer_authentication/login?return_to={{ request.path | url_encode }}" class="my_login_link">ログイン</a>

ログイン用リンククリック時に現在のURLのパラメータを取得し追加しているだけですが、概ね動くかなと思います。
ただしバリエーションのパラメータのみを対象としているため他のパラメータは引き継がれません。

バリエーション用パラメータ+hash対応

ページ内リンク用の#(hash)をつけたURLでも動作を確認しています。


<script>
document.addEventListener('DOMContentLoaded',()=>{
  const t = document.querySelector(".my_login_link");
  t.addEventListener("click", (e) => {
    e.preventDefault();
    let href = e.target.href;
    const queryString = window.location.search;
    const params = new URLSearchParams(queryString);
    const paramValue = params.get('variant');
    if (paramValue) {
      const newParams = {
        variant: paramValue
      };
      const newParamStrings = new URLSearchParams(newParams).toString();
      href = `${href}?${newParamStrings}`;
    }
    const hash = encodeURIComponent("#anchor"); // hashを設定
    href = `${href}${hash}`;
    window.location.href = href;
  });
});
</script>
<a href="/customer_authentication/login?return_to={{ request.path | url_encode }}" class="my_login_link">ログイン</a>

注意点としては#をエンコードする必要がある点です。
最終的にはliquidのurl_encodeフィルター動作後と同じ状態を作る必要があります。

補足:コレクションページ

同様の方法でコレクションのURLへの対応も考えてはいましたが、アプリの影響次第では汎用的な仕組みが成り立たない可能性が高く、今回の検討対象から外しました。
コレクションページでは絞り込みやページング時にパラメータ付きURLになりますが、このパラメータが一定ではない可能性があるためです。
ストア毎の状態に応じてコードを変更すること自体は可能です。

注意点

今回はhrefに/customer_authentication/loginを設定していますが、現時点ではこのURLを使うとテーマエディタでは機能せず404ページが表示されてしまいます。

そのため開発テーマで実装テストを行う場合、動作確認を行うためにはプレビューで確認する必要があります。

なお、テーマでログイン用に使用されているのは{{ routes.account_login_url }}だと思いますが、こちらはテーマエディタでも動作します。

参考

実装時期

December 19, 2024
Direct customers back to the online store after login

今回の機能は2024.12.19に実装されたとのことです。

結び

パラメータを無視すればliquidだけで簡易に対応できるため便利です。
Shopify内部でのリダイレクトのため、独自実装のリダイレクトよりも安全性は高いとも思われます。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄