Variante esgotada

 <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> _

 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 ;