Skjul utsolgte varianter
Denne siden ble skrevet ut den May 14, 2024. Gå til https://help.shopify.com/nb/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/hide-sold-out-variants for nyeste versjon.
Advarsel
Eldre temaer er ikke tilgjengelige i Theme Store. Disse temaene har ikke funksjonene som er inkludert i Shopifys Online Store 2.0-temaer , og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.
Merk
Hvis du bruker et gratis tema fra Shopify , kan det hende du kan kontakte Shopify-brukerstøtte for hjelp med denne veiledningen. Det krever 15 minutters designtid. For å finne ut mer, kan du se _Støtte for temaer– .
Merk
Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.
Du kan forhindre kunder fra å velge utsolgte varianter ved å fjerne eller deaktivere disse variantene på produktsiden.
Begrensninger Tilpasningene som er beskrevet på denne siden fungerer ikke for følgende tilfeller:
Produktene dine har mer enn ett produktalternativ
Du bruker Express -temaet og har produktsiden stilt inn til å vise produkter i et overlegg
Seksjonerte og ikke-seksjonerte temaer
Merk
Trinnene i denne opplæringen varierer avhengig av om du bruker et kategorisert eller et ukategorisert tema. Et kategorisert tema lar deg dra og slippe for å sortere layouten på startsiden, noe du ikke kan gjøre med et ukategorisert tema.
For å finne ut om temaet ditt støtter seksjoner kan du gå til temaets Rediger kode -side. Hvis det er filer i Seksjoner -katalogen, bruker du et tema med seksjoner. Temaer uten seksjoner ble utgitt før oktoper 2016 og har ingen filer i Seksjoner -katalogen.
Hvis du bruker et tema med seksjoner, klikker du på Seksjonerte temaer -knappen og følger anvisningene. Hvis du bruker et eldre tema uten seksjoner, klikker du på Ikke-sesksjonerte temaer knappen og følger anvisningen.
Trinn for kategoriserte temaer Velg tema Trinnene for denne tilpasningen varierer avhengig av valgt tema. Klikk på knappen for temaet ditt før du følger anvisningene nedenfor:
Boundless
Trinnene for denne tilpasningen varierer avhengig av om du ønsker å skjule utsolgte varianter helt, eller bare deaktivere dem.
Skjul utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Deaktiver utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Brooklyn
Trinnene for denne tilpasningen varierer avhengig av om du ønsker å skjule utsolgte varianter helt, eller bare deaktivere dem.
Skjul utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Deaktiver utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Debut
Trinnene for denne tilpasningen varierer avhengig av om du ønsker å skjule utsolgte varianter helt, eller bare deaktivere dem.
Skjul utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Deaktiver utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Express
Trinnene for denne tilpasningen varierer avhengig av om du ønsker å skjule utsolgte varianter helt, eller bare deaktivere dem.
Skjul utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Oppsett -katalogen klikker du på theme.liquid
.
Finn koden </body>
. Lim inn følgende kode på en egen linje etter koden over:
< 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>
Klikk på Lagre .
Deaktiver utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
< 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>
Klikk på Lagre .
Minimal
Trinnene for denne tilpasningen varierer avhengig av om du ønsker å skjule utsolgte varianter helt, eller bare deaktivere dem.
Skjul utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Deaktiver utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Narrative
Trinnene for denne tilpasningen varierer avhengig av om du ønsker å skjule utsolgte varianter helt, eller bare deaktivere dem.
Skjul utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på custom.js
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Deaktiver utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Simple
Trinnene for denne tilpasningen varierer avhengig av om du ønsker å skjule utsolgte varianter helt, eller bare deaktivere dem.
Skjul utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Deaktiver utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Supply
Trinnene for denne tilpasningen varierer avhengig av om du ønsker å skjule utsolgte varianter helt, eller bare deaktivere dem.
Skjul utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Deaktiver utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Venture
Trinnene for denne tilpasningen varierer avhengig av om du ønsker å skjule utsolgte varianter helt, eller bare deaktivere dem.
Skjul utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Deaktiver utsolgte varianter
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Ressurser -katalogen klikker du på theme.js
eller theme.js.liquid
.
Nederst i filen limer du inn følgende kode:
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 );
}
}
}
}
}
});
Klikk på Lagre .
Trinn for ukategoriserte temaer Skjul utsolgte varianter Hvis du bruker et ukategorisert tema, kan du følge disse trinnene for å skjule utsolgte varianter på produktsiden.
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Utdrag -katalogen klikker du på Legg til et nytt utdrag .
Gi den nye kodebiten navnet remove-sold-out
:
I den nye kodebitfilen limer du inn følgende kode:
{% 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 %}
Klikk på Lagre .
I Oppsett -katalogen klikker du på theme.liquid
.
Nesten på slutten av filen, rett før </body>
-taggen, limer du inn følgende kode:
{% render 'remove-sold-out' %}
Klikk på Lagre .
Deaktiver utsolgte varianter Hvis du bruker et ukategorisert tema, kan du følge disse trinnene for å deaktivere utsolgte varianter. Variantene vises fortsatt på produktsiden, men de kan ikke velges.
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Utdrag -katalogen klikker du på Legg til et nytt utdrag .
Gi den nye kodebiten navnet disable-sold-out
:
I den nye kodebitfilen limer du inn følgende kode:
{% 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 %}
Klikk på Lagre .
I Oppsett -katalogen klikker du på theme.liquid
.
Nesten på slutten av filen, rett før </body>
-taggen, limer du inn følgende kode:
{% render 'disable-sold-out' %}
Klikk på Lagre .