65
在 Shopify 商城中,当某些产品的库存量较低时,可以在产品页面上添加一个显示剩余库存数量的消息,让买家及时了解商品状态。这个功能对于精准管理库存和提高客户体验很有帮助。下面我们就来学习如何在 Shopify 后台实现这个功能。
这个自定义设置适用于 Shopify 的传统主题,不适用于"在线商城 2.0"主题。具体操作步骤因主题不同而有所区别,以下以 Debut 主题为例进行说明。
1. 在后台 "在线商店 - 主题" 页面,找到要编辑的主题,点击"操作 - 编辑代码"。
2. 在 Layout 目录下打开 theme.liquid 文件,在 `</head>` 标签上方添加以下代码:
```liquid
[removed]
var variantStock = {};
[removed]
```
3. 在 Sections 目录下打开 product-template.liquid 文件,在 `{% form 'product' %}` 标签上方添加以下代码:
```liquid
{% if current_variant.inventory_quantity <= 0 and current_variant.inventory_management == 'shopify' %}
Stock: {{ current_variant.inventory_quantity }}
{% endif %}
```
4. 在同一文件的底部添加以下代码:
```liquid
[removed]
{% for variant in product.variants %}
variantStock[{{ variant.id }}] = {{ variant.inventory_quantity }};
{% endfor %}
[removed]
```
5. 最后, 在 theme.js.liquid 或 theme.js 文件中,找到 `theme.Product = (function() {` 部分,在 `this.selectors = {` 下方添加:
```javascript
inventoryHtml: '.inventoryWrapper',
```
然后在 `_updateAddToCart: function(evt) {` 或 `_setProductState: function(evt) {` 函数中,添加以下代码:
```javascript
var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);
if (variantStock[variant.id] > 0 \u0026\u0026 variant.inventory_management == 'shopify' \u0026\u0026 inventoryWrapper !== null) {
const inventoryHtml = `Stock: ${variantStock[variant.id]}`;
inventoryWrapper[removed] = inventoryHtml;
} else {
inventoryWrapper[removed] = '';
}
```
完成以上操作后,保存修改即可在产品页面上看到剩余库存数量的提示信息。
Q1: 如果我使用的是 Shopify 的免费主题,该怎么办?
A1: 如果您使用的是 Shopify 提供的免费主题,可以联系 Shopify 支持团队,他们会为您提供帮助。
Q2: 这个自定义设置适用于所有 Shopify 主题吗?
A2: 不适用。这个自定义设置仅适用于 Shopify 的传统主题,不适用于"在线商城 2.0"主题。您需要根据自己使用的主题版本进行相应的调整。
Q3: 除了 Debut 主题,其他主题的操作步骤有什么不同吗?
A3: 不同主题的具体操作步骤会有所不同,但基本思路是相同的。您可以参考文章中提到的其他主题按钮,查看对应的操作说明。
Q4: 我在操作过程中遇到了问题,该如何解决?
A4: 如果您在操作过程中遇到任何问题,可以再次仔细检查代码,确保每一步都执行正确。如果还无法解决,您可以联系 Shopify 支持团队寻求帮助。
