🧑‍💻

【Shopify.dev和訳】Ajax API/Reference/Cart

2021/09/12に公開

API

Shopify

Ajax

tech

この記事について

この記事は、Cart API referenceの記事を和訳したものです。

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

Shopify アプリのご紹介

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

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

Cart API reference

Cart API は、顧客のセッション中にカートと対話するために使用されます。このガイドでは、Cart API を使用してカートの広告申込情報を更新し、カートの属性とメモを追加し、配送料を生成する方法を示します。

POST /cart/add.js

1 つまたは複数のバリアントをカートに追加するには、POST /cart/add.js エンドポイントを使用します。

以下の例では、quantity は追加したいバリアントの量、id はそのバリアントのバリアント ID です。items の配列にさらにオブジェクトを追加することで、複数のバリアントをカートに追加できます。

items: [
  {
    id: 36110175633573,
    quantity: 2,
  },
]

シリアル化されたカートに追加フォームを送信するには、次の投稿データを指定します。

jQuery.post("/cart/add.js", $('form[action="/cart/add"]').serialize())

数量と ID だけでなく、ラインアイテムのプロパティを使用してカートに追加することもできます。

jQuery.post("/cart/add.js", {
  items: [
    {
      quantity: 1,
      id: 794864229,
      properties: {
        "First name": "Caroline",
      },
    },
  ],
})

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

ラインアイテムのプロパティを持つバリアントを、付属の properties オブジェクトを使ってカートに追加することができます。

items: [
  {
    quantity: 1,
    id: 794864229,
    properties: {
      "First name": "Caroline",
    },
  },
]

Response

{
  "items": [
    {
      "id": 794864229,
      "quantity": 1,
      // ...
      "properties" : {
        "First name": "Caroline"
      }
    }
  ]
}

販売計画の追加

販売計画を持つバリアントをカートに追加するには、selling_plan パラメータが必要です。

items: [
  {
    quantity: 1,
    id: 794864229,
    selling_plan: 183638,
  },
]

レスポンスオブジェクトには、selling_plan_allocation プロパティがあります。

Response

{
  "items": [
    {
      "id": 794864229,
      // ...
      "selling_plan_allocation": {
        "price": 3120,
        "compare_at_price": 3900,
        "per_delivery_price": 3120,
        "selling_plan": {
          "id": 183638,
          "name": "Pay every month, delivery every month | save 20%",
          "description": "No commitment · Auto-renews · Skip or cancel anytime",
          "options": [{
            "name": "Delivery Frequency",
            "position": 1,
            "value": "Month"
          }, {
            "name": "Billing Frequency",
            "position": 2,
            "value": "Month"
          }],
          "recurring_deliveries": true
        }
      }
    }
  ]
}

API コールの例

以下は、fetch API を使用した簡易的な POST です。formData オブジェクトは JavaScript で作成されているため、headers オブジェクトで Content-Type を application/json に設定する必要があります。

let formData = {
  items: [
    {
      id: 36110175633573,
      quantity: 2,
    },
  ],
}

fetch("/cart/add.js", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(formData),
})
  .then((response) => {
    return response.json()
  })
  .catch((error) => {
    console.error("Error:", error)
  })

次のレスポンスは、追加されたバリアントに関連するラインアイテムの JSON を示しています。アイテムがすでにカートに入っている場合、quantityはそのアイテムの新しい数量と同じになります。

{
  "items": [
    {
      "id": 36110175633573,
      "title": "Red Rain Coat - Small",
      "key": "794864229:03af7a8cb59a4c3c45595c76fa8cb53c",
      "price": 12900,
      "line_price": 12900,
      "quantity": 2,
      "sku": null,
      "grams": 0,
      "vendor": "Shopify",
      "properties": null,
      "variant_id": 794864229,
      "gift_card": false,
      "url": "/products/red-rain-coat?variant=794864229",
      "featured_image": {
        "url": "http://cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893",
        "aspect_ratio": 1,
        "alt": "Red rain coat with a hood"
      },
      "image": "http://cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893",
      "handle": "red-rain-coat",
      "requires_shipping": true,
      "product_title": "Red Rain Coat",
      "product_description": "A bright red rain coat for rainy days!",
      "product_type": "Coat",
      "variant_title": "Red",
      "variant_options": ["Red"],
      "options_with_values": [
        {
          "name": "Color",
          "value": "Red"
        }
      ]
    }
  ]
}

