会員登録後に会員登録完了ページに遷移させたい(ただし、エラーがある場合は会員登録ページに戻したい)

日本語 ディスカッション 技術的なQ＆A
1

Debutテーマを利用して、現在会員登録ページを作成しています。

Debutでは会員登録した後デフォルトだとトップページに飛ばされますが(カートに商品がある場合はチェックアウトに飛ぶ)、そうではなくページ機能で作成した会員登録完了ページ(/pages/register_completed)にとばしたいと考えております。

そこで色々調べたところ、下のようなコードをtheme.liquidのタグの上に置いたら良いとか、

https://community.shopify.com/c/Shopify-Design/Redirect-after-customer-registration/td-p/293044/page/3

<!-- Handle registration redirect -->
<script>
  $(document).ready(function(){
    var $returnTo = $('<input type="hidden" name="return_to" value="/pages/register_completed" />');

    if ($('#create_customer').length > 0){ //if registration form
      $returnTo.insertBefore($('#create_customer input[type="submit"]')); // add return_to input
    } else if ($('#g-recaptcha').length){ //if captcha form
       $returnTo.insertBefore($('.shopify-challenge__container input[type="submit"]'));
    }
  });
</script>

https://heliumdev.com/blog/shopify-redirect-after-registration/

<script>
  (function() {
    var REDIRECT_PATH = '/pages/register_completed';

    var selector = '#create_customer, form[action$="/account"][method="post"]',
        $form = document.querySelectorAll(selector)[0];

    if ($form) {
      $redirect = document.createElement('input');
      $redirect.setAttribute('name', 'return_to');
      $redirect.setAttribute('type', 'hidden');
      $redirect.value = REDIRECT_PATH;
      $form.appendChild($redirect);
    }
  })();
</script>

の方法が見つかりましたが、これらの方法では、確かに会員登録完了ページにリダイレクトしてくれますが、エラーがある時(項目を未入力、一度会員登録したことあるメアドで登録)であっても会員登録完了ページに遷移してしまいます。

エラーがある時は、会員登録ページに戻され、会員登録が成功したときだけ会員登録完了ページに飛ばす良い方法はないでしょうか？

2

この共有されている方法は、Shopifyの会員登録の送信先の隠しパラメータ的なものを追加している方法で、会員登録エラー自体はShopifyそのものが行うので、テーマ側で処理分岐するのは難しいです。

（エラー時のreturn_urlのような隠しパラメータがあれば、それを設定すれば動作するかもですが、存在は把握していません）。

なので、少し挙動はいまいちになりますが、通常の遷移のままにしてエラーハンドリングはShopifyに任せて、通常の完了で遷移するページの先にJavaAScriptかヘッダなどでリダイレクトさせるのが良いかと思います。

3

会員登録完了の通常の遷移先はトップページですね

そのページで「会員登録完了してから遷移してきた」ことを検知して、JS script でリダイレクトさせたいんですが、

どうやって検知するかちょっとわからなくて、

やり方をご存知でしょうか？

4

なるほど、確かにGETパラメータで何も出ないので、難しいですね。

少し違うアプローチですが、以下の動画で、storefront APIを使って会員登録を自作する方法を説明しています。
https://www.youtube.com/watch?v=xgPrMP48W-M&list=PLkR3LRtxAZfod8TvcsKU7IEWeAO5fhcOe&index=3

これを応用して、会員登録のPOST先を自作のURLにして、内部でAPIで会員登録して、別の画面に返すのはいかがでしょうか？（少々大がかりですが）

5

横から失礼します。

的外れでしたら申し訳ありませんが拝見していて思いついたことがありますので以下記載したいと思います。無理やりな方法ではありますが。

■案1

  • 参考にされたサンプルコードでリダイレクト後の「会員登録完了ページ(/pages/register_completed)」に、{% unless customer %}で囲んだJSを記載し、そのJSでさらにTOPページにリダイレクトさせる

意図としましては以下のようになります。

  • 新規登録が正常に完了した場合はログイン状態になるので、{% unless customer %}で登録成功の可否を判別可能
  • 登録完了後にすべて「会員登録完了ページ」にリダイレクトさせ、「会員登録完了ページ」内で{% unless customer %}によって状態を判別
  • 登録完了していない場合には{% unless customer %}内のJSで「登録ページ」にリダイレクト

■案2

案1を考えた際に少し方向が違う別案を思いつきましたのでそちらも一応記載します。趣旨によっては以下も検討できるのではと思います。
ページのタイトルやURLの名称と矛盾する状態になる可能性はありますが、JSのリダイレクトを使うよりはシンプルかもしれません。

  • 「会員登録完了ページ」内の内容を{% if customer %}で分岐させ、「登録成功時」と「登録失敗時」の内容を出し分ける
  • 失敗時の方には失敗した旨や再登録を促す文言を記載し、「登録ページ」へのリンクを設置

以上ですが趣旨や状況を勘違いしていましたら申し訳ありません。

2 Likes
6

確かに、Liquid でログイン済みかどうかを判定するのはいいアイディアですね！

他にも customer_id とかいくつか判定方法ありますが、unless customer がシンプルで良さそうです。

7

ありがとうございます！案1でやりたかったことができました！

1 Like