📁

【Shopify.dev和訳】Themes/Architecture/Templates/password

2021/09/18に公開

Shopify

themes

tech

この記事について

この記事は、Themes/Architecture/Templates/passwordの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

password

password テンプレートは、オンラインストアにパスワード保護機能を追加した際に表示されるランディングページである、パスワードページをレンダリングします。このページには、マーチャントが編集可能なメッセージと、お客様がショップにアクセスするためのパスワードフォームが含まれています。

パスワードメッセージ

ストアでパスワード保護が有効になっている場合、メッセージを含めるオプションもあります。このメッセージは、Liquid shop オブジェクトの password_message 属性を使用して表示できます。

Example

{% unless shop.password_message == blank %}
  {{ shop.password_message }}
{% endunless %}

パスワードフォーム

パスワードフォームは、Liquid form タグとそれに付随する'storefront_password'パラメータで追加できます。フォームタグのブロック内には、以下の属性を持つ<input>を入れる必要があります。

type="password"
name="password"

例えば、以下のようになります。

{% form 'storefront_password' %}
  {{ form_errors | default_errors }}

  <div class="password">
    <label for="password">Password</label>
    <input type="password" name="password">
  </div>

  <div class="submit">
    <input type="submit" value="Sign in">
  </div>
{% endform %}

メールサインアップフォーム

Liquid 'form タグ'とそれに付随する'customer'パラメータを使用して、顧客の電子メールをキャプチャするための電子メールサインアップフォームを含めることができます。フォームタグブロック内に、次の入力を含める必要があります。

Input	type	type	value
Tags	`hidden`	`contact[tags]`	`prospect, password page`
Email	`email`	`contact[email]`	-

例：

{% form 'customer' %}
  {{ form_errors | default_errors }}

  <div class="tags">
    <input type="hidden" name="contact[tags]">
  </div>

  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="contact[email]">
  </div>

  <div class="submit">
    <input type="submit" value="Sign in">
  </div>
{% endform %}

Shopify アプリのご紹介

Discussion

ログインするとコメントできます