または、FormData コンストラクターを使用して、目的のカートに追加するフォームをターゲットにすることもできます。

let addToCartForm = document.querySelector('form[action="/cart/add"]')
let formData = new FormData(addToCartForm)

fetch("/cart/add.js", {
  method: "POST",
  body: formData,
})
  .then((response) => {
    return response.json()
  })
  .catch((error) => {
    console.error("Error:", error)
  })

Response

POST が成功した場合のレスポンスは、追加されたアイテムに関連するラインアイテムの JSON オブジェクトです。

追加されたアイテムがすでにカートに入っていた場合、quantity はそのカートのラインアイテムの新しい数量と同じになります。ただし、追加されたアイテムの価格が異なる場合は、別のラインアイテムに分割されることに注意してください。価格の変更は、通常、自動割引や Shopify スクリプトの結果です。

items: [
  {
    id: 36323170943141,
    quantity: 1,
  },
  {
    id: 36323170943141,
    selling_plan: 6717605,
    quantity: 1,
  },
]

Response

{
  "items":[
    {
      "id":36323170943141,
      "properties":null,
      "quantity":1,
      "variant_id":36323170943141,
      "key":"36323170943141:b15f59bb6d406f2f45dc383a5493bdb8",
      "title":"Great Granola Bar",
      "price":2000,
      "original_price":2000,
      "discounted_price":2000,
      "line_price":2000,
      "original_line_price":2000,
      "total_discount":0,
      "discounts":[],
      "sku":"",
      "grams":0,
      "vendor":"shopify",
      "taxable":true,
      "product_id":5680114172069,
      "product_has_only_default_variant":true,
      "gift_card":false,
      "final_price":2000,
      "final_line_price":2000,
      "url":"/products/great-granola-bar?variant=36323170943141",
      "featured_image":{
        "aspect_ratio":1.504,
        "alt":"Great Granola Bar",
        "height":1277,
        "url":"https://cdn.shopify.com/s/files/1/0401/3218/2181/products/fallon-michael-h2UH2674Bg4-unsplash.jpg?v=1600796940",
        "width":1920
      },
      "image":"https://cdn.shopify.com/s/files/1/0401/3218/2181/products/fallon-michael-h2UH2674Bg4-unsplash.jpg?v=1600796940",
      "handle":"great-granola-bar",
      "requires_shipping":true,
      "product_type":"",
      "product_title":"Great Granola Bar",
      "product_description":"The great granola bar, everyone has been talking about it. Subscribe when you can!",
      "variant_title":null,
      "variant_options":[
        "Default Title"
      ],
      "options_with_values":[
        {
          "name":"Title",
          "value":"Default Title"
        }
      ],
      "line_level_discount_allocations":[ ],
      "line_level_total_discount":0
    },
    {
      "id":36323170943141,
      "properties":null,
      "quantity":1,
      "variant_id":36323170943141,
      "key":"36323170943141:322e2af74da821ca095964e07b7270b5",
      "title":"Great Granola Bar",
      "price":1700,
      "original_price":1700,
      "discounted_price":1700,
      "line_price":1700,
      "original_line_price":1700,
      "total_discount":0,
      "discounts": [],
      "sku":"",
      "grams":0,
      "vendor":"shopify",
      "taxable":true,
      "product_id":5680114172069,
      "product_has_only_default_variant":true,
      "gift_card":false,
      "final_price":1700,
      "final_line_price":1700,
      "url":"/products/great-granola-bar?selling_plan=6717605/u0026variant=36323170943141",
      "featured_image":{
        "aspect_ratio":1.504,
        "alt":"Great Granola Bar",
        "height":1277,
        "url":"https://cdn.shopify.com/s/files/1/0401/3218/2181/products/fallon-michael-h2UH2674Bg4-unsplash.jpg?v=1600796940",
        "width":1920
      },
      "image":"https://cdn.shopify.com/s/files/1/0401/3218/2181/products/fallon-michael-h2UH2674Bg4-unsplash.jpg?v=1600796940",
      "handle":"great-granola-bar",
      "requires_shipping":true,
      "product_type":"",
      "product_title":"Great Granola Bar",
      "product_description":"The great granola bar, everyone has been talking about it. Subscribe when you can!",
      "variant_title":null,
      "variant_options":[
        "Default Title"
      ],
      "options_with_values":[
        {
          "name":"Title",
          "value":"Default Title"
        }
      ],
      "line_level_discount_allocations":[ ],
      "line_level_total_discount":0,
      "selling_plan_allocation":{
        "price_adjustments":[
          {
            "position":1,
            "price":1700
          }
        ],
        "price":1700,
        "compare_at_price":2000,
        "per_delivery_price":1700,
        "selling_plan":{
          "id":6717605,
          "name":"Delivered every week",
          "description":null,
          "options":[
            {
              "name":"Delivery every",
              "position":1,
              "value":"1 Week(s)"
            }
          ],
          "recurring_deliveries":true,
          "price_adjustments":[
            {
              "order_count":null,
              "position":1,
              "value_type":"percentage",
              "value":15
            }
          ]
        }
      }
    }
  ]
}

