Saa asiakkaat valitsemaan vaihtoehto
Kun asiakas vierailee verkkokauppasi tuotesivulla, ensimmäinen saatavilla oleva versio valitaan oletusarvoisesti. Käytä Saa asiakkaat valitsemaan vaihtoehto ‑mukautusta, jos haluat poistaa ensimmäisen saatavilla olevan tuoteversion automaattisen valinnan käytöstä. Näin asiakasta kehotetaan valitsemaan tuoteversio manuaalisesti, ennen kuin hän näkee tuoteversion.
Jos käytät Hanki Saa asiakkaat valitsemaan vaihtoehto ‑mukautusta, teemasi ei välttämättä näytä tuotteen hintaa, ennen kuin asiakas on valinnut tuoteversion. Tuoteversiollisilla tuotteilla ei ole esittelyhintoja, ja näkyvä hinta määräytyy valitun tuoteversion mukaan.

Osiin jaetut ja jakamattomat teemat
Osiin jaettujen teemojen ohjeet
Valitse teema
Tämän mukautuksen toimintavaiheet vaihtelevat teeman mukaan. Klikkaa teeman painiketta ennen kuin noudatat seuraavia ohjeita:
Boundless
Boundless-teeman toimintavaiheet
Kun haluat mukauttaa Boundless-teemaa, noudata näitä ohjeita:
Muokkaa teeman JavaScript-tiedostoa
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Sisällöt-hakemistossa valintaa
theme.js
taitheme.js.liquid
.Etsi koodi
initVariantSelectors
. Etsi sitten tämän alta seuraava koodi:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);
Lisää seuraava koodi tämän alle uudelle riville:
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;
}
}
}
Sen pitäisi näyttää suurin piirtein tältä:
// 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;
}
}
}
- Etsi seuraava koodirivi:
$(selectors.addToCartText).html(theme.strings.soldOut);
Tämä koodirivi esiintyy kaksi kertaa, kumpikin löytyy productVariantCallback
-funktiosta. Korvaa vain jälkimmäinen esiintymä seuraavalla koodilla:
$(selectors.addToCartText).html('Make a Selection');
- Klikkaa Tallenna.
Muokkaa tuotesivun mallia
Voit muokata tuotesivusi mallia seuraavasti:
- klikkaa Osat-hakemistossa kohtaa
product-template.liquid
. - Etsi seuraava koodi:
{% assign current_variant = product.selected_or_first_available_variant %}
Korvaa se tällä:
{% assign current_variant = product.selected_variant %}
- Etsi seuraava koodi ja poista se:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Etsi koodi
{% schema %}
. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:
{% 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 %}
Sen pitäisi näyttää suurin piirtein tältä:
{% 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 %}
- Klikkaa Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia
Voit muuttaa Lisää ostoskoriin ‑painikkeen kieliasetuksia niin, että tuotteen tila ei ole Ei saatavilla, ennen kuin asiakas valitsee tuotteen.
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä.
Kirjoita Suodata tuotteet ‑hakupalkkiin unavailable, jotta näet Ei saatavilla ‑käännöksen.
Kirjoita Ei saatavilla ‑tekstin tilalle Valitse
Klikkaa Tallenna.
Debut
Debut-teeman toimintavaiheet
Kun haluat mukauttaa Debut-teemaa, noudata näitä ohjeita:
Muokkaa teeman JavaScript-tiedostoa
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Sisällöt-hakemistossa valintaa
theme.js
taitheme.js.liquid
.Lisää seuraava koodi tiedoston alareunaan:
(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;
}
}
}
})();
-
Etsi koodi
_updatePrice: function(variant)
. Korvaa seuraava koodi:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
}
seuraava koodi:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
Jos et löydä yllä olevaa koodia, etsi seuraava koodi:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Korvaa se tällä:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
-
Etsi koodi
this.currentVariant = variant;
Lisää alla oleva koodi:
this._updatePaymentButton(variant);
Tuloksen pitäisi näyttää suurin piirtein tältä:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Etsi koodi
_updateImages: function(variant)
. Korvaa seuraava koodi:
var currentVariantImage = this.currentVariant.featured_image || {};
seuraava koodi:
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}
- Etsi alta seuraava koodi:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
Korvaa se tällä:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
-
Etsi koodi
_updateSKU: function(variant)
. Korvaa seuraava koodi:
if (variant.sku === this.currentVariant.sku) {
return;
}
seuraava koodi:
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
-
Etsi koodi
_initVariants: function() {
. Korvaa seuraava koodi:
if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
}
seuraava koodi:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
- Etsi seuraava koodi:
_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
})
);
},
Lisää seuraava koodi uudelle riville yllä mainitun koodin alle:
_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');
}
},
Sen pitäisi näyttää suurin piirtein tältä:
_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');
}
},
- Klikkaa Tallenna.
Muokkaa tuotesivun mallia
Voit muokata tuotesivusi mallia seuraavasti:
- klikkaa Osat-hakemistossa kohtaa
product-template.liquid
. - Etsi seuraava koodi:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Korvaa se tällä:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else %}
{%- assign current_variant = product.first_available_variant -%}
{%- endif %}
- Etsi seuraava koodi ja poista se:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Jos et löydä yllä olevaa koodia, etsi seuraava koodi ja poista se:
{%- if variant == current_variant %} selected="selected" {%- endif -%}
- Etsi seuraava koodi:
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
Korvaa se tällä:
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
Jos et löydä yllä olevaa koodia, etsi seuraava koodi:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Korvaa se tällä:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
- Etsi seuraava koodi:
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Korvaa se tällä:
{% 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 %}
- Etsi seuraava koodi:
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
Korvaa se tällä:
<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
-
Etsi koodi
{% schema %}
. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:
{% 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 %}
Sen pitäisi näyttää suurin piirtein tältä:
{% 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 %}
- Klikkaa Tallenna.
Muokkaa tuotteen hinnan koodinpätkää
Näin voit muokata tuotteen hinnan koodinpätkää:
- klikkaa Koodinpätkät-hakemistossa
product-price.liquid
. - Etsi seuraava koodi:
{%- 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
-%}
Korvaa se tällä:
{%- 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
-%}
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia
Voit muuttaa Lisää ostoskoriin ‑painikkeen kieliasetuksia niin, että tuotteen tila ei ole Ei saatavilla, ennen kuin asiakas valitsee tuotteen.
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä.
Kirjoita Suodata tuotteet ‑hakupalkkiin unavailable, jotta näet Ei saatavilla ‑käännöksen.
Kirjoita Ei saatavilla ‑tekstin tilalle Valitse
Klikkaa Tallenna.
Minimal
Minimal-teeman toimintavaiheet
Kun haluat mukauttaa Minimal-teemaa, noudata näitä ohjeita:
Muokkaa teeman JavaScript-tiedostoa
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Sisällöt-hakemistossa valintaa
theme.js
taitheme.js.liquid
.Etsi koodi
initProductVariant: function() {
. Etsi sitten tämän alta seuraava koodi:
// 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();
}
Lisää seuraava koodi tämän alle uudelle riville:
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;
}
}
}
Sen pitäisi näyttää suurin piirtein tältä:
// 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;
}
}
}
- Klikkaa Tallenna.
Muokkaa tuotesivun mallia
Voit muokata tuotesivusi mallia seuraavasti:
- klikkaa Osat-hakemistossa kohtaa
product-template.liquid
. - Etsi seuraava koodi:
{% assign variant = product.selected_or_first_available_variant %}
Korvaa se tällä:
{% assign variant = product.selected_variant %}
- Etsi seuraava koodi ja poista se:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Etsi kaikki tämän koodin esiintymät:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Korvaa se tällä:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Etsi koodi
{% schema %}
. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:
{% 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 %}
Sen pitäisi näyttää suurin piirtein tältä:
{% 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 %}
- Klikkaa Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia
Voit muuttaa Lisää ostoskoriin ‑painikkeen kieliasetuksia niin, että tuotteen tila ei ole Ei saatavilla, ennen kuin asiakas valitsee tuotteen.
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä.
Kirjoita Suodata tuotteet ‑hakupalkkiin unavailable, jotta näet Ei saatavilla ‑käännöksen.
Kirjoita Ei saatavilla ‑tekstin tilalle Valitse
Klikkaa Tallenna.
Narrative
Narrative-teeman toimintavaiheet
Kun haluat mukauttaa Narrative-teemaa, noudata näitä ohjeita:
Muokkaa teeman JavaScript-tiedostoa
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Sisällöt-hakemistossa kohtaa
custom.js
.Lisää seuraava koodi tiedoston alareunaan:
(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;
}
}
}
})();
- Klikkaa Tallenna.
Muokkaa tuotesivun mallia
Voit muokata tuotesivusi mallia seuraavasti:
- klikkaa Osat-hakemistossa kohtaa
product-template.liquid
. - Etsi seuraava koodi:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Korvaa se tällä:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else -%}
{%- assign current_variant = product.first_available_variant -%}
{%- endif -%}
-
Etsi koodi
{% schema %}
. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:
{% 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 %}
Sen pitäisi näyttää suurin piirtein tältä:
{% 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 %}
- Klikkaa Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia
Voit muuttaa Lisää ostoskoriin ‑painikkeen kieliasetuksia niin, että tuotteen tila ei ole Ei saatavilla, ennen kuin asiakas valitsee tuotteen.
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä.
Kirjoita Suodata tuotteet ‑hakupalkkiin unavailable, jotta näet Ei saatavilla ‑käännöksen.
Kirjoita Ei saatavilla ‑tekstin tilalle Valitse
Klikkaa Tallenna.
Simple
Simple-teeman toimintavaiheet
Kun haluat mukauttaa Simple-teemaa, noudata näitä ohjeita:
Muokkaa teeman JavaScript-tiedostoa
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Sisällöt-hakemistossa valintaa
theme.js
taitheme.js.liquid
.Etsi koodi
initProductVariant: function() {
. Etsi sitten tämän alta seuraava koodi:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);
Lisää seuraava koodi tämän alle uudelle riville:
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;
}
}
}
Sen pitäisi näyttää suurin piirtein tältä:
// 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;
}
}
}
- Klikkaa Tallenna.
Muokkaa tuotesivun mallia
Voit muokata tuotesivusi mallia seuraavasti:
- klikkaa Osat-hakemistossa kohtaa
product-template.liquid
. - Etsi seuraava koodi:
{% assign current_variant = product.selected_or_first_available_variant %}
Korvaa se tällä:
{% assign current_variant = product.selected_variant %}
- Etsi seuraava koodi ja poista se:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Etsi koodi
{% schema %}
. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:
{% 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 %}
Sen pitäisi näyttää suurin piirtein tältä:
{% 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 %}
- Klikkaa Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia
Voit muuttaa Lisää ostoskoriin ‑painikkeen kieliasetuksia niin, että tuotteen tila ei ole Ei saatavilla, ennen kuin asiakas valitsee tuotteen.
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä.
Kirjoita Suodata tuotteet ‑hakupalkkiin unavailable, jotta näet Ei saatavilla ‑käännöksen.
Kirjoita Ei saatavilla ‑tekstin tilalle Valitse
Klikkaa Tallenna.
Supply
Supply-teeman toimintavaiheet
Kun haluat mukauttaa Supply-teemaa, noudata näitä ohjeita:
Muokkaa teeman JavaScript-tiedostoa
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Sisällöt-hakemistossa valintaa
theme.js
taitheme.js.liquid
.Etsi koodi
initProductVariant: function() {
. Etsi sitten tämän alta seuraava koodi:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);
Lisää seuraava koodi tämän alle uudelle riville:
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;
}
}
}
Sen pitäisi näyttää suurin piirtein tältä:
// 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;
}
}
}
- Klikkaa Tallenna.
Muokkaa tuotesivun mallia
Voit muokata tuotesivusi mallia seuraavasti:
- klikkaa Osat-hakemistossa kohtaa
product-template.liquid
. - Etsi seuraava koodi:
{% assign variant = product.selected_or_first_available_variant %}
Korvaa se tällä:
{% assign variant = product.selected_variant %}
- Etsi seuraava koodi ja poista se:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Etsi kaikki tämän koodin esiintymät:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Korvaa se tällä:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Etsi koodi
{% schema %}
. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:
{% 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 %}
Sen pitäisi näyttää suurin piirtein tältä:
{% 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 %}
- Klikkaa Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia
Voit muuttaa Lisää ostoskoriin ‑painikkeen kieliasetuksia niin, että tuotteen tila ei ole Ei saatavilla, ennen kuin asiakas valitsee tuotteen.
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä.
Kirjoita Suodata tuotteet ‑hakupalkkiin unavailable, jotta näet Ei saatavilla ‑käännöksen.
Kirjoita Ei saatavilla ‑tekstin tilalle Valitse
Klikkaa Tallenna.
Venture
Venture-teeman toimintavaiheet
Kun haluat mukauttaa Venture-teemaa, noudata näitä ohjeita:
Muokkaa teeman JavaScript-tiedostoa
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Sisällöt-hakemistossa valintaa
theme.js
taitheme.js.liquid
.Lisää seuraava koodi tiedoston alareunaan:
(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;
}
}
}
})();
- Etsi seuraava koodi:
this.currentVariant = this._getVariantFromOptions();
Korvaa se tällä:
this.currentVariant = this._getVariantFromOptions() || {};
-
Etsi koodi
_updatePrice: function(variant)
. Korvaa seuraava koodi:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
seuraava koodi:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
- Klikkaa Tallenna.
Muokkaa tuotesivun mallia
Voit muokata tuotesivusi mallia seuraavasti:
- klikkaa Osat-hakemistossa kohtaa
product-template.liquid
. - Etsi seuraava koodi:
{% assign current_variant = product.selected_or_first_available_variant %}
Korvaa se tällä:
{% if product.variants.size > 1 %}
{% assign current_variant = product.selected_variant %}
{% else %}
{% assign current_variant = product.first_available_variant %}
{% endif %}
- Etsi seuraava koodi ja poista se:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Jos et löydä yllä olevaa koodia, etsi tämä koodi ja poista se:
{% if variant == current_variant %} selected="selected" {% endif %}
- Etsi kaikki tämän koodin esiintymät:
{% unless current_variant.available %}
Korvaa se tällä:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- Etsi seuraava koodi:
{% 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 %}
Korvaa se tällä:
{% 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 %}
-
Etsi koodi
{% schema %}
. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:
{% 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 %}
Sen pitäisi näyttää suurin piirtein tältä:
{% 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 %}
- Klikkaa Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia
Voit muuttaa Lisää ostoskoriin ‑painikkeen kieliasetuksia niin, että tuotteen tila ei ole Ei saatavilla, ennen kuin asiakas valitsee tuotteen.
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä.
Kirjoita Suodata tuotteet ‑hakupalkkiin unavailable, jotta näet Ei saatavilla ‑käännöksen.
Kirjoita Ei saatavilla ‑tekstin tilalle Valitse
Klikkaa Tallenna.
Osiin jakamattomien teemojen ohjeet
Kehotteiden lisääminen versiosi pudotusvalikkoihin
- klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.
- Anna uudelle koodinpätkällesi nimeksi
pick-an-option
. - Liitä this code hosted on GitHub uuteen katkelmatiedostoon.
- Klikkaa Tallenna.
- Valitse Ulkoasu-luettelosta
theme.liquid
. -
Etsi lähellä tiedoston alareunaa oleva sulkeva
</body>
-tunniste. Liitä seuraava koodi uudelle riville heti sulkevan</body>
-tunnisteen yläpuolelle:
{% render 'pick-an-option' %}
- Klikkaa Tallenna.
-
Etsi tiedosto, joka sisältää Lisää ostoskoriin -lomakkeen. Siinä on
action
-ominaisuus, jonka arvona on/cart/add
. Sen pitäisi olla yhdessä näistä neljästä tiedostosta:-
product.liquid
-malli Mallit-kohdassa -
theme.liquid
-asettelu Asettelu-kohdassa -
product.liquid
-koodinpätkä Koodinpätkät-kohdassa -
single-product.liquid
-koodinpätkä Koodinpätkät-kohdassa
-
Etsi lomakkeesta tämä koodi:
<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>
Voit myös etsiä lomakkeesta tämän koodin:
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Korvaa koodi seuraavalla koodilohkolla:
<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>
Jos käytät Minimal-, Pop- tai Supply-koodia, etsisilloin kaikki tämän koodin esiintymät:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Korvaa koodi seuraavalla koodilohkolla:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Jos käytät jotakin muuta vanhaa Shopify-teemaa, etsi tämä koodi:
{% assign current_variant = product.selected_or_first_available_variant %}
Korvaa koodi seuraavalla koodilohkolla:
{% assign current_variant = product.selected_variant %}
Klikkaa Tallenna.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia
Voit muuttaa Lisää ostoskoriin ‑painikkeen kieliasetuksia niin, että tuotteen tila ei ole Ei saatavilla, ennen kuin asiakas valitsee tuotteen.
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä.
Kirjoita Suodata tuotteet ‑hakupalkkiin unavailable, jotta näet Ei saatavilla ‑käännöksen.
Kirjoita Ei saatavilla ‑tekstin tilalle Valitse
Klikkaa Tallenna.