Adicionando formulário de contato do Shopify à página do produto

< button id = "contact-modal-button" class = "btn" > Dúvidas sobre o produto ? < / botão >
 < tipo de script = "texto/javascript"
 src = "https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js " > </script>
 
< tipo de script = "texto/javascript" >
 emailjs. init ( 'usuário_XXXXXXXX' )
 < / roteiro >

 < div id = "modal-contact-dark-overlay" >< / div > 
< div id = "contato-modal-container" >
 < div id = "contato-modal" >
 < botão id = "contato-modal-exit" > & #x2715;</button>
 < p id = "mensagem de sucesso modal" >< / p > 
< div id = "contato-modal-form-content" >
 < h1 > Entre em contato com Made4uo < / h1 >
 < id do formulário = "formulário" >
 < div classe = "campo" > 
< label for = "ContactFormTitle" class = "label--hidden" > { { produto. título } } < / rótulo > 
< input type = "text" id = "ContactFormTitle" name = "ContactFormTitle" value = " {{ product.title }} " readonly = "readonly" >
 < / div >


 < div classe = "campo" > 
< rótulo para = "ContactFormSKU" class = "rótulo--oculto" > { { produto. selecionado_ou_primeira_variável_disponível . sku } } < / label > 
< input type = "text" id = "ContactFormSKU" name = "ContactFormSKU" value = " {{ product.selected_or_first_available_variant.sku }} " readonly = "readonly" >
 < / div >
 
< div classe = "campo" >
 < label for = "ContactFormName" > Nome < / label >
 < input type = "texto" nome = "ContactFormName" id = "ContactFormName" > 
< / div >
 < div classe = "campo" >
 < label for = "ContactFormEmail" > E-mail < / label > 
< tipo de entrada = "email" nome = "ContactFormEmail" id = "ContactFormEmail" >
 < / div >
 < div classe = "campo" > 
< textarea rows = "5" id = "ContactFormMessage" name = "ContactFormMessage" >< / textarea >
 < / div >
 < input type = "enviar" id = "botão" valor = "Enviar e-mail" > 
< / formulário >
 < / div >
 < / div >
 < / div >

 <roteiro> _
 const parambtn = documento. getElementById ( 'botão' ) ;
 
documento. getElementById ( 'formulário' )
 . addEventListener ( 'enviar' , função ( evento ) {
 evento. preventDefault ( ) ;

 parâmetro. valor = 'Enviando...' ;

 const serviceID = 'default_service' ; 
const templateID = 'template_XXXXX' ;

 emailjs. sendForm ( serviceID, templateID, this )
 . então ( ( ) => {
 parâmetro. valor = 'Enviar e-mail' ;
 alert ( 'Enviado!' ) ; 
ocultarOverlay ( ) ;
 ocultaModal ( ) ;
 } , ( errar ) => {
 parâmetro. valor = 'Enviar e-mail' ;
 alerta ( JSON.stringify ( err ) ) ;
 } ) ; 
} ) ;
 const showOverlay = ( ) => documento. querySelector ( "#modal-contact-dark-overlay" ) . estilo . exibir = "bloco" ; 
const showModal = ( ) => documento. querySelector ( "#contact-modal-container" ) . estilo . exibir = "bloco" ; 
const hideOverlay = ( ) => documento. querySelector ( "#modal-contact-dark-overlay" ) . estilo . exibir = "nenhum" ; 
const hideModal = ( ) => documento. querySelector ( "#contact-modal-container" ) . estilo . exibir = "nenhum" ;

 //Abre a janela modal 
documento. querySelector ( "#contact-modal-button" ) . onclick = função ( ) {
 showOverlay ( ) ;
 mostrarModal ( ) ;
 }

 //Feche a janela modal clicando no X 
documento. getElementById ( "contato-modal-exit" ) . onclick = função ( ) {
 ocultarOverlay ( ) ;
 ocultaModal ( ) ;
 }

 //Feche a janela modal clicando fora da caixa
 janela. onclick = função ( evento ) { 
if ( evento. alvo === documento. querySelector ( '#contact-modal-container' ) ) {
 ocultarOverlay ( ) ;
 ocultaModal ( ) ;
 }
 }
 < / roteiro >
 <estilo> _ 
#ContactFormMessage {
 largura : 100 % ;
 }

 . campo {
 margem inferior : 10px ;
 }

 . entrada de campo {
 exibição : bloco ;
 largura mínima : 100 % ; 
altura da linha : 1 ;
 tamanho da fonte : 14px ;
 }
 #modal-contact-dark-overlay {
 Mostrar nenhum ;
 posição : fixa ;
 topo : 0 ;
 esquerda : 0 ;
 largura : 100 % ; 
altura : 100 % ;
 cor de fundo : rgba ( 0 , 0 , 0 , 0,7 ) ;
 estouro : automático ;
 nome da animação : animateopacidade ;
 animação - duração : 0,5s ;
 } 
@keyframes animateopacidade {
 de { cor de fundo : rgba ( 0 , 0 , 0 , 0,0 ) }
 para { cor de fundo : rgba ( 0 , 0 , 0 , 0,7 ) }
 }

 #contato-modal-contêiner { 
Mostrar nenhum ;
 posição : fixa ;
 topo : 0 ;
 esquerda : 0 ;
 largura : 100 % ;
 altura : 100 % ;
 índice z : 9999999 ;
 }

 #contato-modal { 
posição : relativa ;
 margem : 0 automático ;
 cor de fundo : branco ;
 largura : 30 % ;
 altura : automático ;
 preenchimento : 20px 40px 50px 40px ; 
caixa - sombra : -1px 3px 18px 0px rgba ( 128 , 128 , 128 , 1 ) ;
 animação : drop - in 0,5s cúbico - bezier ( 0,175 , 0,885 , 0,32 , 1,275 ) ; 
transformar : traduzir ( 0 % , -25 % ) ;
 superior : 10 % ;

 }
 @media ( largura máxima : 1200px ) {
 #contato-modal {
 largura : 40 % ;
 } 
}
 @media ( largura máxima : 770px ) {
 #contato-modal {
 largura : 85 % ;
 superior : 10 % ;
 preenchimento : 20 % 5 % 5 % 10 % ; 
}
 }
 @keyframes drop - in {
 de { topo : 10 % ; }
 para { superior : 25 % }
 }
 #contato-modal-exit {
 posição : absoluta ;
 direita : 20px ;
 borda : nenhuma ; 
plano de fundo : nenhum ;
 tamanho da fonte : 18px ;
 }
 . ocultar - modal - conteúdo {
 Mostrar nenhum ;

 }
 #botão-modal de contato {
 posição : relativa ;
 exibição : bloco ;
 largura : 100 % ;
 }
 
entrada #ContactFormTitle {
 fundo - cor : #F5F5F5;
 estilo da fonte : itálico ;
 }
 insira #ContactFormSKU {
 fundo - cor : #F5F5F5;
 estilo da fonte : itálico ;
 }
 entrada #ContactFormTitle: foco {
 esboço : nenhum ;
 }
 entrada #ContactFormSKU: foco { 
esboço : nenhum ;
 }
 < / estilo >