Pokaż numery SKU na stronach produktów
Ta strona została wydrukowana dnia Apr 19, 2024. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku.
Uwaga
Klasyczne szablony nie są dostępne w Sklepie z szablonami. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0 , a darmowe klasyczne szablony Shopify nie są aktualizowane oprócz poprawek bezpieczeństwa.
Uwaga
To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.
SKU (jednostki magazynowe) to numery, zazwyczaj alfanumeryczne, które służą do identyfikacji produktów i śledzenia zapasów. Jeśli sklep używa numerów SKU, unikalny numer jest przypisany do każdego indywidualnego wariantu produktu. Możesz wyświetlać numery SKU dla wariantów na stronach produktów poprzez edycję kodu szablonu:
Szablony z sekcjami i bez sekcji
Uwaga
Kroki tego tutoriala różnią się w zależności od tego, czy używasz szablonu z sekcjami czy bez sekcji . Szablon z sekcjami umożliwia przeciąganie i upuszczanie elementów w celu zmiany układu strony głównej, nie jest to możliwe w przypadku szablonu bez sekcji.
Aby ustalić, czy Twój szablon obsługuje sekcje, przejdź do strony Edytuj kod . Jeśli w katalogu Sekcje są pliki, używasz szablonu z sekcjami. Szablony bez sekcji zostały zatwierdzone przed październikiem 2016 roku i nie zawierają plików w katalogu*Sekcje *.
Jeśli używasz szablonu z sekcjami, kliknij przycisk Szablony z sekcjami i zastosuj się do instrukcji. Jeśli używasz starszego szablonu, niezawierającego sekcji, kliknij przycisk Szablony bez sekcji i zastosuj się do instrukcji.
Kroki dotyczące szablonów z sekcjami Pokaż numery SKU na stronach produktów
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony .
Znajdź temat, który chcesz edytować, kliknij przycisk ... , aby otworzyć menu czynności, a następnie kliknij Edytuj kod .
W katalogu Sekcje kliknij product.liquid
lub product-template.liquid
.
Znajdź następujący tag Liquid:
{{ product . title }}
Jest to kod, który renderuje tytuły produktów na stronie produktu.
W nowej linii pod linią kodu, która zawiera {{ product.title }}
, wklej następujący kod:
{% assign current_variant = product . selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant . sku }} </span>
Kliknij opcję Zapisz .
Wybierz swój szablon Kolejne kroki dla tego dostosowania różnią się w zależności od szablonu. Kliknij przycisk dla szablonu i postępuj według instrukcji.
Kroki dla szablonu Boundless
W katalogu Zasoby kliknij theme.js.liquid
.
Poszukaj variant.sku
:
Jeśli znajdziesz variant.sku
, dostosowanie będzie zakończone.
Jeśli nie możesz znaleźć variant.sku
, przejdź do kolejnego kroku.
Na dole pliku wklej następujący kod:
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 );
});
Kliknij opcję Zapisz .
Kroki dla szablonu Brooklyn
W katalogu Zasoby kliknij theme.js.liquid
.
Poszukaj variant.sku
:
Jeśli znajdziesz variant.sku
, dostosowanie będzie zakończone.
Jeśli nie możesz znaleźć variant.sku
, przejdź do kolejnego kroku.
Na dole pliku wklej następujący kod:
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 ;
});
});
}
});
Kliknij opcję Zapisz .
Kroki dla szablonu Debut
W katalogu Zasoby kliknij theme.js
.
Poszukaj variant.sku
:
Jeśli znajdziesz variant.sku
, dostosowanie będzie zakończone.
Jeśli nie możesz znaleźć variant.sku
, przejdź do kolejnego kroku.
Na dole pliku wklej następujący kod:
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 ;
});
});
}
});
Kliknij opcję Zapisz .
Kroki dotyczące szablonu Express
W katalogu Układ kliknij theme.liquid
.
Znajdź tag zamykający </body>
.
W linii nad tagiem zamykającym </body>
wklej następujący kod:
<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>
Kliknij opcję Zapisz .
Kroki dla szablonu Minimal
W katalogu Zasoby kliknij theme.js
.
Poszukaj variant.sku
:
Jeśli znajdziesz variant.sku
, dostosowanie będzie zakończone.
Jeśli nie możesz znaleźć variant.sku
, przejdź do kolejnego kroku.
Na dole pliku wklej następujący kod:
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 ;
});
});
}
});
Kliknij opcję Zapisz .
Kroki dla szablonu Narrative
W katalogu Zasoby kliknij custom.js
.
Na dole pliku wklej następujący kod:
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 ;
});
});
}
});
Kliknij opcję Zapisz .
Kroki dla szablonu Simple
W katalogu Zasoby kliknij theme.js.liquid
.
Poszukaj variant.sku
:
Jeśli znajdziesz variant.sku
, dostosowanie będzie zakończone.
Jeśli nie możesz znaleźć variant.sku
, przejdź do kolejnego kroku.
Na dole pliku wklej następujący kod:
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 ;
});
});
}
});
Kliknij opcję Zapisz .
Kroki dla szablonu Supply
W katalogu Zasoby kliknij theme.js.liquid
.
Poszukaj variant.sku
:
Jeśli znajdziesz variant.sku
, dostosowanie będzie zakończone.
Jeśli nie możesz znaleźć variant.sku
, przejdź do kolejnego kroku.
Na dole pliku wklej następujący kod:
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 ;
});
});
}
});
Kliknij opcję Zapisz .
Kroki dla szablonu Venture
W katalogu Zasoby kliknij theme.js
.
Poszukaj variant.sku
:
Jeśli znajdziesz variant.sku
, dostosowanie będzie zakończone.
Jeśli nie możesz znaleźć variant.sku
, przejdź do kolejnego kroku.
Na dole pliku wklej następujący kod:
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 ;
});
});
}
});
Kliknij opcję Zapisz .
Dodaj numery SKU do wariantów produktu w panelu administracyjnym Aby numery SKU pojawiały się na stronach produktów, musisz dodać te numery do wariantów produktu w panelu administracyjnym Shopify.
Z panelu administracyjnego Shopify przejdź do opcji Produkty .
Kliknij produkt, który chcesz edytować.
W przypadku produktów z wieloma wariantami dodaj numery SKU w sekcji Warianty :
Kliknij opcję Zapisz .
Kroki dotyczące szablonów bez sekcji Pokaż numery SKU na stronach produktów
Uwaga
To dostosowanie nie będzie działać w przypadku szablonu Boundless bez sekcji. Szablony bez sekcji zostały opublikowane przed październikiem 2016 roku i nie mają plików w katalogu Sekcje .
Kroki:
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony .
Znajdź temat, który chcesz edytować, kliknij przycisk ... , aby otworzyć menu czynności, a następnie kliknij Edytuj kod .
W katalogu Szablony kliknij product.liquid
.
Znajdź następujący tag Liquid:
{{ product . title }}
Jest to kod, który renderuje tytuły produktów na stronie produktu.
W nowej linii pod linią kodu zawierającą {{ product.title }}
wklej:
{% assign current_variant = product . selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant . sku }} </span>
Kliknij opcję Zapisz .
Jeśli korzystasz z darmowego szablonu Shopify innego niż Brooklyn i Venture, znajdź poniższą linię kodu:
var selectCallback = function ( variant , selector ) {
Jeżeli nie możesz znaleźć powyższej linii kodu w product.liquid
, znajdziesz go w theme.liquid
, w katalogu Układ .
Brooklyn i Venture: Jeśli korzystasz z szablonu Brooklyn lub Venture, musisz znaleźć i edytować inną linię kodu. W katalogu Zasoby kliknij theme.js.liquid
i znajdź poniższą linię kodu:
theme . productVariantCallback = function ( variant , selector ) {
W nowej linii poniżej wklej następujący kod:
if ( variant ) {
document . querySelector ( ' .variant-sku ' ). innerText = variant . sku ;
}
else {
document . querySelector ( ' .variant-sku ' ). innerText = '' ;
}
Twój kod powinien wyglądać tak:
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
}
});
};
Kliknij opcję Zapisz .
Dodaj numery SKU do wariantów produktu w panelu administracyjnym Aby numery SKU pojawiały się na stronach produktów, musisz dodać te numery do wariantów produktu w panelu administracyjnym Shopify.
Z panelu administracyjnego Shopify przejdź do opcji Produkty .
Kliknij produkt, który chcesz edytować.
W przypadku produktów z wieloma wariantami w sekcji Warianty dodaj numery SKU: W przypadku produktów bez wariantów w sekcji Zapasy dodaj numer SKU:
Kliknij opcję Zapisz .