Error responses

アイテムに指定された正確な数量がカートに追加できない場合（例えば、9 個のアイテムを追加しようとしているが、2 個はすでにカートに入っていて、10 個は在庫がある場合）、アイテムはカートに追加されません。JSON 形式のエラーが返されます。

{
  "status": 422,
  "message": "Cart Error",
  "description": "You can't add more Messenger Bag to the cart."
}

エラーコードは次のとおりです。

422 (Unprocessable Entity)

製品が完全に売り切れの場合、次のエラーが返されます。

The product '#{item.name}' is already sold out.

商品が完売していないが、すべての在庫がカートに入っている場合は、次のエラーが返されます。

All #{item.inventory_quantity} #{item.name} are in your cart.

GET /cart.js

GET /cart.js エンドポイントを使用して、JSON としてカートを取得します。

すべての通貨プロパティは、顧客の予約通貨で返されます。顧客の請求通貨を確認するには、レスポンスの currency フィールドを使用できます。複数の通貨での販売については、多通貨に対応したアプリの移行を参照してください。

Response

JSON of a cart

Response

{
  "token": "1d19a32178501c44ef2223d73c54d16d",
  "note": "Hello!",
  "attributes": {
    "Gift wrap": "Yes"
  },
  "total_price": 9100,
  "total_weight": 0,
  "item_count": 3,
  "items": [
    {
      "id": 794864229,
      "properties": {},
      "quantity": 1,
      "variant_id": 794864229,
      "key": "794864229:03af7a8cb59a4c3c45595c76fa8cb53c",
      "title": "Red Rain Coat - Small",
      "price": 12900,
      "line_price": 12900,
      "final_price": 12900,
      "final_line_price": 12900,
      "sku": null,
      "grams": 0,
      "vendor": "Shopify",
      "taxable": true,
      "product_id": 388319916,
      "product_has_only_default_variant": false,
      "gift_card": false,
      "url": "/products/red-rain-coat?variant=794864229",
      "featured_image": {
        "url": "http://cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893",
        "aspect_ratio": 1.0,
        "alt": "Red rain coat with a hood"
      },
      "image": "http://cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893",
      "handle": "red-rain-coat",
      "requires_shipping": true,
      "product_title": "Red Rain Coat",
      "product_description": "A bright red rain coat for rainy days!",
      "product_type": "Coat",
      "variant_title": "Red",
      "variant_options": ["Red"],
      "options_with_values": [
        {
          "name": "Color",
          "value": "Red"
        }
      ]
    },
    {
      "id": 794864101,
      "properties": {},
      "quantity": 2,
      "variant_id": 794864101,
      "key": "794864101:816a55d9a53cd82281f8fdcfe967db14",
      "title": "Gray Fedora",
      "price": 2650,
      "line_price": 0,
      "final_price": 2650,
      "final_line_price": 5300,
      "sku": null,
      "grams": 0,
      "vendor": "Shopify",
      "taxable": true,
      "product_id": 388319892,
      "product_has_only_default_variant": false,
      "gift_card": false,
      "url": "/products/gray-fedora?variant=794864101",
      "featured_image": {
        "url": "http://cdn.shopify.com/s/files/1/0040/7092/products/gray-fedora.jpeg?v=1402604885",
        "aspect_ratio": 1.0,
        "alt": "Gray fedora made of straw"
      },
      "image": "http://cdn.shopify.com/s/files/1/0040/7092/products/gray-fedora.jpeg?v=1402604885",
      "handle": "gray-fedora",
      "requires_shipping": true,
      "product_title": "Gray Fedora",
      "product_description": "A gray hat for looking cool!",
      "product_type": "Hats",
      "variant_title": "Gray",
      "variant_options": ["Gray"],
      "options_with_values": [
        {
          "name": "Color",
          "value": "Gray"
        }
      ],
      "line_level_discount_allocations": [
        {
          "amount": 500,
          "discount_application": {
            "type": "script",
            "key": "a8a3d7aa-7d00-4827-a2e1-b03c32160bf2",
            "title": "5 Dollar Off",
            "description": null,
            "value": "5.00",
            "created_at": "2019-04-10T20:49:10.023Z",
            "value_type": "fixed_amount",
            "allocation_method": "one",
            "target_selection": "explicit",
            "target_type": "line_item",
            "total_allocated_amount": 500
          }
        }
      ]
    }
  ],
  "requires_shipping": true,
  "currency": "CAD",
  "items_subtotal_price": 18200,
  "cart_level_discount_applications": [
    {
      "type": "automatic",
      "key": "059b5e54-3c5d-4e7e-b377-8e09d8376269",
      "title": "50% Summer Deal",
      "description": null,
      "value": "50.0",
      "created_at": "2019-04-10T20:49:00.148Z",
      "value_type": "percentage",
      "allocation_method": "across",
      "target_selection": "all",
      "target_type": "line_item",
      "total_allocated_amount": 9100
    }
  ]
}

