在购物车页面Shopify

Question

我正在开发shopify主题，如该图所示，我已经创建了一个迷你购物车页面，我的网站是：https://codeinspire-dev2.myshopify.com/cart

我正在使用vue.js来控制此迷你购物车页面数据，我叫

axios.get（'/ cart.js'）用于填充数据，该调用使我的购物车对象上包含了所有物品，但没有 这里有stock_quantity属性。用户可以在迷你购物车页面上更改数量，但是我无法检查迷你购物车页面上的产品数量是否变大，然后是stock_quantity。我怎样才能做到这一点。任何帮助表示赞赏。

Answer 1

您有两个选择。

选项1 。
由于购物车JSON对象不提供有关可用库存变量数量的信息，因此您需要在主题模板中手动创建此类对象。请参阅下面的代码，这将使您了解如何获取购物车中的物品可用的库存数量：

{%- assign cart_items_count = cart.items | size -%}
var cartItemMaxQuantities = {
  {%- for item in cart.items -%}
  "{{ item.id }}": {{- item.variant.inventory_quantity -}}
  {%- unless forloop.index == cart_items_count -%},{%- endunless -%}
  {%- endfor -%}
};

这将创建一个JSON对象，您可以在JS逻辑中使用此对象来调整购物车项目的数量。该对象将如下所示：

{
  variant_id_1: max_available_quantity,
  variant_id_2: max_available_quantity,
  ...,
  variant_id_x: max_available_quantity
}

如果您需要在使用AJAX添加/删除购物车项目时获取更新的对象，请创建一个新的页面模板，例如page.max-qtys.liquid以输出此JSON对象。然后，在添加/删除项目时，您可以通过请求网站上的任意页面并添加?view=max-qtys查询参数（例如， /pages/about?view=max-qtys。不要忘记在模板文件的开头添加{% layout none %}，以防止加载您的网站布局文件，而只是输出对象JSON。下面是页面模板的代码。

{%- layout none -%}
{%- assign cart_items_count = cart.items | size -%}
{
  {%- for item in cart.items -%}
  "{{ item.id }}": {{- item.variant.inventory_quantity -}}
  {%- unless forloop.index == cart_items_count -%},{%- endunless -%}
  {%- endfor -%}
}

选项2
使用/cart/add.json而不是/cart.update.json或/cart/change.json向购物车添加新物品。如果您使用/cart/add.json端点，Shopify将以422状态代码响应，并且不允许您添加超出可用项目的数量。