Esta página foi impressa em Mar 31, 2023. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-pick-an-option.
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 esta personalização para desabilitar a seleção automática e fazer com que o cliente selecione manualmente a variante para exibição. )
Encontre o tema que deseja 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 leftthis.simplifyVariantLabels(this.productSingleObject,this.$container);
Add the following code on a new line below:
if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
It should look something like this:
// Clean up variant labels if the Shopify-defined// defaults are the only ones leftthis.simplifyVariantLabels(this.productSingleObject,this.$container);if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
There are *two instances* of this line of code, both found within the `productVariantCallback` function. Replace only the *second* instance with:
$(selectors.addToCartText).html('Make a Selection');
> Note:
> Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.
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.
Alterar as configurações de idioma do botão Adicionar ao carrinho
Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.
Encontre o código _updatePrice: function(variant). Substitua o seguinte código:
if (variant.price===this.currentVariant.price&&variant.compare_at_price===this.currentVariant.compare_at_price&&variant.unit_price===this.currentVariant.unit_price){return;}
> Note:
> Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.
Alterar as configurações de idioma do botão Adicionar ao carrinho
Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.
Encontre o tema que deseja 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();}
Add the following code on a new line below:
if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
It should look something like this:
// 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++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('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.
Alterar as configurações de idioma do botão Adicionar ao carrinho
Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os 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
Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.
Encontre o tema que deseja 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 leftSlate.simplifyVariantLabels(this.productSingleObject,this.$container);
Add the following code on a new line below:
if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
It should look something like this:
// Clean up variant labels if the Shopify-defined// defaults are the only ones leftSlate.simplifyVariantLabels(this.productSingleObject,this.$container);if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('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.
Alterar as configurações de idioma do botão Adicionar ao carrinho
Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.
Encontre o tema que deseja 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 leftthis.simplifyVariantLabels(this.productSingleObject);
Add the following code on a new line below:
if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('Pick '+indef+''+productOptions[i][i],'');select.add(option,select.firstChild);select.selectedIndex=0;}}}
It should look something like this:
// Clean up variant labels if the Shopify-defined// defaults are the only ones leftthis.simplifyVariantLabels(this.productSingleObject);if (typeof(productOptions)!="undefined"){for (i=0;i<productOptions.length;i++){constvowels=['a','e','i','o','u'];constfirstOptionLetter=productOptions[i][i][0].toLowerCase();letindef='a';if (vowels.includes(firstOptionLetter)){indef='an';};constselect=document.querySelectorAll('.single-option-selector')[i];constoptions=select.querySelectorAll('option');if (options.length>1){letoption=newOption('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.
Alterar as configurações de idioma do botão Adicionar ao carrinho
Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os 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
Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os 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.
Alterar as configurações de idioma do botão Adicionar ao carrinho
Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.