JSON of an empty cart

Response

{
  "token": "1d19a32178501c44ef2223d73c54d16d",
  "note": null,
  "attributes": {},
  "total_price": 0,
  "total_weight": 0,
  "item_count": 0,
  "items": [],
  "requires_shipping": false,
  "currency": "CAD"
}

POST /cart/update.js

カートのラインアイテムの数量、ノート、または属性を更新するには、POST /cart/update.jsエンドポイントを使用します。連続したカートフォームを送信することも、カートのラインアイテム、ノート、または属性の更新を個別に送信することもできます。

ラインアイテムの更新

キーと値のペアを持つ updates オブジェクトをポストします。キーはラインアイテムの variant_id です。

jQuery.post("/cart/update.js", {
  updates: {
    794864053: 2,
    794864233: 3,
  },
})

以下の post でも同じ結果が得られます。

jQuery.post("/cart/update.js", "updates[794864053]=2&updates[794864233]=3")

/cart/update.js エンドポイントは、提供された variant_id が、すでにカートに入っているラインアイテムと一致しない場合、新しいラインアイテムをカートに追加します。ただし、Variant_id が複数のラインアイテムにマッチした場合は、最初にマッチしたラインアイテムが更新されます。

カートの中に複数のラインアイテムがある場合に、1 つのラインアイテムを更新することができます。例えば、以下の投稿では、バリアント 794864053 のみの数量を 5 に更新しています。

jQuery.post("/cart/update.js", { updates: { 794864053: 5 } })

最後に、次の方法で、バリアント 794864053 とバリアント 794864233 の両方をカートから削除できます。

jQuery.post("/cart/update.js", { updates: { 794864053: 0, 794864233: 0 } })

また、/cart/update.js に数字の配列を送信することもできます。ただし、配列のサイズがカートのラインアイテムの数と一致する必要があります。配列内の各数値は、カート内の対応するラインアイテムの数量を設定します。

例えば、カートの中に数量 1、2、3 の 3 つのラインアイテムがあり、それらの数量を 3、2、1 に変更したい場合は、以下のようにします。

jQuery.post("/cart/update.js", { updates: [3, 2, 1] })

カートメモの更新

メモの文字列を投稿します。以下は、メモのポストデータの例です。

{
  note: "This is a note about my order"
}

カート属性の更新

