📁

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

2021/09/18に公開

Shopify

themes

tech

この記事について

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

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

Shopify アプリのご紹介

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

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

製品

productテンプレートは、商品のメディアとコンテンツ、および顧客がバリエーションを選択してカートに追加するためのフォームを含む商品ページをレンダリングします。
altテキスト

製品オブジェクト

Liquid製品オブジェクトにアクセスして、製品の詳細を表示できます。

製品フォーム

製品フォームは、顧客がカートに製品バリアントを追加するための主な方法です。 Liquidform タグとそれに付随する productパラメーターを使用して製品フォームを含めることができます。

Example

{% form 'product' %}
  <!-- form content -->

  <input type="submit" value="Add to cart">
{% endform %}

フォーム内には、次のものが必要です。

バリアントセレクター

バリアントセレクターは、name = "id"の属性を持つ入力要素です。その値は、カートに追加されるバリアントのバリアント IDを反映しています。

通常、バリアントセレクターは<select>要素であり、その<option>には、製品のすべてのバリアントを介したループが入力されます。製品オブジェクトのselected_or_first_available_variant属性を使用して、バリアントリンクまたは可用性に基づいて、デフォルトでバリアントを選択することもできます。

Example

<select name="id">
  {% for variant in product.variants %}
    <option value="{{ variant.id }}"
      {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
    >
      {{ variant.title }} - {{ variant.price | money }}
    </option>
  {% endfor %}
</select>

入力された数量

顧客がカートに追加するバリアントの数量を選択できるように、数量入力を含める必要があります。この入力にはname = "quantity"の属性が必要であり、値は 1 より大きい整数である必要があります。

Example

<input type="text" name="quantity" min="1" value="1">

動的チェックアウトボタン

顧客が表示している商品をすばやく購入できるように、動的なチェックアウトボタンを含める必要があります。これらは、payment_button LiquidHTML フィルターを使用して追加できます。

Example

{% form 'product' %}
  <!-- form content -->

  <input type="submit" value="Add to cart">
  {{ form | payment_button }}
{% endform %}

広告申込情報のプロパティ

広告申込情報のプロパティを使用してカートに追加されたバリアントの追加情報を含めるオプションを顧客に提供できます。これは、モノグラムの収集やテキストの彫刻、ファイルのアップロードなどに役立ちます。

これらのプロパティは、name = "properties [property-name]"の属性を持つ入力要素を介してキャプチャされます。ここで、property-nameはカスタムプロパティの目的の名前です。プロパティ入力はすべて、製品フォーム内に含める必要があります。

Example

{% form 'product' %}
  <!-- form content -->

  <input type="text" name="properties[Monogram]">
  <input type="submit" value="Add to cart">
{% endform %}

AJAX API

AJAX API の一部であるCartAPIを使用すると、顧客は後でカートページにリダイレクトせずに、バリアントをカートに追加できます。

製品の推奨事項

AJAX API の一部であるProductRecommendations APIを使用して、関連製品で顧客をアップセルすることができます。この API の使用方法の詳細については、製品の推奨事項を表示するを参照してください。

Shopify アプリのご紹介

Discussion

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