Accéder aux variantes de chaque article du panier Shopify

Question

Tout d'abord, j'aime toujours publier des exemples fonctionnels, mais comme il s'agit d'un mélange de js et de liquide de rendu côté serveur sur Shopify, je ne peux pas obtenir d'exemple fonctionnel.

Dans Shopify, vous pouvez accéder à product 对象，如下所示 {{ Product }} à partir des modèles de produits.

L’objet

Cart en a un et l’objet items 属性，它是购物车中所有商品的数组。购物车中的每个 item 对象与 product 对象不同。 product 对象有一个变体列表，而 cart item n’en a pas.

Le but est de pouvoir modifier la taille des articles dans le panier.

Ma question est la suivante : comment puis-je obtenir toutes les variantes liées ? Vous devez accéder au produit et obtenir une liste de toutes les variantes qu'il contient, obtenir product_id parmi les variantes.

La raison pour laquelle cela est délicat est que lorsque vous obtenez la réponse get pour l'objet panier, vous en obtenez un item 获得一个 product_id pour chaque élément du panier. Mais vous ne pouvez obtenir l'objet produit que si vous êtes sur la page produit.

Juste pour vous aider à visualiser le panier, comme ceci :

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

Ce qui doit être complété est :

{
  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

Si vous disposez d'un identifiant ou d'un identifiant de produit, vous pouvez toujours appeler Shopify pour obtenir plus d'informations sur le produit, telles que toutes les variantes attribuées au produit et toutes les options. Ainsi, pour passer à une option différente, vous devez supprimer l’ID de variante de votre panier et ajouter l’ID différent souhaité. Vous pouvez utiliser les appels StorefrontAPI pour obtenir des informations sur le produit. C'est généralement ainsi que les commerçants font ce que vous devez faire.

Answer 2

Après une journée entière de lutte, j'ai enfin compris. Pour toute autre personne ayant rencontré ce problème, vous devez faire quelque chose de similaire.

À partir du modèle de panier, 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
})();

Vous disposez désormais de variantes pour chaque attribut d’article dans votre panier.