Product Swatch

Amostras de cores do Shopify Dawn - Temas do Shopify 2.0

Log in or Sign up to ensure access to purchased code across multiple devices.

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

Compatibilidade: Compatível com qualquer versão do Dawn e qualquer Temas GRATUITOS do Shopify 2.0 .

No mundo visualmente orientado do varejo on-line, a apresentação é tudo. Para proprietários de lojas do Shopify que usam o tema Dawn, as amostras de cores oferecem uma maneira dinâmica de mostrar variações de produtos. Este blog irá guiá-lo na adição de amostras de cores Dawn à sua loja, aprimorando as páginas de produtos e coleções com uma exibição mais interativa e visualmente atraente.

Por que usar amostras de cores no Shopify Dawn? As amostras de cores convertem o menu suspenso tradicional para variantes de produtos em um formato mais atraente visualmente e fácil de usar. Isso não apenas melhora a experiência do usuário, mas também fornece uma visão mais clara das opções de produtos disponíveis.

Benefícios de adicionar amostras de cores:

  • Apelo visual aprimorado : fornece uma maneira mais atraente e envolvente de exibir variantes.
  • Experiência do usuário aprimorada : torna mais fácil para os clientes visualizar e selecionar opções de produtos.
  • Melhor exibição do produto nas páginas da coleção : mostra aos clientes em potencial a variedade de opções disponíveis diretamente na página da coleção.

Você pode conferir a loja de demonstração aqui . Senha: made4uo

O que você está comprando:

  • Uma amostra com instruções de opções para alterar o estilo. Por favor, certifique-se de ler {% comment %} no código
  • Capaz de usar com seletor de variantes select ou radios
  • Capaz de adicionar amostras aos cartões de coleção
  • Certifique-se de atribuir a opção de cor como primeira opção para que isso funcione

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
  • Não deixamos nem adicionamos códigos para anunciar em nosso site
  • Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Acesse Loja Online > Temas > Ações > Editar Código.

Se você tiver o arquivo product-variant-picker.liquid na pasta Snippet, siga as instruções abaixo:

2. Vá para a pasta Snippet e abra o arquivo “product-variant-picker.liquid”. Substitua o código pelo código abaixo.

NOTA: Por favor, veja os nomes das opções no código, se o nome da sua opção para cor não for "Cor", "Estilo" ou "Cor", adicione o nome com uma vírgula no meio do código. É sensível a maiúsculas e minúsculas. Você também pode alterar o tamanho da amostra alterando a variável swatchSize.

 { % atribuir option_name = 'Cor, Estilo, Cor' % } 
{ % atribuir tamanho_amostra = '3vw' % } 
{ % comment % } Altere o tamanho da amostra de cor abaixo. { % comentário final % } 
{ % atribuir forma_de_amostra = 'borda arredondada' % } 
{ % comment % } Altere o formato da amostra. Use 'round' , 'square' , 'rectangle' ou 'round-edge' . { % comentário final % } 
<estilo> _
 conjunto de campos {
 -webkit -touch -callout : nenhum ; /* Safári iOS */ 
-webkit - user - select : nenhum ; /* Safári */
 -khtml - user - select : nenhum ; /* HTML do Konqueror */ 
-moz - user - select : nenhum ; /* Versões antigas do Firefox */ 
-ms - user - select : nenhum ; /* Internet Explorer/Edge */
 seleção de usuário : nenhum ;
 }
 . amostraComponent { 
exibição : flexível ;
 margem : 5 % 0 ;
 dimensionamento da caixa : caixa de borda ;
 posição : relativa ; 
borda : nenhuma ;
 }
 . amostraContainer {
 exibição : flexível ;
 flex - wrap : wrap ;
 largura : 100 %; 
}
 . inputColor {
 Mostrar nenhum ;
 } 
. produto - form__input entrada [ tipo = "rádio" ] + . etiquetaCor { 
largura : { { tamanho_da_amostra } } ;
 largura mínima : 30px ;
 margem : 1 %; 
display : bloco embutido ;
 cursor : ponteiro ;
 estouro : oculto ;
 transição : todos os 0,3s facilitam ;
 preenchimento : 0 ; 
}
 . labelColor : pairar {
 transformar : escala ( 1.1 ) ;
 }
 . etiquetaCor img { 
ajuste ao objeto : capa ;
 largura : 100 %;
 altura : 100 %;
 } 