キーと値のペアを持つ attributes オブジェクトを投稿します。key は、更新したい属性の名前です。以下は、カートの attributes のポストデータの例です。

{
  attributes: {
    'Gift wrap': 'Yes'
  }
}

このバージョンでも同じ結果が得られます。

jQuery.post("/cart/update.js", "attributes[Gift wrap]=Yes")

Response

カートの JSON。

Error responses

オンラインストアチャネルに存在しないか利用できないバリアント ID が提供された場合、エンドポイントは次のエラーを返します。

Response

{
  "status": 404,
  "message": "Cart Error"
  "description": "Cannot find variant"
}

新しいバリアントがカートに追加され、その quantity が利用可能な数量を超えると、結果として 422 エラーが発生します。

Response

{
  "status": 422,
  "message": "Cart Error",
  "description": "You can only add 8 Messenger Bag to the cart."
}

POST /cart/change.js

/cart/change.js エンドポイントは、カートのラインアイテムの quantity と properties オブジェクトを変更します。変更できるのは、すでにカートに入っているアイテムのみで、一度に変更できるのは 1 つのラインアイテムのみです。

ポストデータには、変更するラインアイテムを特定するために、id または line プロパティのいずれかが必要です。id の値は、ラインアイテムの variant_id またはラインアイテムのキーです。

{
  "id": 794864053,
  "quantity": 3
}

variants が異なるラインアイテムプロパティを持っていたり、自動割引で variants が異なる価格になっていたりすると、カートは同じ variant_id を共有する複数の line item を持つことができます。これを考慮するには、カートの更新時に line プロパティを使用します。line の値は、カート内のアイテムの 1 ベースのインデックス位置です。

{
  "line": 1,
  "quantity": 3
}

数量の更新

quantityプロパティは、そのラインアイテムに必要な新しい数量です。quantityの値は整数である必要があります。

次のコードは、カートの 2 番目のラインアイテムを更新します。

quantityを 0 に設定すると、カートのラインアイテム情報を削除できます。

{
  "line": 2,
  "quantity": 0
}

プロパティの更新

properties プロパティは、ラインアイテムのプロパティを設定します。その値は、キーと値のペアのオブジェクトでなければなりません。

次のコードは、カート内の 2 番目のラインアイテムの properties を変更します。

{
  "line": 2,
  "properties": { "gift_wrap": true }
}

POST に properties が含まれていると、必ず properties オブジェクト全体が上書きされます。すでに properties オブジェクト内にあった key-value ペアはすべて消去されます。

一度値を設定したラインアイテムの properties を空のオブジェクトに設定することはできません。すべてのラインアイテムのプロパティを削除する必要がある場合は、ラインアイテム全体を削除する必要があります。

Response

カートの JSON。

jQuery.post("/cart/change.js", { quantity: 1, line: 2 })

Error responses

変更しようとしているアイテムがまだカートに入っていない場合、/cart/change.js はそれを追加しません。代わりに、404 エラーを返します。

POST /cart/clear.js

POST /cart/clear.js エンドポイントを使用して、カート内のすべてのラインアイテムの数量をゼロに設定します。

Response

空のカートの JSON です。これにより、カートの属性やカートのメモが削除されることはありません。

Response

{
  "token": "1d19a32178501c44ef2223d73c54d16d",
  "note": null,
  "attributes": {},
  "total_price": 0,
  "total_weight": 0,
  "item_count": 0,
  "items": [],
  "requires_shipping": false
}

配送料金の生成

送料を生成するには、POST /cart/prepare_shipping_rates.json エンドポイントと GET /cart/async_shipping_rates.json エンドポイントを使用します。

POST /cart/prepare_shipping_rates.json エンドポイントは、配送先が指定されたカートの配送料金を計算するプロセスを開始します。
GET /cart/async_shipping_rates.json エンドポイントは、計算が終了した場合に配送料の結果を返します。

`prepare_shipping_rates` 呼び出しの例

Response

null

`async_shipping_rates` 呼び出しの例

/cart/async_shipping_rates.json?shipping_address%5Bzip%5D=K1N+5T2&shipping_address%5Bcountry%5D=Canada&shipping_address%5Bprovince%5D=Ontario

