在shopify产品页面上删除或禁用售罄的多属性步骤

shopify新闻

2022-03-28

866

隐藏售罄多属性

模板，不适用于“Online Store 2.0”模板。

找到您的模板架构版本
探索“Online Store 2.0”模板自定义

您可以通过在产品页面上删除或禁用售罄的多属性来阻止客户选择这些多属性。

本页相关主题

限制
选择您的模板

限制

此页面中概述的自定义设置不适用于以下情况：

您的产品有多个产品选项
您使用 Express 模板，并将产品页面设置为以叠加方式显示

分区模板和未分区模板

备注：本教程的步骤将根据您使用的是分区模板还是未分区模板而有所不同。分区模板支持通过拖放来安排主页的布局，未分区模板则不支持。

如果想了解您的模板是否支持分区，请转到模板的编辑代码页面。如果 Sections 目录中有文件，您则正在使用已分区模板。未分区模板是在 2016 年 10 月之前发布的，并且 Sections 目录中没有文件。

如果您使用已分区模板，请点击 Sectioned themes（已分区模板）按钮并按照说明进行操作。如果您使用较旧的未分区模板，请点击 Non-sectioned themes（未分区模板）按钮并按照说明进行操作。

Sectioned themes
Non-sectioned themes

选择您的模板

此自定义的步骤因您的模板而异。点击模板的按钮，然后按照以下说明操作：

Boundless
Brooklyn
Debut
Express
Minimal
Narrative
Simple
Supply
Venture

Boundless

此自定义设置的步骤取决于您是希望完全隐藏售罄的多属性，还是只想将其禁用。点击偏好设置按钮，然后按照以下说明操作：

Disable

隐藏售罄多属性

按照以下步骤将自定义项应用于 Boundless：

PC：

在 Shopify 后台中，转到在线商店 > 模板。
找到要编辑的模板，然后点击操作 > 编辑代码。

在 Assets 目录中，点击 theme.js 或 theme.js.liquid。

苹果系统：

在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，然后点击操作 > 编辑代码。

在 Assets 目录中，点击 theme.js 或 theme.js.liquid。

安卓系统：

在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触。
轻触 Manage themes（管理模板）。
找到要编辑的模板，然后点击操作 > 编辑代码。

在 Assets 目录中，点击 theme.js 或 theme.js.liquid。

在文件底部，粘贴以下代码：

document.addEventListener('DOMContentLoaded', function() {   const productJson = document.querySelectorAll('[id`^`=ProductJson-');   if (productJson.length > 0) {     for (let i = 0; i < productJson.length; i++) {       const current = productJson[i];       const sectionId = current.id.replace('ProductJson-', '');       const section = document.querySelector('[data-section- + sectionId + '"]');       const product = JSON.parse(current.text);       if (product.options.length === 1) {         const unavailableVariants = [];         for (let j = 0; j < product.variants.length; j++) {           const variant = product.variants[j];           if (!variant.available) {             unavailableVariants.push(variant);           }         }         if (unavailableVariants.length > 0) {           const mutationCallback = function() {             const variantOptions = section.querySelectorAll('.single-option-selector option');             if (variantOptions.length > 0) {               for (let k = 0; k < unavailableVariants.length; k++) {                 const unavailableVariant = unavailableVariants[k];                 for (let l = 0; l < variantOptions.length; l++) {                   const option = variantOptions[l];                   if (unavailableVariant.title === option.value) {                     option.remove();                   }                 }               }               if (typeof observer === 'object' && typeof observer.disconnect === 'function') {                 observer.disconnect();               }             }           }           const observer = new MutationObserver(mutationCallback);           const addToCartForm = document.querySelector('form[action*="/cart/add"]');           mutationCallback();           if (window.MutationObserver && addToCartForm.length) {             const config = { childList: true, subtree: true };             if (typeof observer === 'object' && typeof observer.disconnect === 'function') {               observer.disconnect();             }             observer.observe(addToCartForm, config);           }         }       }     }   } });

点击保存。

Hide sold-out variants

Limitations

The customizations outlined on this page do not work for the following cases:

Your products have more than one product option
You use the Express theme and have the product page set to show products in an overlay

Sectioned and non-sectioned themes

In the Assets directory, click theme.js or theme.js.liquid.

iPhone：

From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.

In the Assets directory, click theme.js or theme.js.liquid.

Android：

From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.

In the Assets directory, click theme.js or theme.js.liquid.

At the bottom of the file, paste the following code:

document.addEventListener('DOMContentLoaded', function() {   const productJson = document.querySelectorAll('[id^=ProductJson-');if (productJson.length > 0) {     for (let i = 0; i < productJson.length; i++) {       const current = productJson[i];       const sectionId = current.id.replace('ProductJson-', '');       const section = document.querySelector('[data-section- + sectionId + '"]');       const product = JSON.parse(current.text);if (product.options.length === 1) {         const unavailableVariants = [];for (let j = 0; j < product.variants.length; j++) {           const variant = product.variants[j];if (!variant.available) {             unavailableVariants.push(variant);           }         }if (unavailableVariants.length > 0) {           const mutationCallback = function() {             const variantOptions = section.querySelectorAll('.single-option-selector option');if (variantOptions.length > 0) {               for (let k = 0; k < unavailableVariants.length; k++) {                 const unavailableVariant = unavailableVariants[k];for (let l = 0; l < variantOptions.length; l++) {                   const option = variantOptions[l];if (unavailableVariant.title === option.value) {                     option.remove();                   }                 }               }if (typeof observer === 'object' && typeof observer.disconnect === 'function') {                 observer.disconnect();               }             }           }const observer = new MutationObserver(mutationCallback);           const addToCartForm = document.querySelector('form[action*="/cart/add"]');mutationCallback();if (window.MutationObserver && addToCartForm.length) {             const config = { childList: true, subtree: true };if (typeof observer === 'object' && typeof observer.disconnect === 'function') {               observer.disconnect();             }observer.observe(addToCartForm, config);           }         }       }     }   } });