. inputColor : verificado + . etiquetaCor + . infoCor {
 exibição : flexível ;
 } 
. inputColor : verificado + . etiquetaCor {
 contorno : 2px sólido ;
 borda : 2px branco sólido ;
 }
 </ estilo >
 
{ %- líquido
 atribuir variantes_disponíveis_arr = produto. variantes | mapa : 'disponível'
 atribuir variantes_option1_arr = produto. variantes | mapa : 'opção1' 
atribuir variantes_option2_arr = produto. variantes | mapa : 'opção2'
 atribuir variantes_option3_arr = produto. variantes | mapa : 'opção3' 
atribuir product_form_id = 'formulário-produto-' | anexar : seção. eu ia
 -% }

 { %- a menos que produto. has_only_default_variant -% } 
{ % -se bloco. configurações . picker_type == 'botão' -% }
 < variante - rádios 
id = "variant-radios- {{ section.id }} "
 class = "no-js-hidden"
 dados - seção = " {{ section.id }} "
 dados -url = " {{ product.url }} " 
{ % se update_url == falso % }
 dados - atualização - url = "falso" 
{ % fim se % }
 { { bloquear. shopify_atributos } }
 > 
{ %- para opção no produto. opções_com_valores -% }
 < fieldset class = "js product-form__input" > 
{ % se option_name contiver opção. nome % }
 < classe de legenda = "form__label" > 
{ { opção. nome - } }
 < cor - nome </ cor - nome >
 </ legenda > 
{ %- para valor na opção. valores -% }
 { %- para productOption em produto. variantes -% } 
{ %- se opçãoproduto. opções [ 0 ] == valor -% } 
{ % atribuir productVariantImage = productOption. imagem em destaque % }
 { %- fim se -% } 
{ %- fim para -% }

 { %- líquido
 atribuir opção_disabled = verdadeiro

 para option1_name em variantes_option1_arr 
opção de caso . posição
 quando 1
 if variantes_option1_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] 
atribuir opção_disabled = falso
 fim se
 quando 2 
if option1_name == produto. selecionado_ou_primeira_variável_disponível . opção1 e variantes_option2_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] 
atribuir opção_disabled = falso
 fim se
 quando 3 
if option1_name == produto. selecionado_ou_primeira_variável_disponível . opção1 e variantes_option2_arr [ forloop. índice0 ] == produto. selecionado_ou_primeira_variável_disponível . opção2 e variantes_option3_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] 
atribuir opção_disabled = falso
 fim se
 caso final
 fim para
 -% }
 < entrada
 tipo = "rádio"
 id = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} " 
nome = " {{ option.name }} "
 valor = " {{ value | escape }} "
 formulário = " {{ product_form_id }} " 
{ % se opção. valor_selecionado == valor % }
 verificado
 { % fim se % } 
{ % se opção_desativada % }
 classe = "desabilitado"
 { % fim se % } 
>
 < rótulo
 for = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} "
 dados - color = " {{value | downcase | replace: ' ', '-' }} " 
estilo = "
 {% case swatch_shape %}
 {% when 'round' %} raio da borda: 50%; proporção: 1;
 {% when 'square' %} proporção de aspecto: 1;
 {% when 'rectangle' %} altura: calc( {{swatch_size}} / 2);
 {% when 'round-edge' %} raio da borda: 15%; proporção: 1;
 {% endcase %}
 "
 class = "labelColor" 
>
 < imagem
 src = " {{- productVariantImage | image_url: width: 100 | uniq -}} "
 largura = "50"
 altura = "50"
 alt = " {{- productVariantImage.alt -}} " 
> 
< span class = "visualmente oculto" > { { 'products.product.variant_sold_out_or_unavailable' | t } } </ span > 
</ rótulo >
 { % fim para % }

 { % outro % } 
< classe de legenda = "form__label" > { { opção. nome } } </ legenda > 
{ % renderizar 'opções de variante de produto' , produto : produto , opção : opção , bloco : bloco % } 
{ % fim se % }
 </ conjunto de campos >
 { %- fim para -% } 
