Liquid、JavaScriptなどに関する質問
お世話になります。
【前提】
・テンプレート「Debut」を使用。
・オンラインストアは会員限定としています。
(Shopifyブログの手順で設定 https://www.shopify.com/jp/blog/shopify-members-only-store)
・他、アプリで「EasyLockdown Access Management」を使用し、特定商品を特定ユーザーにしか表示しないように設定中です。
【問題】
・ログイン画面にて、「パスワードをお忘れですか?」をクリックしても、パスワード発行ページが表示されない。
【ご相談】
パスワード画面を表示するための方法、また確認すべき点はございますでしょうか。
metaタグで「ログインしていなければなければ、ログインページ(account/login?checkout_url=/)を表示する」としている箇所を何らか変更で解決できるでしょうか。
ご助言いただけますと、大変助かります。
なお、「EasyLockdown」アプリで、ログインしていないユーザに対してパスワード変更のURLを許可しようとしましたが、効果はありませんでした。
よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
私が確認した限りでの回答になりますので、誤りがあった場合はご容赦ください。
Debutのバージョンにもよりますが、
私が確認したDebut 17.13.0では、
「パスワード発行ページ」は、
ログインページと同一のページです。
ログインページの中に、
パスワード発行用のフォームが埋まっており、
「パスワードをお忘れですか?」をクリックすると、
JavaScriptがDOM(HTML)を書き換え、
ログインフォームを隠して、
パスワード発行フォームを表示します。
パスワード発行フォームのDOM(HTML)は下記のようでした。
「パスワードをお忘れですか?」をクリックすることで、id=RecoverPasswordFormのdivのclassからhideが削除され、パスワード発行フォームが表示される、
という仕掛けです。
<div id="RecoverPasswordForm" class="hide">
<div class="text-center">
<h2 id="RecoverHeading">パスワードをリセットする</h2>
<p>パスワードをリセットするためのメールを送ります。</p>
</div>
<div class="form-vertical">
<form method="post" action="/account/recover" accept-charset="UTF-8" onsubmit="window.Shopify.recaptchaV3.addToken(this, "recover_customer_password"); return false;"><input type="hidden" name="form_type" value="recover_customer_password"><input type="hidden" name="utf8" value="✓">
<label for="RecoverEmail">メールアドレス</label>
<input type="email" value="" name="email" id="RecoverEmail" class="input-full" autocorrect="off" autocapitalize="off"><div class="text-center">
<p>
<input type="submit" class="btn" value="送信する">
</p>
<a href="#LoginHeading" id="HideRecoverPasswordLink">キャンセル</a>
</div>
</form>
</div>
などを確認されると良いかと思います。
あくまで、参考まで。
(キュー田辺)
成功
私が確認した限りでの回答になりますので、誤りがあった場合はご容赦ください。
Debutのバージョンにもよりますが、
私が確認したDebut 17.13.0では、
「パスワード発行ページ」は、
ログインページと同一のページです。
ログインページの中に、
パスワード発行用のフォームが埋まっており、
「パスワードをお忘れですか?」をクリックすると、
JavaScriptがDOM(HTML)を書き換え、
ログインフォームを隠して、
パスワード発行フォームを表示します。
パスワード発行フォームのDOM(HTML)は下記のようでした。
「パスワードをお忘れですか?」をクリックすることで、id=RecoverPasswordFormのdivのclassからhideが削除され、パスワード発行フォームが表示される、
という仕掛けです。
<div id="RecoverPasswordForm" class="hide">
<div class="text-center">
<h2 id="RecoverHeading">パスワードをリセットする</h2>
<p>パスワードをリセットするためのメールを送ります。</p>
</div>
<div class="form-vertical">
<form method="post" action="/account/recover" accept-charset="UTF-8" onsubmit="window.Shopify.recaptchaV3.addToken(this, "recover_customer_password"); return false;"><input type="hidden" name="form_type" value="recover_customer_password"><input type="hidden" name="utf8" value="✓">
<label for="RecoverEmail">メールアドレス</label>
<input type="email" value="" name="email" id="RecoverEmail" class="input-full" autocorrect="off" autocapitalize="off"><div class="text-center">
<p>
<input type="submit" class="btn" value="送信する">
</p>
<a href="#LoginHeading" id="HideRecoverPasswordLink">キャンセル</a>
</div>
</form>
</div>
などを確認されると良いかと思います。
あくまで、参考まで。
(キュー田辺)
Qcoltd様
ご回答いただきありがとうございます。
ご回答いただいた内容をもとに、改めて見直しを行いました。
最終的にですが、「'theme.js」を修正することで、問題を解決しました。
今回この問題を解決するにあたり、インストールをしているアプリの制作者様にも問い合わせをしたところ、問題箇所の指摘をしていただきました。
(ご回答をいただいたアプリ側からは、「アプリ自体の問題ではない」ともご連絡いただいております)
アプリをインストールしていない状態のDebutでは問題なくパスワード設定画面が表示されるため、
複数アプリの設定を重ねたことで、なんらか競合による問題が発生したと考えております。
この辺りについては、今後再発がないよう検証をしたいと思います。
この度はご回答いただきまして、ありがとうございます。
JavaScript自体には編集をしていなかったたので、ご指摘いただいたことで改めて確認をすることができました。
とても助かりました!
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024