grandstream blog

【Shopify】新規登録画面から購入画面へリダイレクトする方法!【コピペ】

こんにちは、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”>

これで、送信ボタンを押せば、決済画面にダイレクトに飛ぶはず…です。

まとめ

なお本記事はこちらのページを参考にさせていただきました。

環境によってはうまく行かないことがあるかもしれませんが、ご参考程度でよろしくおねがいします!

ではまた!

grandstreamに支援を送る

コメントはお気軽にどうぞ