< tipo de script = "aplicativo/json" >
 { { produtos. variantes | json } }
 </roteiro> _ 
</ variante - rádios >
 { %- outro -% }
 < variante - seleciona
 id = "variant-selects- {{ section.id }} " 
class = "no-js-hidden"
 dados - seção = " {{ section.id }} "
 dados -url = " {{ product.url }} " 
{ % se update_url == falso % }
 dados - atualização - url = "falso" 
{ % fim se % }
 { { bloquear. shopify_atributos } }
 > 
{ %- para opção no produto. opções_com_valores -% }
 < div class = "produto-form__input produto-form__input--dropdown" > 
{ % se option_name contiver opção. nome % }
 < classe de legenda = "form__label" > 
{ { opção. nome - } }
 < cor - nome </ cor - nome >
 </ legenda > 
{ %- para valor na opção. valores -% }
 { %- para productOption em produto. variantes -% } 
{ %- se opçãoproduto. opções [ 0 ] == valor -% } 
{ % atribuir productVariantImage = productOption. imagem em destaque % }
 { %- fim se -% } 
{ %- fim para -% }

 { %- líquido
 atribuir opção_disabled = verdadeiro

 para option1_name em variantes_option1_arr 
opção de caso . posição
 quando 1
 if variantes_option1_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] 
atribuir opção_disabled = falso
 fim se
 quando 2 
if option1_name == produto. selecionado_ou_primeira_variável_disponível . opção1 e variantes_option2_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] 
atribuir opção_disabled = falso
 fim se
 quando 3 
if option1_name == produto. selecionado_ou_primeira_variável_disponível . opção1 e variantes_option2_arr [ forloop. índice0 ] == produto. selecionado_ou_primeira_variável_disponível . opção2 e variantes_option3_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] 
atribuir opção_disabled = falso
 fim se
 caso final
 fim para
 -% }
 < entrada
 tipo = "rádio"
 id = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} " 
nome = " {{ option.name }} "
 valor = " {{ value | escape }} "
 formulário = " {{ product_form_id }} " 
{ % se opção. valor_selecionado == valor % }
 verificado
 { % fim se % } 
{ % se opção_desativada % }
 classe = "desabilitado"
 { % fim se % } 
>
 < rótulo
 for = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} "
 dados - color = " {{value | downcase | replace: ' ', '-' }} " 
estilo = "
 {% case swatch_shape %}
 {% when 'round' %} raio da borda: 50%; proporção: 1;
 {% when 'square' %} proporção de aspecto: 1;
 {% when 'rectangle' %} altura: calc( {{swatch_size}} / 2);
 {% when 'round-edge' %} raio da borda: 15%; proporção: 1;
 {% endcase %}
 "
 class = "labelColor" 
>
 < imagem
 src = " {{- productVariantImage | image_url: width: 100 | uniq -}} "
 largura = "50"
 altura = "50"
 alt = " {{- productVariantImage.alt -}} " 
> 
< span class = "visualmente oculto" > { { 'products.product.variant_sold_out_or_unavailable' | t } } </ span > 
</ rótulo >
 { % fim para % }

 { % outro % } 
< label class = "form__label" for = "Opção- {{ section.id }} - {{ forloop.index0 }} " > 
{ { opção. nome } }
 </ rótulo >
 < div classe = "selecionar" > 
< selecione
 id = "Opção- {{ section.id }} - {{ forloop.index0 }} "
 classe = "select__select"
 nome = "opções[ {{ option.name | escape }} ]" 
formulário = " {{ product_form_id }} "
 > 
{ % renderizar 'opções de variante de produto' , produto : produto , opção : opção , bloco : bloco % } 
</ selecione >
 { % renderizar 'ícone-caret' % }
 </div> _ _ 
{ % fim se % }
 </div> _ _
 { %- fim para -% } 
< tipo de script = "aplicativo/json" >
 { { produtos. variantes | json } }
 </roteiro> _ 
</ variante - seleciona >
 { %- fim se -% }
 { %- sem fim -% }
 
