Akses variasi setiap item troli Shopify

Question

Pertama sekali, saya sentiasa suka menyiarkan contoh yang berfungsi, tetapi kerana ini adalah campuran js dan cecair pemaparan sebelah pelayan di Shopify, saya tidak boleh mendapatkan contoh yang sedang berjalan.

Dalam Shopify, anda boleh mengakses product 对象，如下所示 {{ Product }} daripada templat produk.

Objek

Cart mempunyai satu dan objek items 属性，它是购物车中所有商品的数组。购物车中的每个 item 对象与 product 对象不同。 product 对象有一个变体列表，而 cart item tidak.

Tujuan ini adalah untuk dapat mengedit saiz barang dalam troli beli-belah.

Soalan saya ialah, bagaimana saya boleh mendapatkan semua variasi terpaut? Anda perlu pergi ke produk dan dapatkan senarai semua varian di dalamnya, dapatkan product_id daripada varian.

Sebab ini rumit ialah apabila anda mendapat respons mendapatkan objek troli, anda mendapat satu item 获得一个 product_id untuk setiap item dalam troli. Tetapi anda tidak boleh mendapatkan objek produk melainkan anda berada di halaman produk.

Hanya untuk membantu menggambarkan troli beli-belah, seperti ini:

{
  items: [
    {
      handle: 'product-handle',
      product_id: 123,
      variant_title: 'product variant'
    }
  ]
}

Apa yang perlu dilengkapkan ialah:

{
  items: [
    {
      handle: 'product-handle',
      product_id: 123,
      /**
       * to get this you need first access to the product object from the product 
       * template. You could convert the product to json with a filter
       * e.g. const product = {{ product | json }} but you don't have the 
       * opportunity to be on the product template each time you edit a cart item
      */
      variants: [
        { color: 'white', size: 's' },
        { color: 'white', size: 'm' }
      ]
    }
  ]
}

Answer 1

Jika anda mempunyai ID atau pemegang produk, anda boleh menghubungi Shopify pada bila-bila masa untuk mendapatkan maklumat lanjut tentang produk, seperti semua variasi yang diberikan kepada produk dan semua pilihan. Jadi, untuk menukar kepada pilihan lain, anda perlu mengalih keluar ID varian daripada troli anda dan menambah ID berbeza yang anda mahukan. Anda boleh menggunakan panggilan StorefrontAPI untuk mendapatkan maklumat produk. Ini biasanya cara peniaga melakukan apa yang anda perlu lakukan.

Answer 2

Selepas seharian bergelut, akhirnya saya dapat tahu. Bagi sesiapa sahaja yang menghadapi masalah ini, anda perlu melakukan sesuatu yang serupa.

Dari templat troli beli-belah, cart.liquid

const cart = (() => {
  const cart = {{ cart | json }}
  const items = []
  let variants

  {% for item in cart.items %}
    item = {{ item | json }}
    variants = []

    {% for variant in item.product.variants %}
      variant = {{ variant | json }}
      variants.push(variant)
    {% endfor %}

    item.variants = variants
    items.push(item)
  {% endfor %}
  cart.items = items

  return cart
})();

Kini anda mempunyai variasi untuk setiap atribut item dalam troli anda.