Calculadora de taxa de envio do Shopify para tema Dawn e muito mais

 { % se configurações. calculadora_de_envio % } 
< envio - dados da calculadora - moeda = " {{ 0 | money | remove: " 0,00 " }} " dados - carrinho - total = " {{ cart_total }} " dados - carrinho - dinheiro - total = " {{ cart_total | money_with_currency }} " > 
<h3> { { configurações . expedição_calculadora_heading | padrão : 'Obter estimativas de envio' } } </ h3 >
 < formulário > 
< label class = "form__label" for = "address_country" > País </ label >
 < p classe = "selecionar" > 
< select class = "select__select" id = "address_country" name = "shipping_address[country]"
 dados - padrão = " {% if shop.customer_accounts_enabled and customer %} {{ customer.default_address.country }} {% elsif settings.shipping_calculator_default_country != '' %} {{ settings.shipping_calculator_default_country }} {% endif %} " > 
{ { country_option_tags } }
 </ selecione >
 { % renderizar 'ícone-caret' % }
 </ p >

 < div class = "província-contêiner" > 
< label class = "form__label" for = "address_province" id = "address_province_label" > Província / Estado </ label >
 < p class = "select" id = "address_province_container" > 
< select class = "select__select" id = "address_province" name = "shipping_address[province]"
 dados - padrão = " {% if shop.customer_accounts_enabled and customer and customer.default_address.province != '' %} {{ customer.default_address.province }} {% endif %} " > 
{ { província_option_tags | escapar } }
 </ selecione >
 { % renderizar 'ícone-caret' % }
 </ p >
 </div> _ _ 
< label class = "form__label" for = "address_zip" > CEP / Código Postal </ label >
 < p classe = "selecionar" > 
< input type = "text" class = "field__input" id = "address_zip" name = "shipping_address[zip]" { % if shop. customer_accounts_enabled e cliente % } value = " {{ customer.default_address.zip }} " { % endif % } /> 
</ p >
 < button type = "enviar" class = "botão obter taxas" > 
<span> { { configurações . Shipping_calculator_submit_button_label | padrão : 'Calcular frete' } } </ span >
 < div class = "loading-overlay__spinner calculadora-loader oculto" > 
< svg ária - oculto = "true" focusable = "falso" role = "apresentação" class = "spinner" 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 >
 </ formulário >
 < div class = "wrapper-response" </ div >
 < span class = "caixa de mensagem de erro oculta" </ span >
 </ frete - calculadora > 
