ShopifyのデフォルトテーマであるDawnでは、デフォルトの挙動として会員登録に成功した場合のリダイレクト先がTOPページに指定されています。
これでは、お客様は会員登録に成功したのか分からず、好ましい挙動ではありません。
目次:
フォームタグやJavaScriptを利用したリダイレクトは不安が残る
最も理想的なのはサンクスページにリダイレクトさせること。しかし、テーマ側で用意されていない任意ページへのリダイレクトではエラーを拾えない可能性があるとのこと。
JavaScriptによる制御では、エラーに対する配慮が別途必要になりそうでした。
フォームタグを利用する方法もあるようなのですが、Shopify Docsに明示されている方法ではないように思います。
return_toプロパティとroutesオブジェクトを利用して会員登録後にマイページへリダイレクトさせる
そこで、Shopify公式が提供しているreturn_toプロパティとroutesオブジェクトを利用して、会員登録が成功した場合にはマイページへ自動的にリダイレクトさせるように設定を変更します。
DawnThemeにおける会員登録ページは、templates/customers/register.liquidになります。
会員登録フォームタグにreturn_toプロパティを追加
register.liquidで会員登録フォームを出力しているのは下記のタグ。
{%- form 'create_customer', novalidate: 'novalidate' -%}
このタグに関して、公式Shopify Docs: customers/register (Redirect customers on account creation) のページには下記のように記述があります。
By default, when a customer creates an account, they're directed to the home page. However, you can specify a page to direct customers to using the return_to parameter of the Liquid form tag.
(著者意訳)お客様のアカウントが作成された際、デフォルトの挙動ではホームページへリダイレクトされます。他のページへリダイレクトさせたい場合、Liquidフォームタグのreturn_toパラメータを利用して、他の特定のページへリダイレクトさせることが可能です。
たとえば、商品一覧ページへとリダイレクトさせたい場合には、下記のようにreturn_toパラメータを追加するとよいとのこと。
{% form 'create_customer', return_to: routes.all_products_collection_url %}
<!-- form content -->
{% endform %}
ここで使われているroutesオブジェクトを利用することで、リダイレクト先を指定可能です。
routesオブジェクトでマイページへのURLを生成・設定
routes objectAllows you to generate standard URLs for the storefront. Using the routes object instead of hardcoding URLs helps ensure that your theme supports multiple languages, as well as any possible changes in URL format.
(訳)routesオブジェクトはストアフロントのための標準的なURLを生成します。URLをハードコーディングせずにroutesオブジェクトを利用することで、多言語によるページ遷移先の変更や、他の可能性でのURLフォーマット変更にも対応させることができます。
routesオブジェクトのうち、マイページへのURLを生成するのは account_url というプロパティ。Dawnテーマで次のように実装することで、会員登録後の自動リダイレクト先をマイページへと設定することができました。
{%- form 'create_customer', novalidate: 'novalidate', return_to: routes.account_url -%}
ほか参考: Re-direct after account creation DAWN - Shopify Community