非常に伝わりにくいタイトルだと思いますが、この記事にたどり着いた方は、かなり検索を頑張ったのではないかと想像しています。

なので、更なる検索につなげるためにも、簡単ですが今回の問題を一旦整理することから始めてみます。

現象

Shopifyテーマのニュースレター(メルマガ)申し込みフォームは、大抵フッターに設置しているかと思います。そこで…

①フッターにあるフォームにメールアドレスを入力する。
②エンターもしくは登録ボタンを押す。
③reCAPTCHAが設置されているページに遷移する。
④遷移後も画面位置がフッターのまま。URLを見ると設定した覚えのないアンカーが追加されている
⑤アンカーを削除したいとテーマ内を検索しても編集できそうな箇所がない

④の部分で、おそらく
○○.com/challenge#ContactFooter とか
○○.com/challenge#contact_form なんかになっていると思いますがいかがでしょうか。

challengeページとは?

Shopify管理画面の [オンラインストア > 各種設定 > スパム保護 ] にチェックが入っていると、このページが表示されますが、このページのliquidは用意されて無いため直接編集できないようです。

デベロッパーツールでソースを確認してみる

フォームのあるページでデベロッパーツールを見てみると、しっかりアンカーが生成されています。
さらに、/challenge#ContactFooter ではなく /contact#ContactFooter になっています。

おそらく、管理画面での スパム保護 にチェックが入っていると遷移時にパスが書き換えられると予想。なので、編集する際は contact のままで良いかと。

<!-- 大抵は #ContactFooter だと思いますが -->
<form method="post" action="/contact#ContactFooter" id="ContactFooter" accept-charset="UTF-8" class="contact-form" novalidate="novalidate">

<!-- 設置方法によっては #contact_form になってることもあるかもしれません -->
<form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form" novalidate="novalidate">

解決案

要は遷移先のURL ○○.com/challenge#△△△△○○.com/challenge になれば良いわけで、そうすると話は早いです。JavaScriptでアンカーを削除してみます。

テーマの構造にもよるので、内容は適宜修正して下さい。

//例①
function myFunction() {
  //IDが用意されていたら、ID内部のHTMLを取得する
  var str = document.getElementById("footer_signup").innerHTML; 
  //取得したHTML内の要素を書き換える
  var res = str.replace("contact#ContactFooter", "contact");
  //置き換える
  document.getElementById("footer_signup").innerHTML = res;
};
myFunction();
//例②
function myFunction() {
  //IDがなければ付近のユニークなセレクタを指定する
  var str = document.querySelector(".newsletter-footer").innerHTML; 
  //取得したセレクタ内の要素を書き換える
  var res = str.replace("contact#contact_form", "contact");
  //置き換える
  document.querySelector(".newsletter-footer").innerHTML = res;
};
myFunction(

【参考】
Shopify Newsletter signup form redirect ANCHOR is WRONG.
https://community.shopify.com/c/Technical-Q-A/Shopify-Newsletter-signup-form-redirect-ANCHOR-is-WRONG/td-p/828556
【Shopify】challenge(ロボット)ページを編集したい
https://ikdlog.com/challenge/

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です