在shopify产品页面裳佚或禁用售罄的多属性办法
隐藏售罄多属性
备注
若是您使用 Shopify 的免费模板，，，，， ， ，，您可以联系 Shopify 支持团队获得关于此教程的资助 。 。。。。 。。。此教程需要 15 分钟的设计时间 。 。。。。 。。。若要相识详情，，，，， ， ，，请参阅 Support for themes 。 。。。。 。。。
备注
此自界说用于复古 Shopify 模板，，，，， ， ，，不适用于“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-id="' + 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); } } } } } });点击生涯 。 。。。。 。。。
Shopify商户官网原文详情：
Hide sold-out variants
Note
If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.
Note
This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.
Find out your theme's architecture version
Explore Online Store 2.0 theme customizations
You can prevent customers from selecting sold-out variants by removing or disabling those variants on the product page.
On this page
Limitations
Select your theme
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
Note
The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme lets you drag and drop to arrange the layout of your home page, and a non-sectioned theme doesn't.
To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.
If you are using a sectioned theme, click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, click the Non-sectioned themes button and follow the instructions.
Sectioned themes
Non-sectioned themes
Select your theme
The steps for this customization vary depending on your theme. Click the button for your theme before following the instructions below:
Boundless
Brooklyn
Debut
Express
Minimal
Narrative
Simple
Supply
Venture
Boundless
The steps for this customization vary depending on whether you want to completely hide sold-out variants, or just disable them. Click the button for your preference before following the instructions below:
Hide
Disable
Hide sold-out variants
Follow these steps to apply the customization to Boundless:
PC：
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Assets directory, click
theme.jsortheme.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.jsortheme.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.jsortheme.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-id="' + 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); } } } } } });Click Save.
文章内容泉源：Shopify商户官方网站