Gdy klient odwiedza stronę produktu w sklepie online, domyślnie wybierany jest pierwszy dostępny wariant. Możesz użyć dostosowania Zachęć klientów do wyboru opcji, aby dezaktywować automatyczne wybieranie pierwszego dostępnego wariantu. Wówczas klient zostanie poproszony o ręczne wybranie wariantu przed jego wyświetleniem.
Jeśli użyjesz opcji Zachęć klientów do wyboru opcji, cena produktu może nie być wyświetlana w szablonie, dopóki klient nie wybierze wariantu. Produkty z wariantami nie mają oferowanych cen, a wyświetlana cena jest określana przez wybrany wariant.
Kroki dla tego dostosowania różnią się w zależności od szablonu. Kliknij przycisk dla szablonu, zanim wykonasz poniższe instrukcje:
Boundless
Kroki dla szablonu Boundless
Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Boundless:
Edytuj plik JavaScript swojego szablonu
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 Zasoby kliknij theme.js lub theme.js.liquid.
Znajdź kod initVariantSelectors. Poniżej wyszukaj następujący kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);
Dodaj następujący kod w nowej linii poniżej:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Powinien wyglądać mniej więcej tak:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
Zmień ustawienia języka przycisku Dodaj do koszyka
Możesz zmienić ustawienia języka dla przycisku Dodaj do koszyka, aby produkty nie wyświetlały się jako Niedostępne, zanim klient wybierze produkt.
Kroki:
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, a następnie kliknij opcję ... > Edytuj domyślną zawartość szablonu.
Na pasku wyszukiwania Filtruj pozycje zacznij pisać niedostępne, aby wyświetlić tłumaczenie Niedostępne.
Zmień tekst Niedostępne na Dokonaj wyboru.
Kliknij opcję Zapisz.
Minimal
Kroki dla szablonu Minimal
Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Minimal:
Edytuj plik JavaScript swojego szablonu
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 Zasoby kliknij theme.js lub theme.js.liquid.
Znajdź kod initProductVariant: function() {. Poniżej wyszukaj następujący kod:
// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
product.variants.length === 1 &&
product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
$('.selector-wrapper', this.$container).hide();
}
Dodaj następujący kod w nowej linii poniżej:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Powinien wyglądać mniej więcej tak:
// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
product.variants.length === 1 &&
product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
$('.selector-wrapper', this.$container).hide();
}
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Kliknij opcję Zapisz.
Edytuj szablon strony produktu
Aby edytować szablon strony produktu:
W katalogu Sekcje kliknij product-template.liquid.
Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
Powinien wyglądać mniej więcej tak:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
Kliknij opcję Zapisz.
Zmień ustawienia języka przycisku Dodaj do koszyka
Możesz zmienić ustawienia języka dla przycisku Dodaj do koszyka, aby produkty nie wyświetlały się jako Niedostępne, zanim klient wybierze produkt.
Kroki:
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, a następnie kliknij opcję ... > Edytuj domyślną zawartość szablonu.
Na pasku wyszukiwania Filtruj pozycje zacznij pisać niedostępne, aby wyświetlić tłumaczenie Niedostępne.
Zmień tekst Niedostępne na Dokonaj wyboru.
Kliknij opcję Zapisz.
Simple
Kroki dla szablonu Simple
Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Simple:
Edytuj plik JavaScript swojego szablonu
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 Zasoby kliknij theme.js lub theme.js.liquid.
Znajdź kod initProductVariant: function() {. Poniżej wyszukaj następujący kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);
Dodaj następujący kod w nowej linii poniżej:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Powinien wyglądać mniej więcej tak:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Kliknij opcję Zapisz.
Edytuj szablon strony produktu
Aby edytować szablon strony produktu:
W katalogu Sekcje kliknij product-template.liquid.
Znajdź tag zamykający </body> w dolnej części pliku. W nowej linii tuż nad tagiem zamykającym </body> wklej następujący kod:
{% render 'pick-an-option' %}
Kliknij opcję Zapisz.
Znajdź plik zawierający formularz dodawania do koszyka. Będzie mieć atrybut action ustawiony na /cart/add. Powinien się znajdować w jednym z tych czterech plików:
szablon product.liquid w ramach Szablonów
układ theme.liquid w ramach Układu
fragment kodu product.liquid w ramach Fragmentów kodu
fragment kodu single-product.liquid w ramach Fragmentów kodu
