在 Shopify 迷你购物车页面中检查库存数量

Question

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

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

axios.get('/cart.js') 用数据填充它，该调用为我提供了包含所有项目的购物车对象，但没有 inventory_quantity 属性那里。用户可以更改迷你购物车页面上的数量，但我无法检查迷你购物车页面上的产品数量是否大于 inventory_quantity。我怎样才能做到这一点。感谢任何帮助。

Answer 1

你有两个选择。

选项 1.
由于 cart 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 更新 adding/removing 购物车商品上的对象 - 创建一个新的页面模板，例如page.max-qtys.liquid 输出这个 JSON 对象。然后在 adding/removing 项目上，您可以通过请求您网站上的任何页面并添加 ?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 状态代码进行响应，并且不允许您添加超出可用数量的商品。

在 Shopify 迷你购物车页面中检查库存数量

checking for inventory quantity in mini cart page Shopify

shopify