< noscript class = "produto-form__noscript-wrapper- {{ section.id }} " > 
< div class = "product-form__input {% if product.has_only_default_variant %} oculto {% endif %} " > 
< label class = "form__label" for = "Variantes- {{ section.id }} " > 
{ { - 'produtos.produto.produtos_variantes' | t - } }
 </ rótulo > 
< div classe = "selecionar" >
 < selecione
 nome = "id"
 id = "Variantes- {{ section.id }} " 
classe = "select__select"
 formulário = " {{ product_form_id }} "
 > 
{ %- para variante no produto. variantes -% }
 < opção 
{ % se variante == produto. selecionado_ou_primeira_variável_disponível % }
 selecionado = "selecionado" 
{ % fim se % }
 { % se variante. disponível == falso % }
 desabilitado 
{ % fim se % }
 valor = " {{ variant.id }} "
 >
 { %- líquido
 variante de eco. título 
variante de eco. preço | dinheiro | tira_html | acrescentar : '-'
 se variante. disponível == falso 
echo 'produtos.produto.esgotado' | t | acrescentar : '-'
 fim se
 se variante. regra_quantidade . incremento > 1 
echo 'produtos.produto.quantidade.múltiplos_de' | t : quantidade : variante. regra_quantidade . incremento | acrescentar : '-'
 fim se 
se variante. regra_quantidade . min > 1 
echo 'produtos.produto.quantidade.mínimo_de' | t : quantidade : variante. regra_quantidade . min | acrescentar : '-'
 fim se 
se variante. regra_quantidade . máximo ! = nulo 
echo 'produtos.produto.quantidade.máximo_de' | t : quantidade : variante. regra_quantidade . máximo | acrescentar : '-'
 fim se
 # TODO: habilite a verificação de tema assim que `item_count_for_variant` for aceito como filtro válido 
#tema-verificação-desativar
 atribuir cart_quantity = carrinho | item_count_for_variant : variante. eu ia
 #tema-check-enable
 se quantidade_carrinho > 0 
echo 'produtos.produto.quantidade.in_cart_html' | t : quantidade : quantidade_carrinho | acrescentar : '-'
 fim se
 -% }
 </ opção > 
{ %- fim para -% }
 </ selecione >
 { % renderizar 'ícone-caret' % } 
</div> _ _
 </div> _ _
 </noscript> _
 <roteiro> _
 classe VariantColor estende HTMLElement { 
construtor ( ) {
 super ( ) ; 
esse . inputColors = isto . querySelectorAll ( '.inputColor' ) ; 
esse . inputColors . forEach ( color => color. addEventListener ( 'clique' , this . colorSelected . bind ( this ) ) )) ; 
}

 colorSelected ( evento ) {
 const selecione = documento. querySelector ( ` .colorSelect` ) ; 
item const = evento. atualTarget . valor ;
 selecione. valor = item ;
 }
 }
 
elementos personalizados. define ( 'cor-variante' , VariantColor ) ;
 </roteiro> _

Se você NÃO tiver o arquivo product-variant-picker.liquid na pasta Snippet, siga as instruções abaixo:

2. Abra o arquivo main-product.liquid na pasta Section e encontre o código abaixo.

{%- when 'variant_picker' -%}

3. Precisamos substituir o código entre o código da Etapa 2 e o código abaixo, pelo código da Etapa 4.

{%- when 'buy_buttons' -%}

NOTA: Se você tiver um nome "Cor" diferente de "Cor", "Estilo" ou "Cor", será necessário alterar o nome_da_opção. É sensível a maiúsculas e minúsculas. Você também pode alterar o tamanho da amostra alterando a variável swatchSize.

 { % atribuir option_name = 'Cor, Estilo, Cor' % }

 { % atribuir tamanho_amostra = '3vw' % } 
{ % comment % } Altere o tamanho da amostra de cor abaixo. { % comentário final % }
 { % atribuir forma_de_amostra = 'borda arredondada' % } 
{ % comment % } Altere o formato da amostra. Use 'round' , 'square' , 'rectangle' ou 'round-edge' . { % comentário final % }

 { %- a menos que produto. has_only_default_variant -% } 
{ % atribuir tipo_picker = bloco. configurações . selecionador_type % }
 { %- if picker_type == 'botão' -% }
 < variante - rádios
 class = "no-js-hidden" 
