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
Menu suspenso de variantes
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
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 (",)