Quando um cliente visita uma página de produto na loja virtual, a primeira variante disponível é selecionada por padrão. No entanto, é possível usar a personalização Fazer com que os clientes escolham uma opção para desabilitar a seleção automática da primeira variante disponível. Dessa forma, o cliente é solicitado a selecionar manualmente antes que uma variante apareça.
Se você usar a personalização Fazer com que os clientes escolham uma opção, seu tema pode não exibir o preço do produto até que o consumidor selecione uma variante. Itens com variantes não mostram o preço em destaque, já que o valor exibido é determinado pela variante escolhida.
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
No diretório Ativos, clique em theme.js ou theme.js.liquid
Encontre o código initVariantSelectors. Abaixo dele, encontre o seguinte código:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);
Adicione o seguinte código em uma nova linha abaixo:
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;
}
}
}
que deve ter uma aparência parecida com esta:
// 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;
}
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:
{% 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 %}
que deve ter uma aparência parecida com esta:
{% 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 %}
Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
No diretório Ativos, clique em theme.js ou theme.js.liquid
Encontre o código initProductVariant: function() {. Abaixo dele, encontre o seguinte código:
// 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();
}
Adicione o seguinte código em uma nova linha abaixo:
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;
}
}
}
que deve ter uma aparência parecida com esta:
// 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;
}
}
}
Clique em Salvar.
Editar seu modelo de página de produto
Para editar o modelo de página do seu produto:
No diretório Seções, clique em product-template.liquid.
Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:
{% 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 %}
que deve ter uma aparência parecida com esta:
{% 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 %}
Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:
{% 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 %}
que deve ter uma aparência parecida com esta:
{% 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 %}
Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
No diretório Ativos, clique em theme.js ou theme.js.liquid
Encontre o código initProductVariant: function() {. Abaixo dele, encontre o seguinte código:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);
Adicione o seguinte código em uma nova linha abaixo:
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;
}
}
}
que deve ter uma aparência parecida com esta:
// 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;
}
}
}
Clique em Salvar.
Editar seu modelo de página de produto
Para editar o modelo de página do seu produto:
No diretório Seções, clique em product-template.liquid.
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:
{% 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 %}
que deve ter uma aparência parecida com esta:
{% 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 %}
Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:
{% 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 %}
que deve ter uma aparência parecida com esta:
{% 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 %}
Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
{% 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 %}
Substitua por:
{% 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 %}
Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:
{% 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 %}
que deve ter uma aparência parecida com esta:
{% 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 %}
Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Encontre a tag de fechamento </body> perto da parte inferior do arquivo. Em uma nova linha logo acima da tag de fechamento </body>, cole o seguinte código:
{% render 'pick-an-option' %}
Clique em Salvar.
Encontre o arquivo que contém o formulário de adicionar ao carrinho. Ele terá um atributo de action definido como /cart/add. Deve estar em um desses quatro arquivos:
o modelo product.liquid em Modelos
o layout theme.liquid em Layout
o snippet de código product.liquid em Snippets
o snippet de código single-product.liquid em Snippets
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