prepare_shipping_rates と同じパラメータで async_shipping_rates を呼び出すと、Shopify が送料の計算を終えたかどうかをチェックします。もし、送料の準備ができていなければ、レスポンスは null です。

配送料の準備ができていれば、配送料が返されます。

Response

{
  "shipping_rates": [
    {
      "name": "Generic Rate",
      "presentment_name": "Generic Rate",
      "code": "Generic Rate",
      "price": "6.00",
      "markup": null,
      "source": "shopify",
      "delivery_date": null,
      "delivery_range": null,
      "delivery_days": [],
      "compare_price": null,
      "phone_required": false,
      "currency": null,
      "carrier_identifier": null,
      "delivery_category": null,
      "using_merchant_account": null,
      "carrier_service_id": null,
      "description": null,
      "api_client_id": null,
      "requested_fulfillment_service_id": null,
      "shipment_options": null,
      "charge_items": null,
      "has_restrictions": null,
      "rating_classification": null,
      "accepts_instructions": false
    },
    {
      "name": "Carrier Service Mail",
      "presentment_name": "Carrier Service Mail",
      "code": "CarrierServiceMail",
      "price": "12.46",
      "markup": "0.00",
      "source": "usps",
      "delivery_date": "2020-10-09",
      "delivery_range": [
          "2020-10-06",
          "2020-10-09"
      ],
      "delivery_days": [
          0,
          3
      ],
      "compare_price": null,
      "phone_required": true,
      "currency": null,
      "carrier_identifier": null,
      "delivery_category": null,
      "using_merchant_account": null,
      "carrier_service_id": 2,
      "description": null,
      "api_client_id": null,
      "requested_fulfillment_service_id": null,
      "shipment_options": null,
      "charge_items": null,
      "has_restrictions": null,
      "rating_classification": null,
      "accepts_instructions": false
      }
   ]
}

GET /cart/shipping_rates.json

GET /cart/shipping_rates.json を使用して、配送料の見積もりを取得します。

/cart/shipping_rates.json?shipping_address%5Bzip%5D=K1N+5T2&shipping_address%5Bcountry%5D=Canada&shipping_address%5Bprovince%5D=Ontario

Response

{
  "shipping_rates": [
    {
      "name": "Ground Shipping",
      "price": "8.00",
      "delivery_date": null,
      "source": "shopify"
    },
    {
      "name": "Expedited Shipping",
      "price": "15.00",
      "delivery_date": null,
      "source": "shopify"
    },
    {
      "name": "Express Shipping",
      "price": "30.00",
      "delivery_date": null,
      "source": "shopify"
    }
  ]
}

プライベートプロパティと属性

プライベートラインアイテムプロパティとプライベートカート属性は、カートのラインアイテムまたはカート全体に情報を添付する必要があり、オンラインストアの訪問者にプロパティと属性を表示したくない場合に使用します。

プライベート・プロパティとプライベート・カート属性は、チェックアウト時には視覚的に隠されますが、マーチャントにはストア管理者の「注文詳細」の中で表示されます。

ラインアイテムのプライベートプロパティ

ラインアイテムのプロパティをプライベートにするには、キーの後ろにアンダースコア (_) を付けます。例えば、/cart/add.js エンドポイントを使って、プライベートな _foo プロパティを持つバリアントをカートに追加する場合。

items: [
  {
    quantity: 2,
    id: 794864229,
    properties: {
      _foo: "bar",
    },
  },
]

propertiesには、プライベートとパブリックのラインアイテムプロパティを混在させることができます。

items: [
  {
    quantity: 2,
    id: 794864229,
    properties: {
      _foo: "bar",
      gift_wrap: true,
    },
  },
]

テーマのプロパティを非表示にする

ラインアイテムのプライベートプロパティは、Liquid line_item.properties オブジェクトと Ajax API で利用できます。ストアフロントでプライベートプロパティを非表示にするには、テーマのコードベースを変更する必要があります。

以下の例では、Liquid の _ で始まるすべての properties 項目がフィルタリングされます。

Liquid

{% for property in line_item.properties %}
  {% assign first_character_in_key = property.first | slice: 0 %}
  {% unless first_character_in_key == '_' %}
    {{ property.first }}: {{ property.last }}
  {% endunless %}
{% endfor %}