dados - seção = " {{ section.id }} "
 dados -url = " {{ product.url }} "
 { { bloquear. shopify_atributos } }
 >
 { %- para opção no produto. opções_com_valores -% }
 < conjunto de campos 
{ % se option_name contiver opção. nome % }
 class = "swatchComponent" style = " preenchimento: 0;"
 { % outro % }
 class = "js product-form__input" style = "border:none" 
{ % fim se % }
 >
 { % se option_name contiver opção. nome % }
 < classe de legenda = "form__label" >
 { { opção. nome - } } 
< cor - nome </ cor - nome >
 </ legenda >
 < div class = "swatchContainer" >
 { % atribuir productVariantImage = '' % } 
{ %- para valor na opção. valores -% }
 { %- para productOption em produto. variantes -% } 
{ %- se opçãoproduto. opções [ 0 ] == valor -% }
 { % atribuir productVariantImage = productOption. imagem em destaque % }
 { %- fim se -% } 
{ %- fim para -% }

 < entrada
 class = "inputColor"
 nome = " {{ option.name }} "
 valor = " {{ value | escape }} "
 form = "formulário-produto- {{ section.id }} "
 tipo = "rádio" 
id = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} "
 { % se opção. valor_selecionado == valor % }
 verificado
 { % fim se % }
 >
 < rótulo 
class = "labelColor"
 for = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} "
 dados - color = " {{value | downcase | replace: ' ', '-' }} "
 estilo = "
 {% case swatch_shape %}
 {% when 'round' %} raio da borda: 50%; proporção: 1; 
{% when 'square' %} proporção de aspecto: 1;
 {% when 'rectangle' %} altura: calc( {{swatch_size}} / 2);
 {% when 'round-edge' %} raio da borda: 15%; proporção: 1;
 {% endcase %}
 "
 >
 < imagem
 src = " {{- productOption.featured_image | image_url: width: 100 | uniq -}} "
 largura = "50"
 altura = "50" 
alt = " {{- productOption.featured_image.alt -}} "
 >
 </ rótulo >
 { % fim para % }
 </div> _ _
 { % outro % } 
< classe de legenda = "form__label" >
 { { opção. nome - } }
 < cor - nome </ cor - nome >
 </ legenda > 
{ %- para valor na opção. valores -% }
 < entrada
 tipo = "rádio"
 id = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} "
 nome = " {{ option.name }} "
 valor = " {{ value | escape }} " 
form = "formulário-produto- {{ section.id }} "
 { % se opção. valor_selecionado == valor % }
 verificado
 { % fim se % }
 > 
< rótulo para = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " >
 { { valor } }
 </ rótulo >
 { %- fim para -% }
 { % fim se % } 
</ conjunto de campos >
 { % fim para -% }
 < tipo de script = "aplicativo/json" >
 { { produtos. variantes | json } }
 </roteiro> _
 </ variante - rádios > 
{ %- outro -% }
 < variante - seleciona
 class = "no-js-hidden"
 dados - seção = " {{ section.id }} "
 dados -url = " {{ product.url }} " 
{ { bloquear. shopify_atributos } }
 >
 { %- para opção no produto. opções_com_valores -% }
 { % se option_name contiver opção. nome % }
 < variante - cor > 
< fieldset class = "swatchComponent" style = "preenchimento: 0;" >
 < classe de legenda = "form__label" >
 { { opção. nome - } } 
< cor - nome </ cor - nome >
 </ legenda >
 < div class = "swatchContainer" >
 { % atribuir productVariantImage = '' % } 
{ %- para valor na opção. valores -% }
 { %- para productOption em produto. variantes -% } 
{ %- se opçãoproduto. opções [ 0 ] == valor -% }
 { % atribuir productVariantImage = productOption. imagem em destaque % }
 { %- fim se -% } 
{ %- fim para -% }
 < entrada
 class = "inputColor"
 nome = " {{ option.name }} "
 valor = " {{ value | escape }} "
 form = "formulário-produto- {{ section.id }} "
 tipo = "rádio" 
id = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} "
 { % se opção. valor_selecionado == valor % }
 verificado
 { % fim se % }
 >
 < rótulo 
class = "labelColor"
 for = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} "
 estilo = "
 {% case swatch_shape %}
 {% when 'round' %} raio da borda: 50%; proporção: 1;
 {% when 'square' %} proporção de aspecto: 1;
 {% when 'rectangle' %} altura: calc( {{swatch_size}} / 2); 
{% when 'round-edge' %} raio da borda: 15%; proporção: 1;
 {% endcase %}
 "
 >
 < imagem
 src = " {{- productVariantImage | image_url: width: 100 | uniq -}} "
 largura = "50"
 altura = "50"
 alt = " {{- productVariantImage.alt -}} "
 > 
</ rótulo >
 { % fim para % }
 </div> _ _
 </ conjunto de campos >
 </ variante - cor >
 { % fim se % }

 < div 
class = "produto-form__input produto-form__input--dropdown"
 { % se option_name contiver opção. nome % }
 estilo = "display: nenhum"
 { % fim se % }
 > 
< label class = "form__label" for = "Opção- {{ section.id }} - {{ forloop.index0 }} " >
 { { opção. nome } }
 </ rótulo > 
< div classe = "selecionar" >
 < selecionar
 id = "Opção- {{ section.id }} - {{ forloop.index0 }} "
 class = "select__select {% if option_name contains option.name %} colorSelect {% endif %} "
 nome = "opções[ {{ option.name | escape }} ]" 
formulário = " {{ product_form_id }} "
 >
 { %- para valor na opção. valores -% }
 < opção
 valor = " {{ value | escape }} " 
{ % se opção. valor_selecionado == valor % }
 selecionado = "selecionado"
 { % fim se % }
 >
 { { valor } }
 </ opção > 
{ %- fim para -% }
 </ selecione >
 { % renderizar 'ícone-caret' % }
 </div> _ _
 </div> _ _
 { %- fim para -% } 
< tipo de script = "aplicativo/json" >
 { { produtos. variantes | json } }
 </roteiro> _
 </ variante - seleciona >
 { %- fim se -% }
 { %- sem fim -% } 
< noscript class = "produto-form__noscript-wrapper- {{ section.id }} " >
 < div class = "product-form__input {% if product.has_only_default_variant %} oculto {% endif %} " > 
< label class = "form__label" for = "Variantes- {{ section.id }} " > { { 'products.product.product_variants' | t } } </ rótulo >
 < div classe = "selecionar" > 
< select name = "id" id = "Variantes- {{ section.id }} " class = "select__select" form = " {{ product_form_id }} " >
 { %- para variante no produto. variantes -% }
 < opção 
{ % se variante == produto. selecionado_ou_primeira_variável_disponível % }
 selecionado = "selecionado"
 { % fim se % }
 { % se variante. disponível == falso % }
 desabilitado 
{ % fim se % }
 valor = " {{ variant.id }} "
 >
 { { variante. título } } 
{ %- se variante. disponível == falso % } - { { 'produtos.produto.sold_out' | t } } { % endif % } 
- { { variante. preço | dinheiro | tira_html } }
 </ opção >
 { %- fim para -% }
 </ selecione >
 { % renderizar 'ícone-caret' % } 
</div> _ _
 </div> _ _
 </noscript> _
 <roteiro> _
 classe VariantColor estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . inputColors = isto . querySelectorAll ( '.inputColor' ) ; 
esse . inputColors . forEach ( color => color. addEventListener ( 'clique' , this . colorSelected . bind ( this ) ) )) ;
 }

 colorSelected ( evento ) { 
const selecione = documento. querySelector ( ` .colorSelect` ) ;
 item const = evento. atualTarget . valor ;
 selecione. valor = item ;
 }
 }
 
