Steg för Boundless
Följ dessa steg för att tillämpa anpassningen till Boundless:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod .
Klicka på theme.js
eller theme.js.liquid
i registret Tillgångar .
Hitta efter koden initVariantSelectors
. Under den letar du efter följande kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this . simplifyVariantLabels ( this . productSingleObject , this . $container );
Lägg till följande kod på en ny rad under:
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 ;
}
}
}
Den ska se ut ungefär så här:
// 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 ;
}
}
}
Hitta följande kodrad:
$ ( selectors . addToCartText ). html ( theme . strings . soldOut );
Det finns två instanser i den här koden, båda finns i productVariantCallback
-funktionen. Ersätt endast den andra instansen med:
$ ( selectors . addToCartText ). html ( ' Make a Selection ' );
Klicka på Spara .
Observera
Vissa versioner av Boundless inkluderar inte den kodrad som ska ersättas i det här steget. Om du inte hittar koden går du vidare till nästa steg.
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på product-template.liquid
i registret Avsnitt .
Hitta följande kod:
{% assign current_variant = product . selected_or_first_available_variant %}
Ersätt den med:
{% assign current_variant = product . selected_variant %}
Hitta följande kod och radera den:
{% if variant == product . selected_or_first_available_variant %} selected="selected" {% endif %}
Hitta koden {% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 %}
Den ska se ut ungefär så här:
{% 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 %}
Klicka på Spara .
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll .
I rutan Filter börjar du skriva in unavailable
för att visa översättningen "Ej tillgänglig".
Ersätt texten Ej tillgänglig med Make a selection
.
Klicka på Spara .
Steg för Debut
Följ dessa steg för att tillämpa anpassningen för Debut:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod .
Klicka på theme.js
eller theme.js.liquid
i registret Tillgångar .
Lägg till följande kod längst ner i filen:
( 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 ;
}
}
}
})();
Hitta koden _updatePrice: function(variant)
. Byt ut följande kod:
if (
variant . price === this . currentVariant . price &&
variant . compare_at_price === this . currentVariant . compare_at_price &&
variant . unit_price === this . currentVariant . unit_price
) {
return ;
}
mot:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
Leta efter följande kod om du inte hittar ovanstående kod:
if (
variant . price === this . currentVariant . price &&
variant . compare_at_price === this . currentVariant . compare_at_price
) {
return ;
}
Ersätt den med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
Hitta koden this.currentVariant = variant;
Lägg till följande kod under:
this . _updatePaymentButton ( variant );
Resultatet ska se ut ungefär så här:
this . currentVariant = variant ;
this . _updatePaymentButton ( variant );
Hitta koden _updateImages: function(variant)
. Byt ut följande kod:
var currentVariantImage = this . currentVariant . featured_image || {};
mot:
if ( this . currentVariant != undefined ) {
var currentVariantImage = this . currentVariant . featured_image || {};
}
Hitta följande kod precis under:
if (
! variant . featured_image ||
variantImage . src === currentVariantImage . src
) {
return ;
}
Ersätt den med:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
Hitta koden _updateSKU: function(variant)
. Byt ut följande kod:
if ( variant . sku === this . currentVariant . sku ) {
return ;
}
mot:
if ( this . currentVariant != undefined ) {
if ( variant . sku === this . currentVariant . sku ) {
return ;
}
}
Hitta koden _initVariants: function() {
. Byt ut följande kod:
if ( this . storeAvailability && this . variants . currentVariant . available ) {
this . storeAvailability . updateContent ( this . variants . currentVariant . id );
}
mot:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
Hitta följande 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
})
);
},
Lägg till följande kod, på en ny rad, under ovanstående kod:
_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 ' );
}
},
Den ska se ut ungefär så här:
_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 ' );
}
},
Klicka på Spara .
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på product-template.liquid
i registret Avsnitt .
Hitta följande kod:
{%- assign current_variant = product . selected_or_first_available_variant -%}
Ersätt den med:
{%- if product . variants . size > 1 -%}
{%- assign current_variant = product . selected_variant -%}
{%- else %}
{%- assign current_variant = product . first_available_variant -%}
{%- endif %}
Hitta följande kod och radera den:
{% if variant == product . selected_or_first_available_variant %} selected="selected" {% endif %}
Om du inte hittar ovanstående kod kan du leta efter följande kod och radera den:
{%- if variant == current_variant %} selected="selected" {%- endif -%}
Hitta följande kod:
{%- assign featured_image = product . selected_or_first_available_variant . featured_image | default : product . featured_image -%}
Ersätt den med:
{%- assign featured_image = current_variant . featured_image | default : product . featured_image -%}
Leta efter följande kod om du inte hittar ovanstående kod:
{%- assign featured_media = product . selected_or_first_available_variant . featured_media | default : product . featured_media -%}
Ersätt den med:
{%- assign featured_media = current_variant . featured_media | default : product . featured_media -%}
Observera
Vissa versioner av Debut innehåller inte den kod som ska ersättas i det här steget. Om du inte hittar koden går du vidare till nästa steg.
Hitta följande kod:
{% unless current_variant . available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Ersätt den med:
{% 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 %}
Hitta följande kod:
{% if section . settings . enable_payment_button %}
{{ form | payment_button }}
{% endif %}
Ersätt den med:
<div class="payment-button {% if current_variant == blank %} visually-hidden {% endif %} ">
{% if section . settings . enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
Hitta koden {% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 %}
Den ska se ut ungefär så här:
{% 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 %}
Klicka på Spara .
Redigera din produkts prisfragment
För att redigera din produkts prisfragment:
Klicka på product-price.liquid
i katalogen Fragment .
Hitta följande 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
-%}
Ersätt den med:
{%- 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
-%}
Observera
Vissa versioner av Debut innehåller inte den kod som ska ersättas i det här steget. Om du inte hittar koden går du vidare till nästa steg.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll .
I rutan Filter börjar du skriva in unavailable
för att visa översättningen "Ej tillgänglig".
Ersätt texten Ej tillgänglig med Make a selection
.
Klicka på Spara .
Steg för Minimal
Följ dessa steg för att tillämpa anpassningen till Minimal:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod .
Klicka på theme.js
eller theme.js.liquid
i registret Tillgångar .
Hitta efter koden initProductVariant: function() {
. Under den letar du efter följande 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 ();
}
Lägg till följande kod på en ny rad under:
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 ;
}
}
}
Den ska se ut ungefär så här:
// 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 ;
}
}
}
Klicka på Spara .
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på product-template.liquid
i registret Avsnitt .
Hitta följande kod:
{% assign variant = product . selected_or_first_available_variant %}
Ersätt den med:
{% assign variant = product . selected_variant %}
Hitta följande kod och radera den:
{% if variant == product . selected_or_first_available_variant %} selected="selected" {% endif %}
Hitta alla förekomster av denna kod:
{% assign featured_image = product . selected_or_first_available_variant . featured_image | default : product . featured_image %}
Ersätt med:
{% assign featured_image = product . selected_variant . featured_image | default : product . featured_image %}
Hitta koden {% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 %}
Den ska se ut ungefär så här:
{% 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 %}
Klicka på Spara .
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll .
I rutan Filter börjar du skriva in unavailable
för att visa översättningen "Ej tillgänglig".
Ersätt texten Ej tillgänglig med Make a selection
.
Klicka på Spara .
Steg för Narrative
Följ dessa steg för att tillämpa anpassningen till Narrative:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod .
Klicka på custom.js
i registret Tillgångar .
Lägg till följande kod längst ner i filen:
( 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 ;
}
}
}
})();
Klicka på Spara .
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på product-template.liquid
i registret Avsnitt .
Hitta följande kod:
{%- assign current_variant = product . selected_or_first_available_variant -%}
Ersätt den med:
{%- if product . variants . size > 1 -%}
{%- assign current_variant = product . selected_variant -%}
{%- else -%}
{%- assign current_variant = product . first_available_variant -%}
{%- endif -%}
Hitta koden {% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 %}
Den ska se ut ungefär så här:
{% 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 %}
Klicka på Spara .
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll .
I rutan Filter börjar du skriva in unavailable
för att visa översättningen "Ej tillgänglig".
Ersätt texten Ej tillgänglig med Make a selection
.
Klicka på Spara .
Steg för Simple
Följ dessa steg för att tillämpa anpassningen till Simple:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod .
Klicka på theme.js
eller theme.js.liquid
i registret Tillgångar .
Hitta efter koden initProductVariant: function() {
. Under den letar du efter följande kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate . simplifyVariantLabels ( this . productSingleObject , this . $container );
Lägg till följande kod på en ny rad under:
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 ;
}
}
}
Den ska se ut ungefär så här:
// 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 ;
}
}
}
Klicka på Spara .
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på product-template.liquid
i registret Avsnitt .
Hitta följande kod:
{% assign current_variant = product . selected_or_first_available_variant %}
Ersätt den med:
{% assign current_variant = product . selected_variant %}
Hitta följande kod och radera den:
{% if variant == product . selected_or_first_available_variant %} selected="selected" {% endif %}
Hitta koden {% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 %}
Den ska se ut ungefär så här:
{% 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 %}
Klicka på Spara .
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll .
I rutan Filter börjar du skriva in unavailable
för att visa översättningen "Ej tillgänglig".
Ersätt texten Ej tillgänglig med Make a selection
.
Klicka på Spara .
Steg för Supply
Följ dessa steg för att tillämpa anpassningen till Supply:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod .
Klicka på theme.js
eller theme.js.liquid
i registret Tillgångar .
Hitta efter koden initProductVariant: function() {
. Under den letar du efter följande kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this . simplifyVariantLabels ( this . productSingleObject );
Lägg till följande kod på en ny rad under:
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 ;
}
}
}
Den ska se ut ungefär så här:
// 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 ;
}
}
}
Klicka på Spara .
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på product-template.liquid
i registret Avsnitt .
Hitta följande kod:
{% assign variant = product . selected_or_first_available_variant %}
Ersätt den med:
{% assign variant = product . selected_variant %}
Hitta följande kod och radera den:
{% if variant == product . selected_or_first_available_variant %} selected="selected" {% endif %}
Hitta alla förekomster av denna kod:
{% assign featured_image = product . selected_or_first_available_variant . featured_image | default : product . featured_image %}
Ersätt den med:
{% assign featured_image = product . selected_variant . featured_image | default : product . featured_image %}
Hitta koden {% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 %}
Den ska se ut ungefär så här:
{% 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 %}
Klicka på Spara .
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll .
I rutan Filter börjar du skriva in unavailable
för att visa översättningen "Ej tillgänglig".
Ersätt texten Ej tillgänglig med Make a selection
.
Klicka på Spara .
Steg för Venture
Följ dessa steg för att tillämpa anpassningen till Venture:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod .
Klicka på theme.js
eller theme.js.liquid
i registret Tillgångar .
Lägg till följande kod längst ner i filen:
( 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 ;
}
}
}
})();
Hitta följande kod:
this . currentVariant = this . _getVariantFromOptions ();
Ersätt den med:
this . currentVariant = this . _getVariantFromOptions () || {};
Hitta koden _updatePrice: function(variant)
. Byt ut följande kod:
if (
variant . price === this . currentVariant . price &&
variant . compare_at_price === this . currentVariant . compare_at_price
) {
return ;
}
mot:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
Klicka på Spara .
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på product-template.liquid
i registret Avsnitt .
Hitta följande kod:
{% assign current_variant = product . selected_or_first_available_variant %}
Ersätt den med:
{% if product . variants . size > 1 %}
{% assign current_variant = product . selected_variant %}
{% else %}
{% assign current_variant = product . first_available_variant %}
{% endif %}
Hitta följande kod och radera den:
{% if variant == product . selected_or_first_available_variant %} selected="selected" {% endif %}
Om du inte hittar ovanstående kod kan du leta efter den här koden och radera den:
{% if variant == current_variant %} selected="selected" {% endif %}
Hitta alla förekomster av denna kod:
{% unless current_variant . available %}
Ersätt den med:
{% unless current_variant . available or product . variants . size == 1 and variant . available %}
Hitta följande 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 %}
Ersätt den med:
{% 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 %}
Hitta koden {% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 %}
Den ska se ut ungefär så här:
{% 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 %}
Klicka på Spara .
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll .
I rutan Filter börjar du skriva in unavailable
för att visa översättningen "Ej tillgänglig".
Ersätt texten Ej tillgänglig med Make a selection
.
Klicka på Spara .