隱藏售罄的子類
此頁面列印時間為 May 14, 2024。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/hide-sold-out-variants。
您可以在產品頁面上移除或停用售罄的子類,以防止顧客選取那些子類。
限制 此頁面列出的自訂功能不適用於下列情況:
您的產品有多個產品選項
您使用 Express 佈景主題,並將商品頁面設為以疊加層顯示商品
區段式佈景主題和非區段式佈景主題
備註
此教學課程的步驟會因您使用的是區段式 或非區段式 佈景主題而有所不同。區段式佈景主題可供您拖放以安排首頁的版面配置,而非區段式佈景主題則無法如此執行此操作。
若要確定您的佈景主題是否支援區段,請前往佈景主題的「編輯程式碼」 頁面。如果區段 目錄中有檔案,就表示您正在使用區段式佈景主題。非區段式佈景主題是在 2016 年 10 月前發佈,且在區段 目錄中沒有檔案。
如果您使用的是區段式佈景主題,請按一下「區段式佈景主題」 按鈕,並依照說明進行操作。如果您使用的是較舊的非區段式佈景主題,請按一下「非區段式佈景主題」 按鈕,並依照說明進行操作。
區段式佈景主題的步驟 選擇佈景主題 此自訂程序的步驟因佈景主題而異。按一下佈景主題的按鈕,然後依照以下指示操作:
Boundless
此自訂功能的步驟會因您是否要完全隱藏售罄的子類,或只將其停用而異。
隱藏售罄的子類
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 . setAttribute ( ' disabled ' , ' disabled ' );
}
}
}
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 );
}
}
}
}
}
});
點擊「儲存 」。
Brooklyn
此自訂功能的步驟會因您是否要完全隱藏售罄的子類,或只將其停用而異。
隱藏售罄的子類
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 radioButtons = section . querySelector ( ' .single-option-radio ' );
let variantOptions ;
if ( radioButtons ) {
variantOptions = section . querySelectorAll ( ' .single-option-radio input ' );
} else {
variantOptions = section . querySelectorAll ( ' .single-option-selector__radio 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 ) {
if ( radioButtons ) {
option . nextElementSibling . remove ();
}
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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 radioButtons = section . querySelector ( ' .single-option-radio ' );
let variantOptions ;
if ( radioButtons ) {
variantOptions = section . querySelectorAll ( ' .single-option-radio input ' );
} else {
variantOptions = section . querySelectorAll ( ' .single-option-selector__radio 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 ) {
if ( radioButtons ) {
option . nextElementSibling . option . setAttribute ( ' disabled ' , ' disabled ' );
}
option . setAttribute ( ' disabled ' , ' disabled ' );
}
}
}
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 );
}
}
}
}
}
});
點擊「儲存 」。
Debut
此自訂功能的步驟會因您是否要完全隱藏售罄的子類,或只將其停用而異。
隱藏售罄的子類
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 . setAttribute ( ' disabled ' , ' disabled ' );
}
}
}
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 );
}
}
}
}
}
});
點擊「儲存 」。
Express
此自訂功能的步驟會因您是否要完全隱藏售罄的子類,或只將其停用而異。
隱藏售罄的子類
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「版面配置」 目錄中,按一下 theme.liquid
。
找到 程式碼 </body>
。在其上方新的一行,貼上下列程式碼:
< script >
document . addEventListener ( ' DOMContentLoaded ' , function () {
const productJson = document . querySelectorAll ( ' [data-product-json] ' );
if ( productJson . length > 0 ) {
for ( let i = 0 ; i < productJson . length ; i ++ ) {
const current = productJson [ i ];
const section = current . closest ( ' [data-section-id] ' );
const currentJson = JSON . parse ( current . text );
if ( currentJson . options . length === 1 ) {
const unavailableVariants = [];
for ( let j = 0 ; j < currentJson . variants . length ; j ++ ) {
const variant = currentJson . variants [ j ];
if ( ! variant . available ) {
unavailableVariants . push ( variant );
}
}
if ( unavailableVariants . length > 0 ) {
const mutationCallback = function () {
const variantOptions = section . querySelectorAll ( ' .form__input--select 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 );
}
}
}
}
}
});
< /script>
點擊「儲存 」。
停用售罄的子類
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 theme.js
或 theme.js.liquid
。
在檔案底部貼上下列程式碼:
< script >
document . addEventListener ( ' DOMContentLoaded ' , function () {
const productJson = document . querySelectorAll ( ' [data-product-json] ' );
if ( productJson . length > 0 ) {
for ( let i = 0 ; i < productJson . length ; i ++ ) {
const current = productJson [ i ];
const section = current . closest ( ' [data-section-id] ' );
const currentJson = JSON . parse ( current . text );
if ( currentJson . options . length === 1 ) {
const unavailableVariants = [];
for ( let j = 0 ; j < currentJson . variants . length ; j ++ ) {
const variant = currentJson . variants [ j ];
if ( ! variant . available ) {
unavailableVariants . push ( variant );
}
}
if ( unavailableVariants . length > 0 ) {
const mutationCallback = function () {
const variantOptions = section . querySelectorAll ( ' .form__input--select 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 . setAttribute ( ' disabled ' , ' disabled ' );
}
}
}
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 );
}
}
}
}
}
});
< /script>
點擊「儲存 」。
Minimal
此自訂功能的步驟會因您是否要完全隱藏售罄的子類,或只將其停用而異。
隱藏售罄的子類
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 . setAttribute ( ' disabled ' , ' disabled ' );
}
}
}
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 );
}
}
}
}
}
});
點擊「儲存 」。
Narrative
此自訂功能的步驟會因您是否要完全隱藏售罄的子類,或只將其停用而異。
隱藏售罄的子類
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 custom.js
。
在檔案底部貼上下列程式碼:
document . addEventListener ( ' DOMContentLoaded ' , function () {
const productJson = document . querySelectorAll ( ' [data-product-json] ' );
if ( productJson . length > 0 ) {
for ( let i = 0 ; i < productJson . length ; i ++ ) {
const current = productJson [ i ];
const section = current . closest ( ' [data-section-id] ' );
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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 theme.js
或 theme.js.liquid
。
在檔案底部貼上下列程式碼:
document . addEventListener ( ' DOMContentLoaded ' , function () {
const productJson = document . querySelectorAll ( ' [data-product-json] ' );
if ( productJson . length > 0 ) {
for ( let i = 0 ; i < productJson . length ; i ++ ) {
const current = productJson [ i ];
const section = current . closest ( ' [data-section-id] ' );
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 . setAttribute ( ' disabled ' , ' disabled ' );
}
}
}
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 );
}
}
}
}
}
});
點擊「儲存 」。
Simple
此自訂功能的步驟會因您是否要完全隱藏售罄的子類,或只將其停用而異。
隱藏售罄的子類
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 . setAttribute ( ' disabled ' , ' disabled ' );
}
}
}
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 );
}
}
}
}
}
});
點擊「儲存 」。
Supply
此自訂功能的步驟會因您是否要完全隱藏售罄的子類,或只將其停用而異。
隱藏售罄的子類
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 . setAttribute ( ' disabled ' , ' disabled ' );
}
}
}
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 );
}
}
}
}
}
});
點擊「儲存 」。
Venture
此自訂功能的步驟會因您是否要完全隱藏售罄的子類,或只將其停用而異。
隱藏售罄的子類
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「資產」 目錄中,按一下 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 . setAttribute ( ' disabled ' , ' disabled ' );
}
}
}
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 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
命名新的程式碼片段 remove-sold-out
:
在新的程式碼片段檔案中,貼上下列程式碼:
{% if product.options.size == 1 %}
<script>
const addToCartForm = document . querySelector ( ' form[action="/cart/add"] ' );
if ( window . MutationObserver && addToCartForm !== null ) {
if ( typeof observer === ' object ' && typeof observer . disconnect === ' function ' ) {
observer . disconnect ();
}
var config = { childList : true , subtree : true };
var observer = new MutationObserver ( function () {
let variantOptions = Array . from ( document . querySelectorAll ( ' .single-option-selector option ' ));
{ % for variant in product . variants % }
{ % unless variant . available % }
variantOptions . forEach ( function ( element ) {
if ( element . value === {{ variant . title | json }}) {
element . remove ();
}
});
{ % endunless % }
{ % endfor % }
observer . disconnect ();
});
observer . observe ( addToCartForm , config );
}
</script>
{% endif %}
點擊「儲存 」。
在「版面配置」 目錄中,按一下 theme.liquid
。
在靠近檔案最下方的結束標籤 </body>
前,貼上下列程式碼:
{% render 'remove-sold-out' %}
點擊「儲存 」。
停用售罄的子類 如果您使用非區段式佈景主題,則可以按照下列步驟來停用售罄的子類。這些子類仍會顯示在產品頁面上,但無法選取。
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
命名新的程式碼片段 disable-sold-out
:
在新的程式碼片段檔案中,貼上下列程式碼:
{% if product.options.size == 1 %}
<script>
const addToCartForm = document . querySelector ( ' form[action="/cart/add"] ' );
if ( window . MutationObserver && addToCartForm !== null ) {
if ( typeof observer === ' object ' && typeof observer . disconnect === ' function ' ) {
observer . disconnect ();
}
var config = { childList : true , subtree : true };
var observer = new MutationObserver ( function () {
let variantOptions = Array . from ( document . querySelectorAll ( ' .single-option-selector option ' ));
{ % for variant in product . variants % }
{ % unless variant . available % }
variantOptions . forEach ( function ( element ) {
if ( element . value === {{ variant . title | json }}) {
element . setAttribute ( ' disabled ' , '' );
}
});
{ % endunless % }
{ % endfor % }
observer . disconnect ();
});
observer . observe ( addToCartForm , config );
}
</script>
{% endif %}
點擊「儲存 」。
在「版面配置」 目錄中,按一下 theme.liquid
。
在靠近檔案最下方的結束標籤 </body>
前,貼上下列程式碼:
{% render 'disable-sold-out' %}
點擊「儲存 」。