「注文状況ページ」にコンタクトフォームを足した場合、投稿完了するとトップページに移動してしまう

AI-generated summary

注文状況ページに追加した問い合わせフォームが、送信後に「/?contact_posted=true」へ遷移し、元の注文状況ページへ戻らない問題が相談された。商品ページや通常の /page/… では元ページに戻るため、注文状況ページ特有の挙動が論点だった。

途中では外部記事の紹介があったが、これは「送信後に元のフォームへ戻る」前提の対処法で、今回の症状には直接使えないと判断された。送信後URLに注文ページ情報が含まれればリダイレクト可能では、という補足も出ている。

最終的には解決済み。送信ボタン押下時に JavaScript で新しいタブ/ウィンドウを開き、form の target をそこに設定して submit する方式を採用した。これにより元の注文状況ページは開いたまま維持され、別ウィンドウ側で送信完了後にトップページへ戻った時点で完了ダイアログを表示し、そのウィンドウを閉じる運用で目的の動作を実現した。

みなさんこんにちは。

「注文状況ページ」でそのご注文に関してすぐにお問合せ頂けるシンプルな問い合わせ欄を作りました。

こんなコードです。


問い合わせフォームは現れて、問い合わせを送り、メールとして届くのですが、

問い合わせ投稿後、

/?contact_posted=true

こういうURLに移動してしまい、

「注文状況ページ」に戻りません。

商品や、/page/…の各ページにも問い合わせ欄を作りましたが、

そちらは投稿後それぞれのページに戻ります。

「注文状況ページ」に戻るようにする方法はありませんでしょうか?

(戻ってきたら、form.posted_successfully?で投稿ありがとうのメッセージを表示したい)

宜しくお願いします。

WEBUTUBUTUさんのカスタム記事を参考にしてみてはどうでしょうか。https://webutubutu.com/webdesign/8726

ありがとうございます。

拝見しました。

この記事に書かれているのは、投稿フォームに戻ってくるのが前提で、戻ってきたときの処理方法について書かれているので、そのフォームに戻ってこなければこの記事に書かれた方法は使えなさそうです。

2番目で紹介されている方法で、contact_posted=true だけでなくて、注文ページのURLまで含まれていればトップページからリダイレクトできるのですが…

英語コミュニティにも投げてみました。

言語違うから、いいですよね?(内容はほぼ同じ)

Adding CONTACT FORM SECTION to ORDER STATUS PAGE, but its not working properly. - Shopify Community

みなさん、おせわになっております。

この件、解決できました。

送信ボタンを押した際に、

javascriptで新しいウィンドウ(タブ)を作り、

のターゲットをそのウィンドウに設定してからsubmit()することで、

注文状況ページは開いたままで、別のウィンドウでコンタクトフォームの送信を進め、

送信完了時にトップページに戻ってきたところで、送信完了ダイアログを表示し、作ったウィンドウを閉じるようにしました。

閉じたときに、大概は元の注文状況ページを表示しているウィンドウに戻るので、思ったような動作になりました。

ありがとうございました。

これからもよろしくお願いします。