<roteiro> _
 classe e estende HTMLElement {
 construtor ( ) {
 super ( ) ;
 esse . cS = isso . querySelector ( "#endereço_país" ) ; 
esse . pS = isso . querySelector ( "#address_province" ) ;
 esse . pC = isso . querySelector ( ".province-container" ) ; 
esse . eu ( ) ;

 esse . cT = isso . conjunto de dados . carrinhoTotal ;

 esse . eu = isso . querySelector ( ".calculadora-loader" ) ; 
esse . cS . addEventListener ( " alterar " , isto.cU.bind ( isto ) ) ; 
esse . gRb = isto . querySelector ( ".get-taxas" ) ; 
esse . gRb . addEventListener ( " clique " , isto.gSr.ligar ( este ) ) ;
 
esse . wR = isso . querySelector ( ".wrapper-response" ) ; 
esse . wR . addEventListener ( " alterar " , isto.rTp.ligar ( isto ) ) ; 
esse . eMb = isto . querySelector ( ".error-message-box" )
 }
 eu ( ) { 
esse . cS . valor = isto . cS . conjunto de dados [ "padrão" ] ;
 esse . cU ( )
 }

 c ( e ) {
 retornar { 
método : e ,
 cabeçalhos : {
 Aceite : `application / json` ,
 "X-Solicitado-Com" : "XMLHttpRequest"
 }
 }
 }

 cU ( ) { 
if ( este.pLu ( ) . comprimento > 0 ) {
 seja t = `` ; 
for ( deixe e = 0 ; e < este.pLu ( ) . comprimento ; e ++ ) { 
t += ` < option value = "${this.pLu()[e][1]}" > $ { this . pLu ( ) [ e ] [ 0 ] } </ opção > `
 } 
esse . PS . HTML interno = t ;
 esse . pc . estilo . display = "bloco"
 } outro {
 esse . pc . estilo . exibir = "nenhum"
 } 
}
 pLu ( ) {
 retornar JSON. analisar ( este .cS .opções [ este .cS .selecionadoIndex ] .dataset.províncias ) _
 }
 gSr ( e ) { 
e. preventDefault ( ) ;
 const t = new FormData ( e.target.mais próximo ( "formulário" ) ) ; 
const s = novo URLSearchParams ( t ) . para sequenciar ( ) ;
 esse . eu . lista de classes . alternar ( "oculto" ) ; 
esse . gRb . querySelector ( "span" ) . lista de classes . alternar ( "oculto" ) ;
 const r = `carrinho / taxas_de_envio. json ?$ { s } ` ; 
buscar ( r , isto . c ( "GET" ) ) . então ( e => e. json ( ) ) . então ( e => {

 console. registro ( e ) 
if ( por exemplo, zip || e. país ) {
 esse . cF ( e ) ;
 esse . wR . HTML interno = ""
 esse . rOp ( ) ; 
} outro {
 esse . eMb . lista de classes . adicionar ( "oculto" ) ;
 seja r = `` ;
 const i = e. taxas de envio ; 
for ( seja s = 0 ; s < i. comprimento ; s ++ ) {
 const a = i [ s ] . fonte ;
 deixe e ;
 mudar ( a ) { 
caso "dhl_express" :
 e = "DHL Expresso" ;
 quebrar ;
 caso "usps" :
 e = "USPS" ;
 quebrar ;
 caso "ups" : 
e = "UPS" ;
 quebrar ;
 caso "dpd" :
 e = "DPD" ;
 quebrar ;
 caso "canada_post" :
 e = "Posto Canadá" ;
 quebrar ; 
caso "evri" :
 e = "Euri" ;
 quebrar ;
 caso "enviar" :
 e = "Enviar" ;
 quebrar ;
 caso "cronopost" : 
e = "Cronopost" ;
 quebrar ;
 caso "colissimo" :
 e = "Colíssimo" ;
 quebrar ;
 caso "correios" :
 e = "correios" ;
 quebrar ; 
caso "mondial_relay" :
 e = "Relé Mundial" ;
 quebrar ;
 caso "poste_italiane" :
 e = "Poste Italiane" ;
 quebrar ;
 caso "shopify" : 
e = "Shopify" ;
 quebrar ;
 padrão :
 e = "Operadora desconhecida"
 }
 deixe t ;
 if ( i [ s ] . preço == 0 ) { 
t = "Frete GRATUITO"
 } outro {
 t = `$ { isto . conjunto de dados . moeda } $ { i [ s ] . preço } $ { i [ s ] . moeda } ` 
}
 r += ` < label class = "form__label" for = "shipping-${s}" > 
< input type = "radio" name = "shipping-info" id = "shipping-${s}" class = "shippingInfo" value = "${i[s].price}" >
 <div> _ _ 
< span > $ { e } $ { i [ s ] . nome } para < forte > $ { t } </ forte > . </span> _ 
< span > Entrega prevista em $ { i [ s ] . delivery_days [ 0 ] } para $ { i [ s ] . delivery_days [ 1 ] } dias. </span> _ 
</div> _ _
 </ rótulo > `
 }
 esse . wR . HTML interno = r ;
 }
 } ) [ "pegar" ] ( e => { 
se ( e ) {
 esse . eMb . lista de classes . remover ( "oculto" )
 }
 } ) [ "finalmente" ] ( ( ) => { 
esse . eu . lista de classes . alternar ( "oculto" ) ;
 esse . gRb . querySelector ( "span" ) . lista de classes . alternar ( "oculto" )
 } )
 }
 
rTp ( e ) {
 const t = documento. querySelector ( ".totals__subtotal-value" ) || documento. querySelector ( ".totals__valor total" ) ; 
const _mC = isto . conjunto de dados . carrinhoMoneyTotal . dividir ( " " ) ;
 const mC = _mC [ _mC. comprimento - 1 ] 
const r = Matriz. from ( por exemplo, currentTarget . querySelectorAll ( "input" ) ) . encontrar ( e => e. verificado ) . valor ; 
const i = ( parseInt ( este . cT ) + parseInt ( r. substituir ( "." , "" ) ) ) / 100 ;
 deixe a = "" ; 
if ( r == 0 ) a = "GRÁTIS" ;

 função pFm ( preço , moeda ) {
 var fm = novo Intl. NumberFormat ( 'en-US' , {
 estilo : 'moeda' , 
moeda : moeda ,
 } ) ;

 retorno fm. formato ( preço ) ;
 }
 
t. innerHTML = ` < strong > $ { pFm ( i , mC ) } </ strong >< small > com $ { a } frete </ small > ` ; 
documento. querySelector ( ".nota fiscal" ) . textContent = "Impostos calculados na finalização da compra"
 }

 rOp ( ) { 
const t = documento. querySelector ( ".totals__subtotal-value" ) || documento. querySelector ( ".totals__valor total" ) ;
 t. innerHTML = `$ { isto . conjunto de dados . carrinhoMoneyTotal } ` 
documento. querySelector ( ".nota fiscal" ) . textContent = "Impostos e frete calculados na finalização da compra"
 }

 cF ( e ) {
 deixe t ; 
if ( e. zip ) t = `Por favor $ { s ( e. zip [ 0 ] ) } .` ; 
if ( e. país ) t = `$ { e. país [ 0 ] } ` ;

 função s ( e ) { 
retornar e. charAt ( 0 ) . toLowerCase ( ) + e. fatia ( 1 )
 }
 esse . eMb . lista de classes . remover ( "oculto" ) ; 
esse . eMb . textoConteúdo = t
 }
 }
 elementos personalizados. define ( "calculadora de envio" , e ) ;
 </roteiro> _
 <estilo> _
 . cart__footer frete - calculadora {
 largura : 40rem ;
 } 
