Ürün sayfalarında SKU numaralarını gösterme
Bu sayfanın yazdırılma zamanı: Apr 20, 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/show-sku 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.
SKU'lar (stok bulundurma birimleri), ürünleri tanımlamaya ve envanteri izlemeye yardımcı olmak için kullanılan, genellikle alfasayısal sayılardır. Bir mağaza SKU'ları kullanıyorsa, her bir ürün varyasyonuna benzersiz bir numara atanır. Tema kodunuzu düzenleyerek ürün sayfalarınızda varyasyonlar için SKU numaralarını gösterebilirsiniz:
Bölümlere ayrılmış ve ayrılmamış temalar
Not: Bu eğitimin adımları bölümlere ayrılmış tema bir tema mı yoksa bölümlere ayrılmamış bir tema mı kullandığınıza bağlı olarak değişiklik gösterir. Bölümlere ayrılmış temada, ana sayfanızın düzenini değiştirmeniz için öğeleri sürükleyip bırakabilirsiniz. Bu işlemi bölümlere ayrılmamış temada yapamazsınız.
Temanızın, bölümleri destekleyip desteklemediğini öğrenmek için temanızın Kodu düzenle sayfasına gidin. Bölümler dizininde dosyalar varsa bu, bölümlendirilmiş bir tema kullandığınız anlamına gelir. Bölümlendirilmemiş temalar Ekim 2016'dan önce kullanıma sunulmuştur ve Bölümler dizininde bu temaların dosyaları yoktur.
Bölümlendirilmiş bir tema kullanıyorsanız Sectioned themes (Bölümlendirilmiş temalar) düğmesine tıklayın ve talimatları izleyin. Daha eski ve bölümlendirilmemiş bir tema kullanıyorsanız Non-sectioned themes (Bölümlendirilmemiş temalar) düğmesine tıklayın ve talimatları izleyin.
Bölümlere ayrılmış temalar için adımlar Ürün sayfalarında SKU numaralarını gösterme
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.
Bölümler dizininde product.liquid
veya product-template.liquid
dosyasına tıklayın.
Aşağıdaki Liquid etiketini bulun :
{{ product . title }}
Bu kod, ürün sayfanıza ürün başlıklarınızı işler.
{{ product.title }}
kodunu içeren kod satırının altına aşağıdaki kodu yapıştırın:
{% assign current_variant = product . selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant . sku }} </span>
Kayıt yap ' a tıklayın.
Temanızı seçme Bu özelleştirmeye yönelik sıradaki adımlar, temanıza göre değişiklik gösterir. Temanıza ilişkin düğmeye basın ve talimatları uygulayın.
Boundless için adımlar
Assets (Öğeler) dizininde theme.js.liquid
seçeneğine tıklayın.
variant.sku
ifadesini arayın :
variant.sku
ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
variant.sku
ifadesini bulamıyorsanız sonraki adıma geçin.
Dosyanın en altına aşağıdaki kodu yapıştırın:
document . addEventListener ( ' DOMContentLoaded ' , () => {
setTimeout ( function () {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
}, 100 );
});
Kayıt yap ' a tıklayın.
Brooklyn için adımlar
Assets (Öğeler) dizininde theme.js.liquid
seçeneğine tıklayın.
variant.sku
ifadesini arayın :
variant.sku
ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
variant.sku
ifadesini bulamıyorsanız sonraki adıma geçin.
Dosyanın en altına aşağıdaki kodu yapıştırın:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const productInfo = JSON . parse ( product . innerHTML );
const radioButtons = document . querySelector ( ' .single-option-radio ' );
let inputSelects ;
if ( radioButtons !== null ) {
inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-radio ' )];
} else {
inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector__radio ' )];
}
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
if ( radioButtons !== null ) {
inputValues . push ( input . firstElementChild . value );
} else {
inputValues . push ( input . value );
}
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . target . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . currentTarget );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Kayıt yap ' a tıklayın.
Debut için adımlar
Assets (Öğeler) dizininde theme.js
seçeneğine tıklayın.
variant.sku
ifadesini arayın :
variant.sku
ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
variant.sku
ifadesini bulamıyorsanız sonraki adıma geçin.
Dosyanın en altına aşağıdaki kodu yapıştırın:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Kayıt yap ' a tıklayın.
Express için adımlar
Düzen dizininde theme.liquid
seçeneğine tıklayın.
Kapatma </body>
etiketini bulun .
Kapatma </body>
etiketinin hemen üstündeki satıra aşağıdaki kodu yapıştırın:
<script>
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [data-product-json] ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = " shopify-section- " + product . closest ( ' [data-section-id] ' ). dataset . sectionId ;
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .form__input--select ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
</script>
Kayıt yap ' a tıklayın.
Minimal için adımlar
Assets (Öğeler) dizininde theme.js
seçeneğine tıklayın.
variant.sku
ifadesini arayın :
variant.sku
ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
variant.sku
ifadesini bulamıyorsanız sonraki adıma geçin.
Dosyanın en altına aşağıdaki kodu yapıştırın:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Kayıt yap ' a tıklayın.
Narrative için adımlar
Assets (Öğeler) dizininde custom.js
seçeneğine tıklayın.
Dosyanın en altına aşağıdaki kodu yapıştırın:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [data-product-json] ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = " shopify-section- " + product . closest ( ' [data-section-id] ' ). dataset . sectionId ;
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Kayıt yap ' a tıklayın.
Simple için adımlar
Assets (Öğeler) dizininde theme.js.liquid
seçeneğine tıklayın.
variant.sku
ifadesini arayın :
variant.sku
ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
variant.sku
ifadesini bulamıyorsanız sonraki adıma geçin.
Dosyanın en altına aşağıdaki kodu yapıştırın:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Kayıt yap ' a tıklayın.
Supply için adımlar
Assets (Öğeler) dizininde theme.js.liquid
seçeneğine tıklayın.
variant.sku
ifadesini arayın :
variant.sku
ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
variant.sku
ifadesini bulamıyorsanız sonraki adıma geçin.
Dosyanın en altına aşağıdaki kodu yapıştırın:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Kayıt yap ' a tıklayın.
Venture için adımlar
Assets (Öğeler) dizininde theme.js
seçeneğine tıklayın.
variant.sku
ifadesini arayın :
variant.sku
ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
variant.sku
ifadesini bulamıyorsanız sonraki adıma geçin.
Dosyanın en altına aşağıdaki kodu yapıştırın:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Kayıt yap ' a tıklayın.
Yöneticiden ürün varyasyonlarınıza SKU numaraları ekleme Ürün sayfalarınızda SKU'ların görünmesi için Shopify yöneticisinden ürün çeşitlerinize SKU numaraları eklemeniz gerekir.
Shopify yöneticinizden Ürünler 'e gidin.
Düzenlemek istediğiniz ürüne tıklayın.
Birden fazla varyasyonu olan ürünler için Varyasyonlar bölümünde SKU numaralarınızı ekleyin:
Kayıt yap ' a tıklayın.
Bölümlere ayrılmamış temalar için adımlar Ürün sayfalarında SKU numaralarını gösterme
Not
Bu özelleştirme, bölümlere ayrılmamış Boundless temasında kullanılamaz. Bölümlere ayrılmamış temalar Ekim 2016'dan önce yayınlanmıştır ve Bölümler dizininde dosyaları yoktur.
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.
Şablonlar dizininde product.liquid
seçeneğine tıklayın.
Aşağıdaki Liquid etiketini bulun :
{{ product . title }}
Bu kod, ürün sayfanıza ürün başlıklarınızı işler.
{{ product.title }}
içeren kodun altına yeni bir satır açarak aşağıdaki kodu yapıştırın:
{% assign current_variant = product . selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant . sku }} </span>
Kayıt yap ' a tıklayın.
Brooklyn veya Venture dışında ücretsiz bir Shopify teması kullanıyorsanız aşağıdaki kod satırını bulun :
var selectCallback = function ( variant , selector ) {
Yukarıda yer alan kod satırını product.liquid
içerisinde bulamıyorsanız, bunu Düzen dizininde theme.liquid
içerisinde bulabilirsiniz.
Brooklyn ve Venture: Brooklyn veya Venture kullanıyorsanız farklı bir kod satırı bulup düzenlemeniz gerekir. Assets (Öğeler) dizininde theme.js.liquid
dosyasına tıklayın ve aşağıdaki kod satırını bulun :
theme . productVariantCallback = function ( variant , selector ) {
Altına yeni bir satıra aşağıdaki kodu yapıştırın:
if ( variant ) {
document . querySelector ( ' .variant-sku ' ). innerText = variant . sku ;
}
else {
document . querySelector ( ' .variant-sku ' ). innerText = '' ;
}
Kodunuz aşağıdaki gibi olmalıdır:
var selectCallback = function ( variant , selector ) {
if ( variant ) {
document . querySelector ( ' .variant-sku ' ). innerText = variant . sku ;
}
else {
document . querySelector ( ' .variant-sku ' ). innerText = '' ;
}
self . productPage ({
money_format : theme . moneyFormat ,
variant : variant ,
selector : selector ,
translations : {
add_to_cart : theme . productStrings . addToCart ,
sold_out : theme . productStrings . soldOut ,
unavailable : theme . productStrings . unavailable
}
});
};
Kayıt yap ' a tıklayın.
Yöneticiden ürün varyasyonlarınıza SKU numaraları ekleme Ürün sayfalarınızda SKU'ların görünmesi için Shopify yöneticisinden ürün çeşitlerinize SKU numaraları eklemeniz gerekir.
Shopify yöneticinizden Ürünler 'e gidin.
Düzenlemek istediğiniz ürüne tıklayın.
Birden fazla varyasyonu olan ürünler için SKU numaralarınızı Varyasyonlar bölümünden ekleyin: Varyasyonları olmayan ürünler için SKU numaranızı Envanter bölümünden ekleyin:
Kayıt yap ' a tıklayın.