Versioiden valitseminen niiden kuvia klikkaamalla
Tämä sivu on tulostettu May 02, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/select-variants-click?utm_campaign=Gurus&utm_medium=link&utm_source=gurucopy.
Huomio
Vanhoja teemoja ei ole saatavilla Theme Storessa. Näissä teemoissa ei ole Shopifyn Online Store 2.0 -teemoihin sisältyviä ominaisuuksia, eikä niihin tehdä muita päivityksiä kuin turvallisuuskorjauksia.
Huomaa
Jos käytät Shopifyn ilmaista teemaa , voit ottaa yhteyttä Shopify-tukeen tutoriaaliin liittyvissä asioissa. Tähän tarvitaan 15 minuuttia suunnitteluaikaa. Lisätietoja on kohdassa Teemojen tuki .
Huomaa
tämä mukautus koskee vain vanhoja Shopify-teemoja, eikä sitä sovelleta Online Store 2.0 -teemoihin.
Tavallisesti versiot valitaan pudotusvalikosta. Saatat kuitenkin haluta, että asiakkaat voivat valita tuoteversion tuoteversiokuvaa klikkaamalla.
Huomio
Tämä ratkaisu ei toimi Boundless -, Express - ja Narrative -teemoissa. Jos käytät Brooklyn -teemaa, ratkaisu toimii, mutta sinun on asetettava tuotesivusi valitsintyypiksi pudotusvalikko.
Jokaisen versiokuvan on oltava yksilöllinen, jotta tämä ratkaisu toimii.
Useimmat teemat päivittävät pääkuvan, kun kuvallinen versio valitaan. Päivitys ei kuitenkaan koskaan tapahdu molempiin suuntiin, koska mikäli versiovalikoima päivittyisi automaattisesti pääkuvan muuttuessa, ostajat saattaisivat vahingossa lisätä väärän tuoteversion ostoskoriin. Jatka siis varoen tämän mukautuksen käyttämistä kaupassasi.
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
Avaa Sisällöt -kansiossasi theme.js
- tai theme.js.liquid
-tiedosto.
Liitä tiedoston loppuun seuraava koodi:
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 (),
);
}
Klikkaa Tallenna .
Napauta Shopify-sovelluksessa … -painiketta.
Napauta myyntikanavat -osiossa Verkkokauppa .
Napauta Hallitse teemoja .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
Avaa Sisällöt -kansiossasi theme.js
- tai theme.js.liquid
-tiedosto.
Liitä tiedoston loppuun seuraava koodi:
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 (),
);
}
Klikkaa Tallenna .
Napauta Shopify-sovelluksessa … -painiketta.
Napauta myyntikanavat -osiossa Verkkokauppa .
Napauta Hallitse teemoja .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
Avaa Sisällöt -kansiossasi theme.js
- tai theme.js.liquid
-tiedosto.
Liitä tiedoston loppuun seuraava koodi:
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 (),
);
}
Klikkaa Tallenna .