Verberg uitverkochte varianten
Deze pagina is afgedrukt op Mar 19, 2024. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/hide-sold-out-variants.
Let op
Vintage thema's zijn niet beschikbaar in de Theme Store. Deze thema's hebben niet de functies die in de Online Store 2.0-thema's van Shopify zijn opgenomen en de gratis vintage thema's van Shopify krijgen alleen nog updates als dit voor de beveiliging nodig is.
Opmerking
Deze aanpassing is voor vintage thema's van Shopify en is niet van toepassing op Online Store 2.0-thema's.
Je kunt voorkomen dat klanten uitverkochte varianten selecteren door deze varianten op de productpagina te verwijderen of uit te schakelen.
Beperkingen De op deze pagina beschreven aanpassingen werken niet in de volgende gevallen:
Je producten hebben meer dan één productoptie
Je gebruikt het Express -thema en je hebt de productpagina ingesteld om producten in een overlay weer te geven.
Thema's met en zonder secties
Opmerking
de stappen in deze tutorial verschillen al naar gelang of je een thema met secties of zonder secties gebruikt. In een thema met secties kun je verslepen om de pagina-indeling van je homepage te bepalen en in een thema zonder secties kan dat niet.
Ga naar de pagina Code bewerken van je thema om erachter te komen of je thema secties ondersteunt. Gebruik een thema met secties als de directory Secties bestanden bevat. Thema's zonder secties werden gebruikt voor oktober 2016 en de directory Secties van deze thema's bevat geen bestanden.
Als je een sectiethema gebruikt, klik op de knop Sectiethema's en volg de instructies. Als je een ouder, niet-gesegmenteerd thema gebruikt, klik op de knop Thema's zonder secties en volg de instructies.
Stappen voor thema's met secties Je thema selecteren De stappen voor deze aanpassing variëren naargelang je thema. Klik op de knop voor je thema voordat je de onderstaande instructies volgt:
Boundless
De stappen voor deze aanpassing variëren afhankelijk van of je uitverkochte varianten volledig wilt verbergen of ze gewoon wilt uitschakelen.
Verberg uitverkochte varianten
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 );
}
}
}
}
}
});
Klik op Opslaan .
Uitverkochte varianten uitschakelen
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 . 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 );
}
}
}
}
}
});
Klik op Opslaan .
Brooklyn
De stappen voor deze aanpassing variëren afhankelijk van of je uitverkochte varianten volledig wilt verbergen of ze gewoon wilt uitschakelen.
Verberg uitverkochte varianten
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 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 );
}
}
}
}
}
});
Klik op Opslaan .
Uitverkochte varianten uitschakelen
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 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 );
}
}
}
}
}
});
Klik op Opslaan .
Debut
De stappen voor deze aanpassing variëren afhankelijk van of je uitverkochte varianten volledig wilt verbergen of ze gewoon wilt uitschakelen.
Verberg uitverkochte varianten
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 );
}
}
}
}
}
});
Klik op Opslaan .
Uitverkochte varianten uitschakelen
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 . 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 );
}
}
}
}
}
});
Klik op Opslaan .
Express
De stappen voor deze aanpassing variëren afhankelijk van of je uitverkochte varianten volledig wilt verbergen of ze gewoon wilt uitschakelen.
Verberg uitverkochte varianten
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Opmaak op theme.liquid
.
Zoek de code </body>
. Plak de volgende code in een nieuwe regel daarboven:
< 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>
Klik op Opslaan .
Uitverkochte varianten uitschakelen
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende code:
< 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>
Klik op Opslaan .
Minimaal
De stappen voor deze aanpassing variëren afhankelijk van of je uitverkochte varianten volledig wilt verbergen of ze gewoon wilt uitschakelen.
Verberg uitverkochte varianten
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 );
}
}
}
}
}
});
Klik op Opslaan .
Uitverkochte varianten uitschakelen
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 . 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 );
}
}
}
}
}
});
Klik op Opslaan .
Narrative
De stappen voor deze aanpassing variëren afhankelijk van of je uitverkochte varianten volledig wilt verbergen of ze gewoon wilt uitschakelen.
Verberg uitverkochte varianten
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op custom.js
.
Plak onderin het bestand de volgende code:
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 );
}
}
}
}
}
});
Klik op Opslaan .
Uitverkochte varianten uitschakelen
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende code:
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 );
}
}
}
}
}
});
Klik op Opslaan .
Simple
De stappen voor deze aanpassing variëren afhankelijk van of je uitverkochte varianten volledig wilt verbergen of ze gewoon wilt uitschakelen.
Verberg uitverkochte varianten
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 );
}
}
}
}
}
});
Klik op Opslaan .
Uitverkochte varianten uitschakelen
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 . 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 );
}
}
}
}
}
});
Klik op Opslaan .
Supply
De stappen voor deze aanpassing variëren afhankelijk van of je uitverkochte varianten volledig wilt verbergen of ze gewoon wilt uitschakelen.
Verberg uitverkochte varianten
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 );
}
}
}
}
}
});
Klik op Opslaan .
Uitverkochte varianten uitschakelen
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 . 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 );
}
}
}
}
}
});
Klik op Opslaan .
Venture
De stappen voor deze aanpassing variëren afhankelijk van of je uitverkochte varianten volledig wilt verbergen of ze gewoon wilt uitschakelen.
Verberg uitverkochte varianten
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 );
}
}
}
}
}
});
Klik op Opslaan .
Uitverkochte varianten uitschakelen
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Assets op theme.js
of theme.js.liquid
.
Plak onderin het bestand de volgende 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 . 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 );
}
}
}
}
}
});
Klik op Opslaan .
Stappen voor thema's zonder secties Verberg uitverkochte varianten Als je een thema zonder secties gebruikt, kun je de volgende stappen volgen om uitverkochte varianten op de productpagina te verbergen.
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Fragmenten op Een nieuw fragment toevoegen .
Geef het nieuwe fragment de naam remove-sold-out
:
Plak de volgende code in je nieuwe fragmentbestand:
{% 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 %}
Klik op Opslaan .
Klik in de directory Opmaak op theme.liquid
.
Plak de volgende code aan het eind van het bestand, vlak voor de sluitende tag </body>
:
{% render 'remove-sold-out' %}
Klik op Opslaan .
Uitverkochte varianten uitschakelen Als je een thema zonder secties gebruikt, kun je deze stappen volgen om uitverkochte varianten uit te schakelen. De varianten worden nog steeds weergegeven op de productpagina, maar kunnen niet worden geselecteerd.
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's .
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken .
Klik in de directory Fragmenten op Een nieuw fragment toevoegen .
Geef het nieuwe fragment de naam disable-sold-out
:
Plak de volgende code in je nieuwe fragmentbestand:
{% 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 %}
Klik op Opslaan .
Klik in de directory Opmaak op theme.liquid
.
Plak de volgende code aan het eind van het bestand, vlak voor de sluitende tag </body>
:
{% render 'disable-sold-out' %}
Klik op Opslaan .