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
tai theme.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 .
Huomaa
Joissakin Boundless-versioissa ei ole tässä vaiheessa korvattavaa koodiriviä. Jos et löydä koodia, siirry seuraavaan vaiheeseen.
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, jotta tuotteiden tilana ei näy "Ei saatavilla" ennen valinnan tekoa.
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä .
Kirjoita Suodata -laatikkoon unavailable
, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
Korvaa teksti Ei käytettävissä tekstiksi Make a selection
.
Klikkaa Tallenna .
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
tai theme.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 -%}
Huomaa
Joissakin Debut-versioissa ei ole tässä vaiheessa korvattavaa koodiriviä. Jos et löydä koodia, siirry seuraavaan vaiheeseen.
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
-%}
Huomaa
Jotkin Debut-versiot eivät sisällä tässä vaiheessa korvattavaa koodia. Jos et löydä koodia, siirry seuraavaan vaiheeseen.
Muuta Lisää ostoskoriin -painikkeen kieliasetuksia
Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta tuotteiden tilana ei näy "Ei saatavilla" ennen valinnan tekoa.
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä .
Kirjoita Suodata -laatikkoon unavailable
, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
Korvaa teksti Ei käytettävissä tekstiksi Make a selection
.
Klikkaa Tallenna .
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
tai theme.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, jotta tuotteiden tilana ei näy "Ei saatavilla" ennen valinnan tekoa.
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä .
Kirjoita Suodata -laatikkoon unavailable
, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
Korvaa teksti Ei käytettävissä tekstiksi Make a selection
.
Klikkaa Tallenna .
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, jotta tuotteiden tilana ei näy "Ei saatavilla" ennen valinnan tekoa.
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä .
Kirjoita Suodata -laatikkoon unavailable
, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
Korvaa teksti Ei käytettävissä tekstiksi Make a selection
.
Klikkaa Tallenna .
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
tai theme.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, jotta tuotteiden tilana ei näy "Ei saatavilla" ennen valinnan tekoa.
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä .
Kirjoita Suodata -laatikkoon unavailable
, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
Korvaa teksti Ei käytettävissä tekstiksi Make a selection
.
Klikkaa Tallenna .
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
tai theme.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, jotta tuotteiden tilana ei näy "Ei saatavilla" ennen valinnan tekoa.
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä .
Kirjoita Suodata -laatikkoon unavailable
, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
Korvaa teksti Ei käytettävissä tekstiksi Make a selection
.
Klikkaa Tallenna .
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
tai theme.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, jotta tuotteiden tilana ei näy "Ei saatavilla" ennen valinnan tekoa.
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, ja napsauta sitten ... > Muokkaa oletusteemasisältöä .
Kirjoita Suodata -laatikkoon unavailable
, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.
Korvaa teksti Ei käytettävissä tekstiksi Make a selection
.
Klikkaa Tallenna .