frete - formulário de calculadora {
 largura máxima : 30rem ;
 largura : 100 %;
 }
 frete - calculadora. selecione {
 margem : 0 0,6em 0,5em 0 ;
 largura : 100 %;
 }
 . formulário__rótulo { 
display : bloco embutido ;
 margem inferior : 0,6rem ;
 }
 . Informação de Envio {
 transformar : traduzirY ( 2px ) ;
 }
 . obter - taxas. botão {
 largura : 100 %; 
margem : 1rem 0 2rem ;
 }
 . wrapper - resposta {
 exibição : flexível ;
 flex - direction : coluna ;
 justificar - conteúdo : centro ;
 }
 . carregando - overlay__spinner. calculadora - círculo do carregador. caminho { 
acidente vascular cerebral : branco ;
 }
 . wrapper - intervalo de resposta {
 display : bloco embutido ;
 }
 . formulário__rótulo {
 exibição : flexível ;
 espaço em branco : nowrap ;
 lacuna : 5px ;
 alinhar - itens : flex - start ; 
}
 . wrapper - resposta div {
 display : bloco embutido ;
 largura : 100 %;
 espaço em branco : normal ;
 }
 . totais__subtotal - valor pequeno {
 espaço em branco : nowrap ;
 } 
h2. totais__subtotal {
 espaço em branco : nowrap ;
 }
 @media ( largura máxima : 750px ) {
 . cart__footer frete - calculadora {
 largura : 100 %;
 }
 envio - calculadora h3 , 
. erro - mensagem - caixa ,
 frete - formulário de calculadora {
 largura máxima : 36rem ;
 margem : automática ;
 exibição : bloco ;
 }
 . wrapper - resposta {
 preenchimento : 0 1rem ;
 largura : 100 %; 
}
 }
 </ estilo >
 { % fim se % }

 , { 
"name" : "Calculadora de taxas de envio" ,
 "configurações" : [
 {
 "tipo" : "caixa de seleção" ,
 "id" : "calculadora_de envio" ,
 "label" : "Mostrar a calculadora de frete?" , 
"padrão" : verdadeiro
 } ,
 {
 "tipo" : "texto" ,
 "id" : "shipping_calculator_heading" ,
 "label" : "Texto do título" ,
 "default" : "Obter estimativas de envio"
 } , 
{
 "tipo" : "texto" ,
 "id" : "shipping_calculator_default_country" ,
 "label" : "Seleção de país padrão" ,
 "info" : "Se o cliente estiver logado, o país do cliente será selecionado." ,
 "default" : "Austrália" 
} ,
 {
 "tipo" : "texto" ,
 "id" : "shipping_calculator_submit_button_label" ,
 "label" : "Etiqueta do botão Enviar" ,
 "default" : "Calcular frete"
 }
 ]
 }