Adicionar botão e nota de pré-encomenda do Shopify

 { % -formulário 'produto' , 
produtos ,
 id : product_form_id ,
 classe : 'forma' ,
 novalidate : 'novalidate' ,
 dados - tipo : 'formulário de adição ao carrinho'
 -% } 
< input type = "hidden" name = "id" value = " {{ product.selected_or_first_available_variant.id }} " desativado >

 < div class = "variant_available_select oculto" > 
< select id = "Variantes- {{ section.id }} " class = "select__select" form = " {{ product_form_id }} " >
 { %- para variante no produto. variantes -% }
 < opção 
dados - disponíveis - variante = " {{ variant.id }} "
 valor = " {{ variant.id }} "
 dados - pré-encomenda - btn = " {{block.settings.preorder_btn}} "
 dados - disponíveis = " {{ variant.available }} " 
dados - pré-pedido = " {% if variant.available and variant.inventory_quantity <= 0 %} verdadeiro {% else %} falso {% endif %} "
 >
 { { - variante. quantidade_inventário - } }
 </ opção >
 { %- fim para -% } 
</ selecione >
 </div> _ _
 < div class = "produto-form__buttons" >
 < botão
 tipo = "enviar"
 nome = "adicionar" 
class = "product-form__submit button button - largura total {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %} botão - secundário {% else %} botão - primário {% endif %} "
 { % se produto. selecionado_ou_primeira_variável_disponível . disponível == falso % }
 desabilitado
 { % fim se % } 
>
 < intervalo >
 { %- se produto. selecionado_ou_primeira_variável_disponível . disponível -% }
 { %- se produto. selecionado_ou_primeira_variável_disponível . quantidade_inventário > 0 -% } 
{ { 'produtos.produto.add_to_cart' | } }
 { %- outro % }
 { { bloquear. configurações . pré-pedido_btn } }
 { %- fim se -% } 
{ %- outro -% }
 { { 'produtos.produto.sold_out' | } }
 { %- fim se -% }
 </span> _ 
< div class = "loading-overlay__spinner loading__spinner oculto" >
 < svg
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 classe = "girador"
 viewBox = "0 0 66 66" 
xmlns = "http://www.w3.org/2000/svg"
 >
 < círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo >
 </svg> _ 
</div> _ _
 </ botão >
 { % -se bloco. configurações . show_dynamic_checkout -% }
 { { formulário | botão_pagamento } }
 { %- fim se -% } 
</div> _ _
 { %- formulário final -% }

 { % quando 'preorder_note' % } 
< div class = "mensagem de pré-pedido {% if product.selected_or_first_available_variant.inventory_quantity <= 0 and product.selected_or_first_available_variant.available %} show_note {% endif %} " >
 { { bloquear. configurações . pedido antecipado } }
 </div> _ _
 <estilo> _ 
. pré-encomenda - mensagem {
 Mostrar nenhum ;
 }
 . mostrar_nota {
 exibição : bloquear ! importante ;
 }
 </ estilo >

 toggleAddButton ( e = verdadeiro , t , r = verdadeiro ) { 
const o = documento. getElementById ( ` product - form - $ { this.dataset.section } ` ) ;
 se ( ! o ) retornar ; 
const n = o. querySelector ( '[nome="adicionar"]' ) ;
 const s = o. querySelector ( '[nome="adicionar"] > span' ) ;
 const a = o. querySelector ( 
` [ dados - disponíveis - variante = "${this.currentVariant.id}" ] `
 ) ;
 se ( ! n ) retornar ;
 se ( e ) { 
n. setAttribute ( "desativado" , "desativado" ) ;
 se ( t ) s. conteúdotexto = t ;
 } outro {
 n. removeAttribute ( "desativado" ) ; 
S. textContent = janela. varianteStrings . adicionar ao carrinho ;
 }
 if ( a. conjunto de dados . preorder == "true" ) {
 S. textContent = a. conjunto de dados . pré-encomendaBtn ; 
if ( document.querySelector ( ".preorder-message" ) ) {
 documento. querySelector ( ".preorder-message" ) . lista de classes . adicionar ( "show_note" ) ;
 } 
if ( o. querySelector ( ".shopify-payment-button" ) ) {
 ó. querySelector ( ".shopify-botão de pagamento" ) . lista de classes . adicionar ( "oculto" ) ;
 }
 } outro { 
if ( document.querySelector ( ".preorder-message" ) ) {
 documento. querySelector ( ".preorder-message" ) . lista de classes . remover ( "show_note" ) ;
 } 
if ( o. querySelector ( ".shopify-payment-button" ) ) {
 ó. querySelector ( ".shopify-botão de pagamento" ) . lista de classes . remover ( "oculto" ) ;
 }
 } 
se ( ! r ) retornar ;
 }