📁

【Shopify.dev和訳】Themes/Architecrure/Templates/cart

2021/09/17に公開

Shopify

themes

tech

この記事について

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

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

Shopify アプリのご紹介

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

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

カート

cartテンプレートは、顧客のカートの内容の概要を提供するカートページをレンダリングします。概要は通常、各ラインアイテムの行を含む表形式で表示されます。

カートオブジェクト

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

広告申込情報を理解する

line_item は、追加された商品のバリエーションと関連する数量を記録するショッピングカート内の単一の行です。たとえば、顧客が同じt-shirtのsize mediumとsize largeの両方をカートに追加した場合、各 T シャツには独自の広告申込情報があります。

cartテンプレートには、各ラインアイテムに行があるテーブルを含める必要があります。

Example

{% for line_item in cart.line_items %}
  <!-- line item info -->
{% endfor %}

チェックアウトに進む

顧客がカートからチェックアウトに進むことができるようにするには、<form>要素内にカートの広告申込情報を出力する必要があります。フォーム要素には、action = "{{routes.cart_url}}"およびmethod = "post"の属性が必要です。

フォーム要素には、type = "submit"およびname = "checkout"の属性を持つ<input>も含める必要があります。この入力により、チェックアウトに進むことができます。

Example

<form action="{{ routes.cart_url }}" method="post">
  {% for line_item in cart.line_items %}
    <!-- line item info -->
  {% endfor %}

  <input type="submit" name="checkout" value="Checkout">
</form>

カートから広告申込情報を削除します

カートから広告申込情報を削除するオプションを顧客に提供する必要があります。これを行うには、各ラインアイテムに<a>要素を含めます。この要素のhref属性は、line_item オブジェクトのurl_to_remove属性を参照します。

Example

{% for line_item in cart.line_items %}
  <!-- line item info -->

  <a href="{{ line_item.url_to_remove }}">Remove</a>
{% endfor %}

広告申込情報の数量を更新する

カート内の広告申込情報の数量を更新するオプションを顧客に提供する必要があります。これを行うには、name = "updates []"およびvalue = ""の属性を持つ各ラインアイテムに<input>要素を含めます。

Example

{% for line_item in cart.line_items %}
  <!-- line item info -->

  <input type="text" name="updates[]" value="{{ line_item.quantity }}">
{% endfor %}

数量入力が変更されたときに実際に更新をトリガーするには、カートの<form>にtype = "submit"の属性を持つ<input>を含めることができます。

Example

<input type="submit" value="Update cart">

この入力を使用してフォームを送信すると、更新された数量でページが再読み込みされます。

カートのメモと属性

カートのメモと属性を使用して、注文に追加情報を含めるオプションを顧客に提供できます。

カートノート

カートのメモをキャプチャするには、カートの<form>内にname = "note"の属性を持つ HTML 入力（通常は<textarea>）を含めます。

Example

<textarea name="note"></textarea>

この値には、cart objectのnote属性からアクセスできます。

カートの属性

カートの属性をキャプチャするには、カートの<form>内にname = "attributes [attribute-name]"の属性を持つ HTML 入力を含めます。

Example

<p>
  <label>Please let us know your favorite color</label>

  <input type="text" name="attributes[Favorite color]" value="{{ cart.attributes['Favorite color'] }}">
</p>

カートオブジェクトの属性attributesを介して、すべての値にアクセスできます。

ラインアイテムのプロパティ

アイテムがカートに追加されると、ラインアイテムのプロパティを含めることができます。各プロパティをループすることで、カートページにこれらのプロパティを表示できます。

Example

{% for line_item in cart.line_items %}
  <!-- line item info -->

  {% unless line_item.properties == empty %}
    {% for property in line_item.properties %}
      {{ property.first }}:

      {% if property.last contains '/uploads/' %}
        <a href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
      {% else %}
        {{ property.last }}
      {% endif %}
    {% endfor %}
  {% endfor %}
{% endunless %}

Shopify アプリのご紹介

Discussion

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