elementos personalizados. define ( 'cor-variante' , VariantColor ) ;
 </roteiro> _
 <estilo> _
 conjunto de campos {
 -webkit -touch -callout : nenhum ; /* Safári iOS */ 
-webkit - user - select : nenhum ; /* Safári */
 -khtml - user - select : nenhum ; /* HTML do Konqueror */
 -moz - user - select : nenhum ; /* Versões antigas do Firefox */ 
-ms - user - select : nenhum ; /* Internet Explorer/Edge */
 seleção de usuário : nenhum ;
 }
 . amostraComponent {
 exibição : flexível ;
 margem : 5 % 0 ; 
dimensionamento da caixa : caixa de borda ;
 posição : relativa ;
 borda : nenhuma ;
 }
 . amostraContainer {
 exibição : flexível ;
 flex - wrap : wrap ;
 largura : 100 %;
 }
 . inputColor { 
Mostrar nenhum ;
 }
 . etiquetaCor {
 largura : { { tamanho_da_amostra } } ;
 largura mínima : 30px ;
 margem : 1 %;
 exibição : flexível ;
 justificar - conteúdo : centro ; 
alinhar - itens : centro ;
 cursor : ponteiro ;
 estouro : oculto ;
 transição : todos os .3s facilitam ;
 }
 . labelColor : pairar {
 transformar : escala ( 1.1 ) ;
 }
 . etiquetaCor img { 
ajuste ao objeto : capa ;
 largura : 100 %;
 }
 . inputColor : verificado + . etiquetaCor + . infoCor {
 exibição : flexível ;
 }
 . inputColor : verificado + . etiquetaCor { 
contorno : 2px sólido ;
 borda : 2px branco sólido ;
 }
 </ estilo > 

Retome as instruções aqui dependendo da versão do tema que você possui.

1. Mostrar fotos da cor da variante não será suficiente, temos que fornecer o nome da variante de cor que estão escolhendo. Portanto, precisamos do script abaixo. Vá para global.js na pasta Asset e adicione o código abaixo.

 class ColorName estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . cor = isto . paiNode . texto interno ;
 esse . optionSelects = isto . paiNode . parentNode ; 
esse . opçãoSeleciona . addEventListener ( 'alterar' , este . colorRender . vincular ( isto ) )
 esse . colorRender ( ) ;
 }
 
colorRender ( ) {
 esse . cor selecionada = documento. querySelector ( `input [ name = "${this.color}" ] : verificado` ) . valor ; 
esse . Texto interno = ` : $ { this . cor selecionada . charAt ( 0 ) . toUpperCase ( ) + this . cor selecionada . fatia ( 1 ) } ` ; 
}
 }

 elementos personalizados. define ( 'nome da cor' , ColorName ) ;

Se você quiser mostrar a amostra em um cartão de produto, prossiga com as etapas a seguir.

1. Abra o card-product.liquid na pasta Snippet. Em seguida, encontre as "informações do cartão". Existem dois deles, certifique-se de que seja o primeiro . Cole o código abaixo antes das "informações do cartão. Clique em Enter para iniciar uma nova linha. Veja a imagem abaixo para posicionamento.

Posicionamento do código das amostras de cores do amanhecer
{ % comentário % } ============================================= ================================================= ============== { % comentário final % }
 { % atribuir colorName = 'Cor' % } 
{ % comment % } Forneça o nome da cor. Certifique -se de colocá-lo entre aspas { % endcomment % }
 { % atribuir swatchSize = '4rem' % } 
{ % comment % } Você pode usar rem , px , %, etc. Certifique -se de colocá-lo entre aspas { % endcomment % }
 { % comentário % } ============================================= ================================================= ============== { % comentário final % } 
{ %- para opção em card_product. opções_com_valores -% }
 { % se opção. nome == corNome % }
 < fieldset class = "js product-form__input" > 
<legenda> { { opção . nome } } </ legenda >
 { %- para valor na opção. limite de valores : 5 -% }
 < entrada
 tipo = "rádio" 
id = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} "
 nome = " {{ option.name }} "
 valor = " {{ value | escape }} "
 formulário = " {{ product_form_id }} "
 { % se opção. valor_selecionado == valor % }
 verificado 
{ % fim se % }
 >
 < rótulo
 for = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} "
 class = " {% if option.name == colorName %} colorLabel {% endif %} "
 > 
{ % se opção. nome == corNome % }
 { %- para productOption em card_product. variantes -% } 
{ %- se opçãoproduto. opções [ 0 ] == valor e productOption. imagem_em destaque != em branco -% }
 < imagem
 src = " {{- productOption.featured_image | image_url: width: 100 | uniq -}} "
 largura = "50" 
