Sold Out Variant

Variante esgotada

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: SOMENTE todos os temas GRATUITOS do Shopify 2.0 . Funciona da versão inferior até a versão 11

Você pode adicionar alguns estilos às suas pílulas variantes esgotadas ou ao menu suspenso de variantes. O design esgotado em pílulas variantes está acinzentado e com uma barra. Para o menu suspenso de variantes, um texto fora de estoque ao lado da opção de variante é adicionado. Veja as imagens abaixo.

Pílulas variantes

comprimidos esgotados

Menu suspenso de variantes

Menu suspenso de imagens esgotadas

O que você está comprando :

  • Pílulas variantes acinzentadas e texto fora de estoque adicionado no menu suspenso de variantes
  • Funciona com múltiplas opções de variantes (uma a três opções de variantes)
  • Funciona com pílulas variantes ou menu suspenso
  • Atualizações com as mudanças de variante

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. Na sua página de administração, clique em Loja Online > Temas > Ações > Editar código
2. Na pasta Seção, abra main-product.liquid
3. Encontre o {%- when 'variant_picker' -%} e o {%- when 'buy_buttons' -%} .

NOTA: Se você vir {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %} , você precisa encontrar a pasta Snippet e abrir o product-variant-picker.liquid. 

4. Substitua o código do meio ou o código dentro de product-variant-picker.liquid pelo código abaixo. Certifique-se de clicar em SALVAR.

 <estilo> _
 . js . produto - form__input rótulo {
 estouro : oculto ;
 }
 . fora de estoque { 
opacidade : 0,5 ;
 posição : relativa ;
 }
 . fora de estoque : depois de {
 contente : "" ;
 plano de fundo : #d1d1d1;
 altura : 3px ;
 largura : 100 %;
 posição : absoluta ; 
girar : 160 graus ;
 esquerda : 0px ;
 superior : 50 %;
 }
 </ estilo >
 { %- a menos que produto. has_only_default_variant -% }
 { % atribuir CurrentVariant = produto. selecionado_ou_primeira_variável_disponível % } 
{ % atribuir _não_disponível = '' % }
 { %- para variante no produto. variantes -% }
 { % atribuir varianteTítulo = variante. título | dividir : ' / ' % } 
{ %- se variante. disponível == falso % }
 { % variante de caso . opções . tamanho % }
 { % quando 1 % } 
{ % atribuir novoTítulo = variante. título | maleta | manipular | acrescentar : ',' % }
 { % atribuir _not_available = _not_available | acrescentar : novoTítulo % } 
{ % quando 2 % }
 { % se variante atual. opção1 == varianteTítulo [ 0 ] % } 
{ % atribuir novoTítulo = varianteTítulo [ 1 ] | maleta | manipular | acrescentar : ',' % }
 { % atribuir _not_available = _not_available | acrescentar : novoTítulo % } 
{ % fim se % }
 { % quando 3 % }
 { % se variante atual. opção1 == varianteTítulo [ 0 ] % } 
{ % atribuir _first_tier = varianteTitle [ 1 ] | maleta | manipular | acrescentar : ',' % }
 { % atribuir primeiro_tier = primeiro_tier | acrescentar : _first_tier % } 
{ % fim se % }
 { % se variante atual. opção2 == varianteTítulo [ 1 ] % } 
{ % atribuir _sec_tier = variantTitle [ 2 ] | maleta | manipular | prefixar : ',' % }
 { % atribuir sec_tier = sec_tier | acrescentar : _sec_tier % } 
{ % fim se % }
 { % atribuir _not_available = _not_available | acrescentar : sec_tier % }
 { % final % }
 { % fim se % }
 { %- fim para -% } 
{ % atribuir not_available = _not_available | dividir : ',' % }
 { % -se bloco. configurações . 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 -% } 
< fieldset class = "js product-form__input" >
 < classe de legenda = "form__label" > { { opção. nome } } </ legenda > 
{ %- para valor na opção. valores -% }
 { % atribuir valor_manuseado = valor | maleta | manipular % }
 < 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 not_available contains handled_value %} esgotado {% endif %} "
 >
 { { valor } }
 </ rótulo > 
{ %- fim para -% }
 </ 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 -% }
 < div class = "produto-form__input produto-form__input--dropdown" > 
< 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 }} "
 classe = "select__select"
 nome = "opções[ {{ option.name | escape }} ]"
 formulário = " {{ product_form_id }} " 
>
 { %- para valor na opção. valores -% }
 { % atribuir valor_manuseado = valor | maleta | manipular % }
 < opção
 valor = " {{ value | escape }} " 
{ % se opção. valor_selecionado == valor % }
 selecionado = "selecionado"
 { % fim se % }
 >
 { { valor } } 
{ % se não_disponível contém valor_manuseado % } - esgotado { % endif % }
 </ 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 }} " >
 { { - '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 }} "
 >
 { { 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> _

5. Em seguida, abra global.js na pasta Asset.

6. Encontre if (fonte e destino) destino.innerHTML = fonte.innerHTML;

Por favor, veja a imagem para posicionamento

código esgotado

7. Abaixo do código, coloque o código abaixo. Certifique-se de clicar em SALVAR.

 deixe notAvailableHTML = html. querySelector ( 'variant-rádios' ) ; 
if ( html.querySelector ( 'seleção de variante' ) ) {
 notAvailableHTML = html. querySelector ( 'seleção de variante' ) ;
 }
 esse . innerHTML = notAvailableHTML. HTML interno ;

É isso (",)

Copied!
Voltar para o blogue

Deixe um comentário