【Shopify.dev和訳】Themes/Architecture/Templates/customers/login
この記事について
この記事は、Themes/Architecture/Templates/customers/loginの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
顧客/ログイン
customers/loginテンプレートは、顧客アカウントにログインするためのフォームをホストする顧客ログインページをレンダリングします。
ログインページへのリンク
ログインページにリンクするときは、ストアの顧客アカウント 設定と現在のログインステータスを考慮する必要があります。
たとえば、顧客アカウントが有効になっていない場合は、リンクを表示する必要はありません。顧客がすでにログインしている場合は、代わりにアカウントページにリンクできます。顧客アカウントが有効でオプションであり、顧客がログインしていない場合は、登録ページへのリンクを表示できます。
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="{{ routes.account_url }}">Account</a>
{% else %}
<a href="{{ routes.account_login_url }}">Login</a>
{% if shop.customer_accounts_optional %}
<span>or</span>
<a href="{{ routes.account_register_url }}">Create an account</a>
{% endif %}
{% endif %}
{% endif %}
顧客ログインフォーム
顧客ログインフォームは、Liquidフォームタグとそれに付随する'customer_login'パラメーターを使用して追加できます。フォームタグブロック内に、次の入力を含める必要があります。
| 入力 | タイプ | 名前 |
|---|---|---|
| E メール | email |
customer[email] |
| パスワード | password |
customer[password] |
例
{% form 'customer_login' %}
{{ form_errors | default_errors }}
<div class="email">
<label for="email">Email</label>
<input type="email" name="customer[email]">
</div>
<div class="password">
<label for="password">Password</label>
<input type="password" name="customer[password]">
</div>
<div class="submit">
<input type="submit" value="Sign in">
</div>
{% endform %}
「パスワードを忘れた」オプションを提供する
Liquid フォームタグとそれに付随する'recover_customer_password'パラメータを使用して、パスワード回復フォームを追加できます。フォームタグブロック内に、次の属性を持つ<input>を含める必要があります。
type="email"name="email"
例
{% form 'recover_customer_password' %} {{ form_errors | default_errors }}
<div class="email">
<label for="email">Email</label>
<input type="email" name="email" />
</div>
<div class="submit">
<input type="submit" value="Submit" />
</div>
{% endform %}
パスワード回復フォームが正常に送信されると、顧客はパスワードをリセットする方法の説明が記載された電子メールを受け取ります。
ゲストチェックアウトを提供する
顧客アカウントがオプションまたは必須の場合、顧客はチェックアウトの最初のステップで自分のアカウントにログインできます。
顧客アカウントがオプションの場合、顧客がアカウントにログインする代わりに、ゲストとしてチェックアウトできるようにすることができます。これは、Liquidフォームタグとそれに付随する'guest_login'パラメーターを使用して行うことができます。フォームタグブロック内に、submit入力を含める必要があります。さらに、チェックアウトから直接来たときにのみフォームが表示されるようにするには、shop オブジェクトのshop.checkout.guest_login属性を使用できます。
例
{% if shop.checkout.guest_login %}
{% form 'guest_login' %}
<div class="submit">
<input type="submit" value="Continue as guest">
</div>
{% endform %}
{% endif %}
ログイン時に顧客をリダイレクトする
デフォルトでは、顧客がログインすると、顧客アカウントページに移動します。これは、Liquidフォームタグのreturn_toパラメーターを使用して変更できます。
たとえば、次のようにすると、顧客はすべての製品のコレクションページに移動します。
{% form 'customer_login', return_to: routes.all_products_collection_url %}
<!-- form content -->
{% endform %}
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion