こんにちは、grandstreamです。
先日Shopifyの開発を行う中で、以下のような問題が生じました。
（※なお、Shopify buybutton.jsで、外部サイトと連携して開発しています。）
カートに商品を追加
↓
購入ボタンを押す
↓
アカウント新規登録画面（/account/register）
↓
reCAPTCHA認証（/challenge）
↓
トップページ（ホントはチェックアウトページにダイレクトで飛ばしたい）
せっかく購入手続きを進めようとしても、一旦トップページに返されてしまっては、ちょっと利便性に欠けますね。
reCAPTCHA認証が終わったら、ダイレクトに購入画面につなげたいところ。
そこで今回は、reCAPTCHA認証画面から、チェックアウトページにダイレクトで飛ばす方法を説明します！
新規登録画面から購入画面へリダイレクトする方法
と言っても、基本コピペでいけます。
まず、Shopify管理画面のテーマより、Layout内にある「theme.liquid」を開きます。
そして</body>の直前に以下のコードをコピペします。
あとは、4行目（ハイライト部分）の「REDIRECT_PATH」に、遷移させたいページのURL（ドメイン以下のパス）を入れればOK。
チェックアウトページだと、上のコードのような文字列だと思います。（たぶん…。）
ここはご自分の環境に合わせて調整してみてください。
補足
カートに何も商品を追加していない状態で、アカウント新規登録をした場合は、Shopifyのカートページに飛ばされます。
僕の場合は、Shopifyのカートページは使用しなかったので、任意のページにリダイレクトするよう設定しました。
コードのざっくり解説
上述のコードが何をやっているかざっくり説明します。
[action$=”/account”][method=”post”]属性を持つform要素を取得
まず、ページが読み込まれたら、formタグで[action$=”/account”][method=”post”]を持っている要素を取得し、変数$formに代入します。
このformタグにこの属性があるということは、アカウント新規登録ページ（/account/register）やreCAPTCHA認証（/challege）ページだということですね。
なければ$formには何も値は入りません。
アカウント新規登録ページであれば、inputタグを挿入
で、もしこの$formに値が入っていれば（アカウント新規登録ページなら）、下記のinputタグを挿入するというわけです。
<input name=”return_to” type=”hidden” value=”/xxxxxxxxx/checkouts/yyyyyyyyyyyyyyyyyyyyy”>
これで、送信ボタンを押せば、決済画面にダイレクトに飛ぶはず…です。
まとめ
なお本記事はこちらのページを参考にさせていただきました。
環境によってはうまく行かないことがあるかもしれませんが、ご参考程度でよろしくおねがいします！
ではまた！
コメント