カート属性のプライベート化

カート属性をプライベートにするには、属性名にダブルアンダースコア(__)を付けます。

カートのプライベート属性は、Liquid の cart.attributes オブジェクトや Ajax API では使用できません。つまり、テーマファイルで非表示にするためにコードを修正する必要はありません。また、プライベートカート属性はページのレンダリングに影響を与えないため、より効果的なページキャッシュが可能になります。

バンドルされたセクションのレンダリング

バンドルされたセクションレンダリングでは、Cart API への最初の呼び出しに基づいて更新する可能性のある最大 5 つのセクションの HTML マークアップを、同じ呼び出しの中で要求することができます。

バンドルされたセクション・レンダリングは、以下の Cart API エンドポイントで利用可能です。

/cart/add
/cart/change
/cart/clear
/cart/update

セクションのリクエスト

セクションをリクエストするには、API コールデータに sections パラメータを含めることができます。

Example

items: [
  {
   id: 36110175633573,
   quantity: 2
  }
],
sections: "cart-items,cart-icon-bubble,cart-live-region-text,cart-footer"

デフォルトでは、セクションはカートページ (/cart) のコンテキストで表示されますが、 sections_url パラメータを使って任意のページをコンテキストに指定することができます。sections_url パラメータの値は、/ で始まり、使用したいページの相対 URL パスを記述する必要があります。これには q や page などの URL パラメータも含めることができます。

リクエストされたセクションの HTML は、返された JSON の sections キーの下に含まれます。各セクションは、リクエストで渡されたのと同じ ID で識別できます。

Example

{
  attributes: {},
  cart_level_discount_applications: [],
  currency: "CAD",
  item_count: 1,
  items: [{…}],
  items_subtotal_price: 100100,
  note: null,
  original_total_price: 100100,
  requires_shipping: true,
  sections: {cart-items: "<div id=\"shopify-section-template--14199693705272_…9930913703934\" defer=\"defer\"></script>\n\n\n\n\n</div>", cart-icon-bubble: "<div id=\"shopify-section-cart-icon-bubble\" class=\"…ss=\"visually-hidden\">1 item</span>\n  </div></div>", cart-live-region-text: "<div id=\"shopify-section-cart-live-region-text\" cl…opify-section\">New subtotal: $1,001.00 CAD\n</div>", cart-footer: "<div id=\"shopify-section-template--14199693705272_…   </div>\n    </div>\n  </div>\n</div>\n\n\n\n\n\n\n</div>"},
  token: "9ee5d43a08fb9a779828e42a4b6aa09a",
  total_discount: 0,
  total_price: 100100,
  total_weight: 1000,
}

Error response

セクションのレンダリングは、リクエストからのデータ修正が完了した後に行われます。このため、レンダリングエラーは、API コールのレスポンスステータスには影響しません。レンダリングに失敗したセクションは null として返されるため、この可能性を考慮する必要があります。

sections または sections_url パラメータに無効な値を渡すと、たとえば sections_url が / で始まらない場合などは、リクエスト全体が HTTP 400 Bad Request ステータスを返します。しかし、これはリクエストの残りの部分が成功しなかったことを意味するものではありません。

Shopify アプリのご紹介

Discussion

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

この記事について

Shopify アプリのご紹介

Cart API reference

POST /cart/add.js

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

販売計画の追加

API コールの例

Response

Error responses

GET /cart.js

Response

POST /cart/update.js

ラインアイテムの更新

カートメモの更新

カート属性の更新

Response

Error responses

POST /cart/change.js

数量の更新

プロパティの更新

Response

Error responses

POST /cart/clear.js

Response

配送料金の生成

prepare_shipping_rates 呼び出しの例

async_shipping_rates 呼び出しの例

GET /cart/shipping_rates.json

プライベートプロパティと属性

ラインアイテムのプライベートプロパティ

テーマのプロパティを非表示にする

カート属性のプライベート化

バンドルされたセクションのレンダリング

セクションのリクエスト

Error response

Shopify アプリのご紹介

Discussion

`prepare_shipping_rates` 呼び出しの例

`async_shipping_rates` 呼び出しの例