見出し画像

[Shopify]ログイン後に直前に見ていたページに遷移させる(既存ファイルカスタマイズ) #128

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

デフォルト機能だと、ログイン直後にTOPに戻ってしまうので、直後に見ていたページに遷移させたいと思います。

テーマ:全て
*下記のフルバージョンコードはDawnベースです

✔️今回のゴール

シンプルに下記の動作にしたい。

❶ログインページでログインする
❷直後に見ていたページへ遷移

例えば、カートでゲスト注文できない場合に、カート上でログイン画面へ促されてログインした後にカート画面に戻ってくる!というような感じの動きになります。

✔️設定手順

Step1 既存のmain-loginファイルを開く

管理画面>テーマ>コード編集>main-loginリキッドを開く

Step2  コード挿入

❶ログインフォームに下記を挿入し、

<input type="hidden" name="return_to" id="return_to" value="{{ request.referer }}">

❷下記のJSを追加するだけ。

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const returnToField = document.getElementById('return_to');
    if (returnToField) {
      returnToField.value = document.referrer;
    }
  });
</script>


以上で完了です!


✔️フルバージョンのコード

下記にフルバージョンのコード載せておきます。

該当箇所確認して挿入してみてください。

Dawn11.0.0で作ってるので同一バージョンならそのままコピペで使えるかも。(念の為バックアップ取っておくことをお勧めします)

【ご購入時のご注意】
※返金&サポート&コメント返信はしておりません。
※現時点の最新のDawnテーマをベースに作成してます。
※コードのみのご紹介で解説などはしておりません。
※2024.6時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。(メンバーシップでコメント頂いた場合は修正します)

ここから先は

7,601字
この記事のみ ¥ 1,000

この記事が気に入ったらサポートをしてみませんか?