Varyasyonları görsellerine tıklayarak seçin
Bu sayfanın yazdırılma zamanı: May 03, 2024. Geçerli sürüm için https://help.shopify.com/tr/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/select-variants-click?utm_campaign=Gurus&utm_medium=link&utm_source=gurucopy adresini ziyaret edin.
Dikkat
Vintage temalar Shopify Tema Mağazası'nda bulunmaz.Bu temalar, Shopify'ın Online Store 2.0 temalarında yer alan özellikleri içermez ve güvenlik düzeltmelerinin dışında güncelleme almaz.
Not
Bu özelleştirme, vintage Shopify temaları içindir ve Online Store 2.0 temalarına uygulanmaz.
Normalde varyasyonlar bir açılır menüden seçilir. Müşterilerinizin bir varyasyon resmine tıklayarak bir ürün çeşidi seçebilmesini isteyebilirsiniz.
Dikkat
Bu çözüm Boundless , Express veya Narrative temalarında çalışmaz. Brooklyn temasını kullanıyorsanız çözüm çalışır, ancak seçici türünü ürün sayfasında açılır sayfa olarak ayarlamanız gerekir.
Bu çözümün çalışması için her bir varyasyon görseli benzersiz olmalıdır.
Çoğu tema, görseli olan bir varyasyon seçildiğinde ana görseli günceller. Ancak, ana görselin otomatik olarak bir varyasyon seçimini güncellemesi, alışveriş yapanların kafasını karıştırıp sepete yanlış varyasyonu eklemesine yol açabileceğinden güncelleme hiçbir zaman her iki yönde de gerçekleşmez. Bu nedenle, bu özelleştirmeyi mağazanıza uygularken dikkatli şekilde ilerleyin.
Adımlar:
Shopify yöneticinizde Online Mağaza > Temalar 'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle 'ye tıklayın.
Öğeler klasörünüzden theme.js
veya theme.js.liquid
dosyasını açın.
Dosyanın en altına aşağıdaki kodu yapıştırın:
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 (),
);
}
Kayıt yap ' a tıklayın.
Shopify uygulamasında , … düğmesine dokunun.
Satış Kanalları bölümünde online mağaza ' ya dokunun.
Temaları Yönet ' e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle 'ye tıklayın.
Öğeler klasörünüzden theme.js
veya theme.js.liquid
dosyasını açın.
Dosyanın en altına aşağıdaki kodu yapıştırın:
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 (),
);
}
Kayıt yap ' a tıklayın.
Shopify uygulamasında , … düğmesine dokunun.
Satış Kanalları bölümünde online mağaza ' ya dokunun.
Temaları Yönet ' e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle 'ye tıklayın.
Öğeler klasörünüzden theme.js
veya theme.js.liquid
dosyasını açın.
Dosyanın en altına aşağıdaki kodu yapıştırın:
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 (),
);
}
Kayıt yap ' a tıklayın.