altura = "50"
 alt = " {{- productOption.featured_image.alt -}} "
 >
 { %- fim se -% }
 { %- fim para -% }
 { % fim se % }
 </ rótulo > 
{ %- fim para -% }

 { % se opção. valores . tamanho > 5 -% }
 < strong class = "plusMore" > + Mais </ strong > 
{ %- fim se % }
 </ conjunto de campos >
 { % fim se % }
 { % fim para % }
 < tipo de script = "aplicativo/json" > 
{ { cartão_produto. variantes | json } }
 </roteiro> _
 < estilo com escopo >
 conjunto de campos {
 borda : nenhuma ;
 preenchimento : 0 ;
 }
 . colorLabel {
 preenchimento : 0 ! importante ; 
altura : calc ( { { swatchSize } } + var ( -variant - pils - border - width ) ) ;
 proporção de aspecto : 1 ; 
borda : var ( -variant - pils - border - width ) sólido transparente ! importante ;
 borda - raio : 50 %;
 estouro : oculto ;
 display : bloco embutido ;
 margem : 0,7rem 0,5rem 0,2rem 0 ; 
transição : border var ( -duration - short ) facilidade ;
 cursor : ponteiro ;
 posição : relativa ;
 }
 . colorLabel : antes de {
 contente : "" ;
 posição : absoluta ; 
topo : calc ( var ( -variant - pils - border - width ) * - 1 ) ; 
direita : calc ( var ( -variant - pils - border - width ) * - 1 ) ; 
parte inferior : calc ( var ( -variant - pils - border - width ) * - 1 ) ; 
esquerda : calc ( var ( -variant - pils - border - width ) * - 1 ) ;
 z - índice : -1 ; 
border - radius : var ( -variant - pils - radius ) ;
 box - shadow : var ( -variant - pils - shadow - horizontal - offset ) 
var ( -variant - pils - shadow - vertical - offset )
 var ( -variante - pílulas - sombra - desfoque - raio ) 
rgba ( var ( -color - shadow ) , var ( -variant - pils - shadow - opacity ) ) ;
 }
 . produto - form__input entrada [ tipo = "rádio" ] { 
clipe : rect ( 0 , 0 , 0 , 0 ) ;
 estouro : oculto ;
 posição : absoluta ;
 altura : 1px ;
 largura : 1px ;
 }
 rótulo do conjunto de campos > img { 
largura : { { swatchSize } } ;
 altura : { { swatchSize } } ;
 proporção de aspecto : 1 ;
 }
 rótulo do conjunto de campos > img : not ( : primeiro - filho ) { 
Mostrar nenhum ! importante ;
 }
 . plusMais {
 display : bloco embutido ;
 superior : - 13px ;
 posição : relativa ;
 }
 </ estilo >

Nota: O tema Dawn tem muitas edições, algumas versões antigas do Dawn eles chamam o produto usando "product_card", a versão mais recente, que uso neste tutorial, usa "card_product".

Dependendo da sua versão do Dawn, você deve alterar parte do código na Etapa 6. Para ver se você tem product_card ou card_product, você pode verificar em card_product.liquid. Veja a imagem abaixo.

Se você não possui card_product, você pode alterar o código simplesmente clicando em Ctrl + F, encontrar "card_product" e alterá-lo para product_card.

Amostras de cores do amanhecer para card_product ou product_card

É isso (",)

Copied!
Voltar para o blogue

2 comentários

Hi @Jun Hwang,

Thank you for the purchase. We cannot replicate the issue. We also check the view in apple device. Please contact us using the “Chat with us” for faster reply.

Made4Uo

Hi,

I just bought the variant image code and it works perfect.
The only problem I’m having right now is that mobile and small screen is ok but when the screen expands or view from desktop, the image height decreases and I’m seeing an white spaces top and bottom of the image variant.
Can you please let me know what could possibly trigger this error
Thank you,

Jun Hwang

Deixe um comentário