FROM CACHE - jp_header

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

Kanakano
探検家
54 2 18

みなさんこんにちは。

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

こんなコードです。

<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>この御注文に関してのお問合せはこちらから</h2>',
`<div id="contact_form">
{% form 'contact' %}
<input type="hidden" name="contact[form_title]" value="ご注文明細からのお問合せ">
<input type="hidden" name="contact[order_id]" value="{{ order.name }}">
<input type="hidden" name="contact[email]" value="{{ email }}">
<div>
<textarea rows="3" name="contact[body]" style="border: 1px solid lightgray; width: 95%; padding: 8px;" placeholder="お問合せ内容" required="required"></textarea>
</div>
<div>
<button type="submit" class="btn btn--size-small">送信</button>
</div>
</div>
{% endform %}
`);
</script>

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

問い合わせ投稿後、

/?contact_posted=true

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

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

 

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

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

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

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

 

宜しくお願いします。

4件の返信4

_osamu_iwasaki_
Shopify Partner
185 47 193

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

Kanakano
探検家
54 2 18

ありがとうございます。

拝見しました。

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

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

Kanakano
探検家
54 2 18

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

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

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

Kanakano
探検家
54 2 18

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

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

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

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

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

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

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

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

 

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

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