Zachęć klientów do wyboru opcji
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.
Szablony z sekcjami i bez sekcji
Kroki dotyczące szablonów z sekcjami
Wybierz swój szablon
Kroki dla tego dostosowania różnią się w zależności od szablonu. Kliknij przycisk dla szablonu, zanim wykonasz poniższe instrukcje:
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
lubtheme.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;
}
}
}
Powinno to wyglądać 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;
}
}
}
- Znajdź następującą linię kodu:
$(selectors.addToCartText).html(theme.strings.soldOut);
Istnieją dwa wystąpienia tej linii kodu; oba znajdują się w funkcji productVariantCallback
. Zastąp tylko drugie wystąpienie poniższym ciągiem znaków:
$(selectors.addToCartText).html('Make a Selection');
- Kliknij opcję Zapisz.
Edytuj szablon strony produktu
Aby edytować szablon strony produktu:
- W katalogu Sekcje kliknij
product-template.liquid
. - Znajdź następujący kod:
{% assign current_variant = product.selected_or_first_available_variant %}
Zastąp go poprzez:
{% assign current_variant = product.selected_variant %}
- Znajdź następujący kod i usuń go:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
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 %}
Powinno to wyglądać 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.
Kroki dla szablonu Debut
Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Debut:
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
lubtheme.js.liquid
. - Dodaj następujący kod na dole pliku:
(function() {
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;
}
}
}
})();
-
Znajdź kod
_updatePrice: function(variant)
. Zastąp następujący kod:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
}
poprzez:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
Jeśli nie możesz znaleźć powyższego kodu, znajdź następujący kod:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Zastąp go poprzez:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
-
Znajdź kod
this.currentVariant = variant;
Dodaj następujący kod poniżej:
this._updatePaymentButton(variant);
Wynik powinien wyglądać tak:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Znajdź kod
_updateImages: function(variant)
. Zastąp następujący kod:
var currentVariantImage = this.currentVariant.featured_image || {};
poprzez:
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}
- Poniżej znajdź następujący kod:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
Zastąp go poprzez:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
-
Znajdź kod
_updateSKU: function(variant)
. Zastąp następujący kod:
if (variant.sku === this.currentVariant.sku) {
return;
}
poprzez:
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
-
Znajdź kod
_initVariants: function() {
. Zastąp następujący kod:
if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
}
poprzez:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
- Znajdź następujący kod:
_updateSKU: function(variant) {
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
this.container.dispatchEvent(
new CustomEvent('variantSKUChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
Dodaj następujący kod w nowej linii poniżej powyższego kodu:
_updatePaymentButton: function(variant) {
if (this.currentVariant != undefined) {
const paymentButton = document.querySelector('.payment-button');
if (paymentButton) {
paymentButton.removeAttribute('class', 'visually-hidden');
}
} else {
document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
}
},
Powinno to wyglądać tak:
_updateSKU: function(variant) {
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
this.container.dispatchEvent(
new CustomEvent('variantSKUChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
_updatePaymentButton: function(variant) {
if (this.currentVariant != undefined) {
const paymentButton = document.querySelector('.payment-button');
if (paymentButton) {
paymentButton.removeAttribute('class', 'visually-hidden');
}
} else {
document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
}
},
- Kliknij opcję Zapisz.
Edytuj szablon strony produktu
Aby edytować szablon strony produktu:
- W katalogu Sekcje kliknij
product-template.liquid
. - Znajdź następujący kod:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Zastąp go poprzez:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else %}
{%- assign current_variant = product.first_available_variant -%}
{%- endif %}
- Znajdź następujący kod i usuń go:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Jeśli nie możesz znaleźć powyższego kodu, znajdź poniższy kod i usuń go:
{%- if variant == current_variant %} selected="selected" {%- endif -%}
- Znajdź następujący kod:
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
Zastąp go poprzez:
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
Jeśli nie możesz znaleźć powyższego kodu, znajdź poniższy kod:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Zastąp go poprzez:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
- Znajdź następujący kod:
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Zastąp go poprzez:
{% if current_variant == blank %}
{{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
- Znajdź następujący kod:
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
Zastąp go poprzez:
<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
-
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 %}
Powinno to wyglądać 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.
Edytuj fragment kodu ceny produktu
Aby wyedytować fragment kodu ceny produktu:
- W katalogu Fragmenty kliknij
product-price.liquid
. - Znajdź następujący kod:
{%- liquid
if variant.title
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif
assign money_price = price | money
-%}
Zastąp go poprzez:
{%- liquid
if variant.title
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
elsif product.title
assign compare_at_price = product.compare_at_price
assign price = product.price
assign available = product.available
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif
assign money_price = price | money
-%}
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.
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
lubtheme.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;
}
}
}
Powinno to wyglądać 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ź następujący kod:
{% assign variant = product.selected_or_first_available_variant %}
Zastąp go poprzez:
{% assign variant = product.selected_variant %}
- Znajdź następujący kod i usuń go:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Znajdź wszystkie wystąpienia tego kodu:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Zastąp przez:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
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 %}
Powinno to wyglądać 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.
Kroki dla szablonu Narrative
Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Narrative:
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
custom.js
. - Dodaj następujący kod na dole pliku:
(function() {
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ź następujący kod:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Zastąp go poprzez:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else -%}
{%- assign current_variant = product.first_available_variant -%}
{%- endif -%}
-
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 %}
Powinno to wyglądać 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.
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
lubtheme.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;
}
}
}
Powinno to wyglądać 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ź następujący kod:
{% assign current_variant = product.selected_or_first_available_variant %}
Zastąp go poprzez:
{% assign current_variant = product.selected_variant %}
- Znajdź następujący kod i usuń go:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
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 %}
Powinno to wyglądać 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.
Kroki dla szablonu Supply
Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Supply:
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
lubtheme.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
this.simplifyVariantLabels(this.productSingleObject);
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;
}
}
}
Powinno to wyglądać tak:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);
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ź następujący kod:
{% assign variant = product.selected_or_first_available_variant %}
Zastąp go poprzez:
{% assign variant = product.selected_variant %}
- Znajdź następujący kod i usuń go:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Znajdź wszystkie wystąpienia tego kodu:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Zastąp go poprzez:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
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 %}
Powinno to wyglądać 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.
Kroki dla szablonu Venture
Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Venture:
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
lubtheme.js.liquid
. - Dodaj następujący kod na dole pliku:
(function() {
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;
}
}
}
})();
- Znajdź następujący kod:
this.currentVariant = this._getVariantFromOptions();
Zastąp go poprzez:
this.currentVariant = this._getVariantFromOptions() || {};
-
Znajdź kod
_updatePrice: function(variant)
. Zastąp następujący kod:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
poprzez:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
- Kliknij opcję Zapisz.
Edytuj szablon strony produktu
Aby edytować szablon strony produktu:
- W katalogu Sekcje kliknij
product-template.liquid
. - Znajdź następujący kod:
{% assign current_variant = product.selected_or_first_available_variant %}
Zastąp go poprzez:
{% if product.variants.size > 1 %}
{% assign current_variant = product.selected_variant %}
{% else %}
{% assign current_variant = product.first_available_variant %}
{% endif %}
- Znajdź następujący kod i usuń go:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Jeśli nie możesz znaleźć powyższego kodu, znajdź ten kod i usuń go:
{% if variant == current_variant %} selected="selected" {% endif %}
- Znajdź wszystkie wystąpienia tego kodu:
{% unless current_variant.available %}
Zastąp go poprzez:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- Znajdź następujący kod:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Zastąp go poprzez:
{% if current_variant == blank %}
{{ 'products.product.unavailable' | t }}
{% else %}
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
{% endif %}
-
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 %}
Powinno to wyglądać 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.
Kroki dotyczące szablonów bez sekcji
Dodaj monity do menu rozwijanych wariantów
- W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.
- Nadaj nazwę nowemu fragmentowi kodu
pick-an-option
. - W swoim nowym pliku fragmentu kodu wklej ten kod hostowany na GitHub.
- Kliknij opcję Zapisz.
- W katalogu Układ kliknij
theme.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
- szablon
Znajdź ten kod wewnątrz formularza:
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Opcjonalnie znajdź ten kod w formularzu:
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Zastąp kod następującym blokiem kodu:
<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Jeśli używasz szablonu Minimal, Pop lub Supply, znajdź wszystkie wystąpienia tego kodu:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Zastąp kod następującym blokiem kodu:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Jeśli używasz innego klasycznego szablonu Shopify, znajdź ten kod:
{% assign current_variant = product.selected_or_first_available_variant %}
Zastąp kod następującym blokiem kodu:
{% assign current_variant = product.selected_variant %}
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.