Shopify. 如何将产品数量添加到产品页面

本教程展示了如何在Shopify的产品页面中添加产品数量.

默认情况下，数量框不包含在产品页面中. 因此，一个可以通过文件手动放置.

的管理面板 website and navigate to Online Store > Themes> ‘…’ button> Edit HTML/CSS. Search for the ‘product.liquid’ file，位于“模板”部分下. 您可以使用顶部提供的搜索选项. 打开这个文件进行编辑:

Note: 编辑前请将原始文件复制一份, 以便在需要时用于恢复产品页面.

1. 检查产品.liquid file and 搜索要显示数量的区域. 这可以是产品页面的任何部分.

2. 让我们把它放在Type和上面 Vendor, in the 产品详情部分. 找到它的行:

3. 下面几行应该放在上面提到的div类下面. 一旦添加了它们，就可以更新它们的对齐方式，以便更容易理解代码(这是可选的):

   
   {% if product.variants.first.Inventory_management == "shopify"和product.variants.first.inventory_quantity > 0 %}
   我们目前有{{产品.variants.first.库存中的Inventory_quantity}.
   {% endif %}
   
   

   

4. Next, find the selectCallback function 在同一产品中.liquid  file. 找到这段代码:

   var selectCallback =函数(变量，选择器){

   注意:如果你的主题没有， 按照相应的步骤创建一个.

5. 的值之后应该放置新的代码 selectCallback variable. 将以下代码复制粘贴到文件中:

     if (variant) {
     if (variant.Inventory_management == "shopify" && variant.inventory_policy != "continue") {
       if (variant.inventory_quantity > 0) {
         jQuery(“# variant-inventory”).text(“我们有”+变体.Inventory_quantity + ' in stock '.');
       } else {
         jQuery(“# variant-inventory”).文本(“此产品已售罄”);
       }
     } else {
       jQuery(“# variant-inventory”).文本(“此产品可用”);
     }
   } else {
       jQuery(“# variant-inventory”).text("");
   }

   

保存应用于产品的更改.液体文件，并回到产品页面检查结果. 代码已分别应用. 产品数量显示在所需部分.

请随时查看下面的详细视频教程: