Laat klanten een optie kiezen
Wanneer klanten een productpagina in je webshop bezoeken, wordt standaard de eerste beschikbare variant geselecteerd. Met de aanpassing Klanten een optie laten kiezen deactiveer je de automatische selectie van de eerste beschikbare variant. Op deze manier krijgt de klant een prompt met de vraag om handmatig een variant te selecteren voordat deze wordt weergegeven.
Als je de aanpassing Klanten een optie laten kiezen gebruikt, geeft je thema mogelijk geen productprijs weer totdat de klant een variant selecteert. Voor producten met varianten is er geen uitgelichte prijs en de weergegeven prijs is afhankelijk van de geselecteerde variant.
Thema's met en zonder secties
Stappen voor thema's met secties
Je thema selecteren
De stappen voor deze aanpassing variëren naargelang je thema. Klik op de knop voor je thema voordat je de onderstaande instructies volgt:
Stappen voor Boundless
Volg deze stappen om de aanpassing toe te passen op Boundless:
Bewerk het JavaScript-bestand van je thema
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Assets op
theme.js
oftheme.js.liquid
. -
Zoek de code
initVariantSelectors
. Zoek hieronder de volgende code:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);
Voeg de volgende code toe op een nieuwe regel hieronder:
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;
}
}
}
Het ziet er als volgt uit:
// 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;
}
}
}
- Zoek de volgende coderegel:
$(selectors.addToCartText).html(theme.strings.soldOut);
Er zijn twee gevallen van deze coderegel, beide gevonden in de productVariantCallback
functie. Vervang alleen de tweede instantie door:
$(selectors.addToCartText).html('Make a Selection');
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
- Klik in de directory Secties op
product-template.liquid
. - Zoek de volgende code:
{% assign current_variant = product.selected_or_first_available_variant %}
Vervang door:
{% assign current_variant = product.selected_variant %}
- Zoek de volgende code en verwijder deze:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Zoek de code
{% schema %}
. Plak de volgende code in een nieuwe regel daarboven:
{% 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 %}
Het ziet er als volgt uit:
{% 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 %}
- Klik op Opslaan.
De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen
Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als Niet beschikbaar voordat een klant een product selecteert.
Stappen:
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
- Begin in de zoekbalk Artikelen filteren niet beschikbaar te typen om de vertaling Niet beschikbaar weer te geven.
- Vervang de tekst Niet beschikbaar door Een selectie maken.
- Klik op Opslaan.
Stappen voor Debut
Volg deze stappen om de aanpassing toe te passen op Debut:
Bewerk het JavaScript-bestand van je thema
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Assets op
theme.js
oftheme.js.liquid
. - Voeg de volgende code toe aan het eind van het bestand:
(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;
}
}
}
})();
-
Zoek de code
_updatePrice: function(variant)
. Vervang de volgende code:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
}
met:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
Als je de bovenstaande code niet kunt vinden, zoek dan de volgende code:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Vervang door:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
-
Zoek de code
this.currentVariant = variant;
Voeg hieronder de volgende code toe:
this._updatePaymentButton(variant);
Het resultaat zou er als volgt uit moeten zien:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Zoek de code
_updateImages: function(variant)
. Vervang de volgende code:
var currentVariantImage = this.currentVariant.featured_image || {};
met:
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}
- Zoek hieronder de volgende code:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
Vervang door:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
-
Zoek de code
_updateSKU: function(variant)
. Vervang de volgende code:
if (variant.sku === this.currentVariant.sku) {
return;
}
met:
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
-
Zoek de code
_initVariants: function() {
. Vervang de volgende code:
if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
}
met:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
- Zoek de volgende code:
_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
})
);
},
Voeg de volgende code toe op een nieuwe regel, onder de bovenstaande code:
_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');
}
},
Het ziet er als volgt uit:
_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');
}
},
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
- Klik in de directory Secties op
product-template.liquid
. - Zoek de volgende code:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Vervang door:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else %}
{%- assign current_variant = product.first_available_variant -%}
{%- endif %}
- Zoek de volgende code en verwijder deze:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Als je de bovenstaande code niet kunt vinden, zoek je de volgende code en verwijder deze:
{%- if variant == current_variant %} selected="selected" {%- endif -%}
- Zoek de volgende code:
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
Vervang door:
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
Als je de bovenstaande code niet kunt vinden, zoek je de volgende code:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Vervang door:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
- Zoek de volgende code:
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Vervang door:
{% 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 %}
- Zoek de volgende code:
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
Vervang door:
<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
-
Zoek de code
{% schema %}
. Plak de volgende code in een nieuwe regel daarboven:
{% 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 %}
Het ziet er als volgt uit:
{% 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 %}
- Klik op Opslaan.
Het productprijsfragment bewerken
Om je productprijs-fragment te wijzigen:
- Klik op
product-price.liquid
in de directory Fragmenten. - Zoek de volgende code:
{%- 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
-%}
Vervang door:
{%- 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
-%}
De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen
Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als Niet beschikbaar voordat een klant een product selecteert.
Stappen:
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
- Begin in de zoekbalk Artikelen filteren niet beschikbaar te typen om de vertaling Niet beschikbaar weer te geven.
- Vervang de tekst Niet beschikbaar door Een selectie maken.
- Klik op Opslaan.
Stappen voor Minimal
Volg deze stappen om de aanpassing toe te passen op Minimal:
Bewerk het JavaScript-bestand van je thema
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Assets op
theme.js
oftheme.js.liquid
. -
Zoek de code
initProductVariant: function() {
. Zoek hieronder de volgende code:
// 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();
}
Voeg de volgende code toe op een nieuwe regel hieronder:
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;
}
}
}
Het ziet er als volgt uit:
// 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;
}
}
}
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
- Klik in de directory Secties op
product-template.liquid
. - Zoek de volgende code:
{% assign variant = product.selected_or_first_available_variant %}
Vervang door:
{% assign variant = product.selected_variant %}
- Zoek de volgende code en verwijder deze:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Zoek alle keren dat deze code voorkomt:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Vervang dit door:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Zoek de code
{% schema %}
. Plak de volgende code in een nieuwe regel daarboven:
{% 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 %}
Het ziet er als volgt uit:
{% 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 %}
- Klik op Opslaan.
De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen
Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als Niet beschikbaar voordat een klant een product selecteert.
Stappen:
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
- Begin in de zoekbalk Artikelen filteren niet beschikbaar te typen om de vertaling Niet beschikbaar weer te geven.
- Vervang de tekst Niet beschikbaar door Een selectie maken.
- Klik op Opslaan.
Stappen voor Narrative
Volg deze stappen om de aanpassing toe te passen op Narrative:
Bewerk het JavaScript-bestand van je thema
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Assets op
custom.js
. - Voeg de volgende code toe aan het eind van het bestand:
(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;
}
}
}
})();
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
- Klik in de directory Secties op
product-template.liquid
. - Zoek de volgende code:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Vervang door:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else -%}
{%- assign current_variant = product.first_available_variant -%}
{%- endif -%}
-
Zoek de code
{% schema %}
. Plak de volgende code in een nieuwe regel daarboven:
{% 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 %}
Het ziet er als volgt uit:
{% 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 %}
- Klik op Opslaan.
De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen
Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als Niet beschikbaar voordat een klant een product selecteert.
Stappen:
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
- Begin in de zoekbalk Artikelen filteren niet beschikbaar te typen om de vertaling Niet beschikbaar weer te geven.
- Vervang de tekst Niet beschikbaar door Een selectie maken.
- Klik op Opslaan.
Stappen voor Simple
Volg deze stappen om de aanpassing toe te passen op Simple:
Bewerk het JavaScript-bestand van je thema
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Assets op
theme.js
oftheme.js.liquid
. -
Zoek de code
initProductVariant: function() {
. Zoek hieronder de volgende code:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);
Voeg de volgende code toe op een nieuwe regel hieronder:
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;
}
}
}
Het ziet er als volgt uit:
// 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;
}
}
}
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
- Klik in de directory Secties op
product-template.liquid
. - Zoek de volgende code:
{% assign current_variant = product.selected_or_first_available_variant %}
Vervang door:
{% assign current_variant = product.selected_variant %}
- Zoek de volgende code en verwijder deze:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Zoek de code
{% schema %}
. Plak de volgende code in een nieuwe regel daarboven:
{% 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 %}
Het ziet er als volgt uit:
{% 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 %}
- Klik op Opslaan.
De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen
Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als Niet beschikbaar voordat een klant een product selecteert.
Stappen:
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
- Begin in de zoekbalk Artikelen filteren niet beschikbaar te typen om de vertaling Niet beschikbaar weer te geven.
- Vervang de tekst Niet beschikbaar door Een selectie maken.
- Klik op Opslaan.
Stappen voor Supply
Volg deze stappen om de aanpassing toe te passen op Supply:
Bewerk het JavaScript-bestand van je thema
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Assets op
theme.js
oftheme.js.liquid
. -
Zoek de code
initProductVariant: function() {
. Zoek hieronder de volgende code:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);
Voeg de volgende code toe op een nieuwe regel hieronder:
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;
}
}
}
Het ziet er als volgt uit:
// 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;
}
}
}
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
- Klik in de directory Secties op
product-template.liquid
. - Zoek de volgende code:
{% assign variant = product.selected_or_first_available_variant %}
Vervang door:
{% assign variant = product.selected_variant %}
- Zoek de volgende code en verwijder deze:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Zoek alle keren dat deze code voorkomt:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Vervang door:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Zoek de code
{% schema %}
. Plak de volgende code in een nieuwe regel daarboven:
{% 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 %}
Het ziet er als volgt uit:
{% 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 %}
- Klik op Opslaan.
De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen
Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als Niet beschikbaar voordat een klant een product selecteert.
Stappen:
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
- Begin in de zoekbalk Artikelen filteren niet beschikbaar te typen om de vertaling Niet beschikbaar weer te geven.
- Vervang de tekst Niet beschikbaar door Een selectie maken.
- Klik op Opslaan.
Stappen voor Venture
Volg deze stappen om de aanpassing toe te passen op Venture:
Bewerk het JavaScript-bestand van je thema
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Assets op
theme.js
oftheme.js.liquid
. - Voeg de volgende code toe aan het eind van het bestand:
(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;
}
}
}
})();
- Zoek de volgende code:
this.currentVariant = this._getVariantFromOptions();
Vervang door:
this.currentVariant = this._getVariantFromOptions() || {};
-
Zoek de code
_updatePrice: function(variant)
. Vervang de volgende code:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
met:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
- Klik in de directory Secties op
product-template.liquid
. - Zoek de volgende code:
{% assign current_variant = product.selected_or_first_available_variant %}
Vervang door:
{% if product.variants.size > 1 %}
{% assign current_variant = product.selected_variant %}
{% else %}
{% assign current_variant = product.first_available_variant %}
{% endif %}
- Zoek de volgende code en verwijder deze:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Als je de bovenstaande code niet kunt vinden, zoek deze code en verwijder deze:
{% if variant == current_variant %} selected="selected" {% endif %}
- Zoek alle keren dat deze code voorkomt:
{% unless current_variant.available %}
Vervang door:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- Zoek de volgende code:
{% 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 %}
Vervang door:
{% 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 %}
-
Zoek de code
{% schema %}
. Plak de volgende code in een nieuwe regel daarboven:
{% 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 %}
Het ziet er als volgt uit:
{% 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 %}
- Klik op Opslaan.
De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen
Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als Niet beschikbaar voordat een klant een product selecteert.
Stappen:
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
- Begin in de zoekbalk Artikelen filteren niet beschikbaar te typen om de vertaling Niet beschikbaar weer te geven.
- Vervang de tekst Niet beschikbaar door Een selectie maken.
- Klik op Opslaan.
Stappen voor thema's zonder secties
Voeg termen toe aan je variantmenu's
- Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
- Benoem je nieuwe fragment
pick-an-option
. - Plak deze code die wordt gehost op GitHub in het nieuwe fragmentbestand.
- Klik op Opslaan.
- Klik in de directory Opmaak op
theme.liquid
. -
Zoek de sluitende tag
</body>
onderaan het bestand. Plak de volgende code op een nieuwe regel boven de sluitende tag</body>
:
{% render 'pick-an-option' %}
- Klik op Opslaan.
-
Zoek het bestand met het formulier Aan winkelwagen toevoegen. Dit bevat het attribuut
action
dat is ingesteld op/cart/add
. Dit zou in een van deze vier bestanden moeten staan:- de template
product.liquid
onder Templates - de opmaak
theme.liquid
onder Opmaak - het fragment
product.liquid
onder Fragmenten - het fragment
single-product.liquid
onder Fragmenten
- de template
Zoek deze code in het formulier:
<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>
Of zoek deze code in het formulier:
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Vervang de code door het volgende codeblok:
<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>
Zoek naar alle instanties van deze code als je Minimal, Pop of Supply gebruikt:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Vervang de code door het volgende codeblok:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Als je een ander vintage Shopify-thema gebruikt, kun je zoeken op deze code:
{% assign current_variant = product.selected_or_first_available_variant %}
Vervang de code door het volgende codeblok:
{% assign current_variant = product.selected_variant %}
Klik op Opslaan.
De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen
Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als Niet beschikbaar voordat een klant een product selecteert.
Stappen:
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
- Begin in de zoekbalk Artikelen filteren niet beschikbaar te typen om de vertaling Niet beschikbaar weer te geven.
- Vervang de tekst Niet beschikbaar door Een selectie maken.
- Klik op Opslaan.