Velg varianter ved å klikke på det tilhørende bildet
Denne siden ble skrevet ut den May 02, 2024. Gå til https://help.shopify.com/nb/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/select-variants-click?utm_campaign=Gurus&utm_medium=link&utm_source=gurucopy 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.
Vanligvis velges varianter fra en rullegardinmeny. Du ønsker kanskje at kundene skal kunne velge en produktvariant ved å klikke på et variantbilde .
Advarsel
Denne løsningen fungerer ikke for temaene Boundless , Express eller Narrative . Hvis du bruker Brooklyn -temaet, vil løsningen fungere, men du må angi velgertype til rullegardin på produktsiden.
Hvert variantbilde må være unikt for at denne løsningen skal fungere.
De fleste temaer oppdaterer hovedbildet når en variant med et bilde velges. Oppdateringen skjer imidlertid aldri i begge retninger, fordi dersom en endring av hovedbildet automatisk oppdaterer variantvalget kan det forvirre kjøperne og gjøre at de legger feil variant i handlekurven. Derfor må du være forsiktig når du legger til denne tilpasningen i butikken.
Trinn:
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 .
Åpne theme.js
- eller theme.js.liquid
-filen i Materiell -mappen.
Nederst i filen limer du inn følgende kode:
const selectVariantByClickingImage = {
// Create variant images from productJson object
_createVariantImage : function ( product ) {
const variantImageObject = {};
product . variants . forEach (( variant ) => {
if (
typeof variant . featured_image !== ' undefined ' &&
variant . featured_image !== null
) {
const variantImage = variant . featured_image . src
. split ( ' ? ' )[ 0 ]
. replace ( /http ( s )? :/ , '' );
variantImageObject [ variantImage ] =
variantImageObject [ variantImage ] || {};
product . options . forEach (( option , index ) => {
const optionValue = variant . options [ index ];
const optionKey = `option- ${ index } ` ;
if (
typeof variantImageObject [ variantImage ][ optionKey ] === ' undefined '
) {
variantImageObject [ variantImage ][ optionKey ] = optionValue ;
} else {
const oldValue = variantImageObject [ variantImage ][ optionKey ];
if ( oldValue !== null && oldValue !== optionValue ) {
variantImageObject [ variantImage ][ optionKey ] = null ;
}
}
});
}
});
return variantImageObject ;
},
_updateVariant : function ( event , id , product , variantImages ) {
const arrImage = event . target . src
. split ( ' ? ' )[ 0 ]
. replace ( /http ( s )? :/ , '' )
. split ( ' . ' );
const strExtention = arrImage . pop ();
const strRemaining = arrImage . pop (). replace ( /_ [ a-zA-Z0-9@ ] +$/ , '' );
const strNewImage = ` ${ arrImage . join ( ' . ' )} . ${ strRemaining } . ${ strExtention } ` ;
if ( typeof variantImages [ strNewImage ] !== ' undefined ' ) {
product . variants . forEach (( option , index ) => {
const optionValue = variantImages [ strNewImage ][ `option- ${ index } ` ];
if ( optionValue !== null && optionValue !== undefined ) {
const selects = document . querySelectorAll ( ' # ' + id + ' [class*=single-option-selector] ' );
const options = selects [ index ]. options ;
for ( let option , n = 0 ; ( option = options [ n ]); n += 1 ) {
if ( option . value === optionValue ) {
selects [ index ]. selectedIndex = n ;
selects [ index ]. dispatchEvent ( new Event ( ' change ' ));
break ;
}
}
}
});
}
},
_selectVariant : function () {
const productJson = document . querySelectorAll ( ' [id^=ProductJson- ' );
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const thumbnails = document . querySelectorAll ( ' # ' + sectionId + ' img[src*="/cdn/"] ' );
if ( thumbnails . length > 1 ) {
const productObject = JSON . parse ( product . innerHTML );
const variantImages = this . _createVariantImage ( productObject );
// need to check variants > 1
if ( productObject . variants . length > 1 ) {
thumbnails . forEach (( thumbnail ) => {
thumbnail . addEventListener ( ' click ' , ( e ) =>
this . _updateVariant ( e , sectionId , productObject , variantImages ),
);
});
}
}
});
}
},
};
if ( document . readyState !== ' loading ' ) {
selectVariantByClickingImage . _selectVariant ();
} else {
document . addEventListener (
' DOMContentLoaded ' ,
selectVariantByClickingImage . _selectVariant (),
);
}
Klikk på Lagre .
Trykk på … -knappen fra Shopify-appen .
I Salgskanaler -seksjonen trykker du på Nettbutikk .
Trykk på Administrer temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
Åpne theme.js
- eller theme.js.liquid
-filen i Materiell -mappen.
Nederst i filen limer du inn følgende kode:
const selectVariantByClickingImage = {
// Create variant images from productJson object
_createVariantImage : function ( product ) {
const variantImageObject = {};
product . variants . forEach (( variant ) => {
if (
typeof variant . featured_image !== ' undefined ' &&
variant . featured_image !== null
) {
const variantImage = variant . featured_image . src
. split ( ' ? ' )[ 0 ]
. replace ( /http ( s )? :/ , '' );
variantImageObject [ variantImage ] =
variantImageObject [ variantImage ] || {};
product . options . forEach (( option , index ) => {
const optionValue = variant . options [ index ];
const optionKey = `option- ${ index } ` ;
if (
typeof variantImageObject [ variantImage ][ optionKey ] === ' undefined '
) {
variantImageObject [ variantImage ][ optionKey ] = optionValue ;
} else {
const oldValue = variantImageObject [ variantImage ][ optionKey ];
if ( oldValue !== null && oldValue !== optionValue ) {
variantImageObject [ variantImage ][ optionKey ] = null ;
}
}
});
}
});
return variantImageObject ;
},
_updateVariant : function ( event , id , product , variantImages ) {
const arrImage = event . target . src
. split ( ' ? ' )[ 0 ]
. replace ( /http ( s )? :/ , '' )
. split ( ' . ' );
const strExtention = arrImage . pop ();
const strRemaining = arrImage . pop (). replace ( /_ [ a-zA-Z0-9@ ] +$/ , '' );
const strNewImage = ` ${ arrImage . join ( ' . ' )} . ${ strRemaining } . ${ strExtention } ` ;
if ( typeof variantImages [ strNewImage ] !== ' undefined ' ) {
product . variants . forEach (( option , index ) => {
const optionValue = variantImages [ strNewImage ][ `option- ${ index } ` ];
if ( optionValue !== null && optionValue !== undefined ) {
const selects = document . querySelectorAll ( ' # ' + id + ' [class*=single-option-selector] ' );
const options = selects [ index ]. options ;
for ( let option , n = 0 ; ( option = options [ n ]); n += 1 ) {
if ( option . value === optionValue ) {
selects [ index ]. selectedIndex = n ;
selects [ index ]. dispatchEvent ( new Event ( ' change ' ));
break ;
}
}
}
});
}
},
_selectVariant : function () {
const productJson = document . querySelectorAll ( ' [id^=ProductJson- ' );
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const thumbnails = document . querySelectorAll ( ' # ' + sectionId + ' img[src*="/files/"] ' );
if ( thumbnails . length > 1 ) {
const productObject = JSON . parse ( product . innerHTML );
const variantImages = this . _createVariantImage ( productObject );
// need to check variants > 1
if ( productObject . variants . length > 1 ) {
thumbnails . forEach (( thumbnail ) => {
thumbnail . addEventListener ( ' click ' , ( e ) =>
this . _updateVariant ( e , sectionId , productObject , variantImages ),
);
});
}
}
});
}
},
};
if ( document . readyState !== ' loading ' ) {
selectVariantByClickingImage . _selectVariant ();
} else {
document . addEventListener (
' DOMContentLoaded ' ,
selectVariantByClickingImage . _selectVariant (),
);
}
Klikk på Lagre .
Trykk på … -knappen fra Shopify-appen .
I Salgskanaler -seksjonen trykker du på Nettbutikk .
Trykk på Administrer temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
Åpne theme.js
- eller theme.js.liquid
-filen i Materiell -mappen.
Nederst i filen limer du inn følgende kode:
const selectVariantByClickingImage = {
// Create variant images from productJson object
_createVariantImage : function ( product ) {
const variantImageObject = {};
product . variants . forEach (( variant ) => {
if (
typeof variant . featured_image !== ' undefined ' &&
variant . featured_image !== null
) {
const variantImage = variant . featured_image . src
. split ( ' ? ' )[ 0 ]
. replace ( /http ( s )? :/ , '' );
variantImageObject [ variantImage ] =
variantImageObject [ variantImage ] || {};
product . options . forEach (( option , index ) => {
const optionValue = variant . options [ index ];
const optionKey = `option- ${ index } ` ;
if (
typeof variantImageObject [ variantImage ][ optionKey ] === ' undefined '
) {
variantImageObject [ variantImage ][ optionKey ] = optionValue ;
} else {
const oldValue = variantImageObject [ variantImage ][ optionKey ];
if ( oldValue !== null && oldValue !== optionValue ) {
variantImageObject [ variantImage ][ optionKey ] = null ;
}
}
});
}
});
return variantImageObject ;
},
_updateVariant : function ( event , id , product , variantImages ) {
const arrImage = event . target . src
. split ( ' ? ' )[ 0 ]
. replace ( /http ( s )? :/ , '' )
. split ( ' . ' );
const strExtention = arrImage . pop ();
const strRemaining = arrImage . pop (). replace ( /_ [ a-zA-Z0-9@ ] +$/ , '' );
const strNewImage = ` ${ arrImage . join ( ' . ' )} . ${ strRemaining } . ${ strExtention } ` ;
if ( typeof variantImages [ strNewImage ] !== ' undefined ' ) {
product . variants . forEach (( option , index ) => {
const optionValue = variantImages [ strNewImage ][ `option- ${ index } ` ];
if ( optionValue !== null && optionValue !== undefined ) {
const selects = document . querySelectorAll ( ' # ' + id + ' [class*=single-option-selector] ' );
const options = selects [ index ]. options ;
for ( let option , n = 0 ; ( option = options [ n ]); n += 1 ) {
if ( option . value === optionValue ) {
selects [ index ]. selectedIndex = n ;
selects [ index ]. dispatchEvent ( new Event ( ' change ' ));
break ;
}
}
}
});
}
},
_selectVariant : function () {
const productJson = document . querySelectorAll ( ' [id^=ProductJson- ' );
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const thumbnails = document . querySelectorAll ( ' # ' + sectionId + ' img[src*="/files/"] ' );
if ( thumbnails . length > 1 ) {
const productObject = JSON . parse ( product . innerHTML );
const variantImages = this . _createVariantImage ( productObject );
// need to check variants > 1
if ( productObject . variants . length > 1 ) {
thumbnails . forEach (( thumbnail ) => {
thumbnail . addEventListener ( ' click ' , ( e ) =>
this . _updateVariant ( e , sectionId , productObject , variantImages ),
);
});
}
}
});
}
},
};
if ( document . readyState !== ' loading ' ) {
selectVariantByClickingImage . _selectVariant ();
} else {
document . addEventListener (
' DOMContentLoaded ' ,
selectVariantByClickingImage . _selectVariant (),
);
}
Klikk på Lagre .