Como adicionar um pop-up no Shopify com temporizador

 <estilo> _
 . popUpContainer {
 largura : 100 %; 
altura : 100 %;
 posição : fixa ;
 plano de fundo : rgba ( 0 , 0 , 0 , 0,5 ) ;
 índice z : 13 ;
 topo : 0 ; 
inferior : 0 ;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 visibilidade : oculta ;
 }
 . popUpWrapper {
 largura : 100 %;
 largura máxima : 400px ; 
altura : conteúdo máximo ;
 exibição : flexível ;
 flex - direction : coluna ;
 alinhar - itens : centro ;
 alinhar - self : centro ;
 justificar - conteúdo : espaço ao redor ;
 raio da borda : 10px ; 
margem : automática ;
 }
 . boletim informativo -- pop-up {
 exibição : flexível ;
 flex - direction : coluna ;
 alinhar - itens : centro ;
 }
 . popUpWrapper h1 {
 margem - inferior : 0 ;
 } 
. popUpTextContent > * {
 preenchimento : 0 1rem ;
 }
 . popUpButtonContainer {
 exibição : flexível ;
 lacuna : 30px ;
 margem : 20px automático ;
 }
 . popUpWrapper . Legenda do campo {
 tamanho da fonte : 1,6rem ; 
esquerda : 2,5rem ;
 superior : 1rem ;
 margem - inferior : 0 ;
 eventos de ponteiro : nenhum ;
 posição : absoluta ;
 transição : facilidade superior de 0,3s , facilidade de tamanho da fonte 0,3s ; 
cor : rgba ( 0 , 0 , 0 , 0,75 ) ;
 espaçamento entre letras : 0,1rem ;
 altura da linha : 1,5 ;
 }
 . imagemLink {
 largura : 150px ; 
exibição : flexível ;
 }
 . fullWidthImage {
 largura : 100 %;
 borda - superior - esquerda - raio : 10px ;
 borda - superior - direita - raio : 10px ;
 estouro : oculto ;
 }
 . popUpOptOutButton { 
alinhar - self : centro ;
 }
 . popUpOptOutButton : pairar {
 decoração de texto : sublinhado ;
 }
 Tela @media somente e ( largura máxima : 481px ) {
 . popUpButtonContainer {
 lacuna : 10px ;
 }
 } 
</ estilo >
 < pop - up - dados modais - delay = " {{section.settings.delay | times: 1000 }} "
 dados - opt - time = " {{section.settings.opt_time | times: 1000 | times: 60 }} " >
 < div class = "popUpContainer" > 
< div class = "popUpWrapper" style = " {% if section.settings.full_width == true %} preenchimento: 0 0 20px; {% else %} preenchimento: 20px; {% endif %} plano de fundo: {{section.settings.modal_bg}} ;" >
 { % atribuir img = seção. configurações . imagem % } 
{ % se img ! = em branco % } 
< { % se seção. configurações . image_link != blank % } a href = " {{section.settings.image_link }} " { % else % } div { % endif % } 
class = "imageLink {% if section.settings.full_width == true %} fullWidthImage {% endif %} " >
 < estilo img = "largura: 100%" alt = " {{img.alt }} "
 srcset = " {% if img.width >= 493 %} {{ img | img_url: '493x' }} 493w, {% endif %}
 {% if img.width >= 600 %} {{ img | img_url: '600x' }} 600w, {% endif %} 
{% if img.width >= 713 %} {{ img | img_url: '713x' }} 713w, {% endif %}
 {% if img.width >= 823 %} {{ img | img_url: '823x' }} 823w, {% endif %}
 {% if img.width >= 990 %} {{ img | img_url: '990x' }} 990w, {% endif %}
 {% if img.width >= 1100 %} {{ img | img_url: '1100x' }} 1100w, {% endif %}
 {% if img.width >= 1206 %} {{ img | img_url: '1206x' }} 1206w, {% endif %} 
{% if img.width >= 1346 %} {{ img | img_url: '1346x' }} 1346w, {% endif %}
 {% if img.width >= 1426 %} {{ img | img_url: '1426x' }} 1426w, {% endif %}
 {% if img.width >= 1646 %} {{ img | img_url: '1646x' }} 1646w, {% endif %}
 {% if img.width >= 1946 %} {{ img | img_url: '1946x' }} 1946w, {% endif %}
 {{ img | img_url: 'master' }} {{ img }} w"
 src = " {{ img | img_url: '1946x' }} " 
carregando = "preguiçoso"
 largura = "973" > 
</ { % se seção. configurações . image_link != blank % } a { % else % } div { % endif % } >
 { % fim se % } 
< div class = "popUpTextContent" style = "text-align: {{ section.settings.content_alignment }} " > 
{ % se seção. configurações . popUpTitle != blank % } < h1 > { { seção. configurações . popUpTitle } } </ h1 > { % endif % } 
{ % se seção. configurações . conteúdo ! = em branco % }
 { { seção. configurações . contente } }
 { % fim se % }
 </div> _ _ 
{ % -form 'cliente' , id : 'Contato' , classe : 'footer__newsletter newsletter-form newsletter--popup' -% }
 < tipo de entrada = "oculto" nome = "contato[tags]" valor = "boletim informativo" > 
< div class = "newsletter-form__field-wrapper" >
 < div classe = "campo" >
 < entrada
 id = "NewsletterForm-- {{ section.id }} "
 tipo = "e-mail"
 nome = "contato[e-mail]"
 classe = "campo__input" 
valor = " {{ form.email }} "
 aria - obrigatório = "verdadeiro"
 correção automática = "desligado"
 autocapitalizar = "desligado"
 preenchimento automático = "e-mail"
 { % se formulário. erros % }
 auto-foco
 aria - inválido = "verdadeiro" 
aria -scribedby = "Erro de contato"
 { % formulário elsif. postado_com sucesso ? % }
 aria - descrita por = "Contato-sucesso"
 válido
 { % fim se % }
 espaço reservado = "E-mail"
 obrigatório >
 </div> _ _ 
< label class = "field__label" for = "NewsletterForm-- {{ section.id }} " > E-mail
 </ rótulo >
 { %- se formulário. erros -% } 
< small class = "newsletter-form__message form__message" id = "Erro de contato" > { % render 'icon-error' % } { { form. erros . campos_traduzidos [ 'email' ] | capitalizar } } { { formulário. erros . mensagens [ 'email' ] } } </ small > 
{ %- fim se -% }
 </div> _ _
 < div class = "popUpButtonContainer" > 
{ % se seção. configurações . button_1 != blank % } < button type = "submit" class = "btn button signUpButton" name = "commit" id = "Inscrever-se" aria - label = " {{ 'newsletter.button_label' | t }} " > 
{ { seção. configurações . botão_1 } } </ botão > { % endif % } 
{ % se seção. configurações . button_2 != blank % } < span class = "btn button optOutDelay" > { { seção. configurações . button_2 } } </ span > { % endif % } 
</div> _ _
 < span type = "button" class = "popUpOptOutButton" > Não. Obrigado </ span >
 { %- formulário final -% }
 </div> _ _
 </div> _ _ 
</ pop - up - modal >
 <roteiro> _
 classe PopUpModal estende HTMLElement {
 construtor ( ) {
 super ( ) ;
 esse . delayTime = isto . conjunto de dados . atraso ; 
esse . optTime = isto . conjunto de dados . optTime ;
 esse . modal = isto . querySelector ( ".popUpContainer" ) ;
 
esse . optOutButton = isto . querySelector ( ".optOutDelay" ) ;
 esse . noPop = isto . querySelector ( ".popUpOptOutButton" ) ; 
esse . inscrição = isto . querySelector ( ".signUpButton" ) ;

 if ( isto . noPop ! = nulo ) { 
esse . nãoPop . addEventListener ( "clique" , this . hidePop . bind ( this ) ) ;
 }
 if ( este . optOutButton ! = nulo ) { 
esse . optOutButton . addEventListener ( " clique " , isto.atraso.ligar ( este ) ) ;
 }
 if ( isto . inscrição ! = nulo ) { 
esse . inscrever-se . addEventListener ( " clique " , isto.subscrito.ligar ( este ) ) ;
 }
 seja t = isso . tempo de atraso ; 
esse . setTime ( t ) ;
 }

 setHora ( t ) {
 setTimeout ( ( ) => {
 esse . mostrar ( ) ;
 } , t ) ;
 } 

mostrar ( ) {
 if ( localStorage.getItem ( "optOut" ) != "true" ) {
 if ( sessãoStorage.getItem ( "optOut" ) != "true" ) { 
esse . modal . estilo . visibilidade = "visível" ;
 }
 }
 }

 atraso ( ) {
 esse . setTime ( this.optTime ) ; _ 
esse . ocultaModal ( ) ;
 }

 ocultarModal ( ) {
 esse . modal . estilo . visibilidade = "oculto" ;
 }

 ocultarPop ( ) {
 clearTimeout ( ) ; 
sessãoArmazenamento. setItem ( "optOut" , "true" ) ;
 esse . ocultaModal ( ) ;
 }
 subscrito ( ) {
 esse . ocultaModal ( ) ; 
armazenamento local. setItem ( "optOut" , "true" ) ;
 console. log ( "clicado" ) ;
 }
 }
 elementos personalizados. define ( "pop-up-modal" , PopUpModal ) ;
 </roteiro> _ 
{ % esquema % }
 {
 "nome" : "Modal pop-up" ,
 "configurações" : [
 {
 "tipo" : "cor" ,
 "id" : "modal_bg" , 
"default" : "#eee" ,
 "label" : "Cor de fundo modal"
 } ,
 {
 "type" : "image_picker" ,
 "id" : "imagem" ,
 "rótulo" : "imagem"
 } , 
{
 "tipo" : "caixa de seleção" ,
 "id" : "largura_completa" ,
 "label" : "Imagem em largura total"
 } ,
 {
 "tipo" : "url" ,
 "id" : "image_link" , 
"label" : "Link da imagem" ,
 "info" : "A altura da imagem se adapta à imagem"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "popUpTitle" ,
 "label" : "Título modal" 
} ,
 {
 "type" : "richtext" ,
 "id" : "conteúdo" ,
 "default" : "<p>Conte mais sobre esta promoção</p>" ,
 "label" : "Conteúdo pop-up"
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "content_alignment" ,
 "opções" : [
 {
 "valor" : "esquerda" ,
 "rótulo" : "Esquerda"
 } ,
 { 
"valor" : "centro" ,
 "rótulo" : "Centro"
 } ,
 {
 "valor" : "justificar" ,
 "rótulo" : "Justificado"
 } ,
 { 
"valor" : "certo" ,
 "rótulo" : "Certo"
 }
 ] ,
 "padrão" : "centro" ,
 "label" : "t:sections.image-banner.settings.image_height.label"
 } ,
 { 
"tipo" : "texto" ,
 "id" : "botão_1" ,
 "label" : "Etiqueta do primeiro botão" ,
 "info" : "Deixe o rótulo do botão em branco para ocultá-lo"
 } ,
 {
 "tipo" : "texto" , 
"id" : "botão_2" ,
 "default" : "Talvez mais tarde" ,
 "label" : "Etiqueta do segundo botão" ,
 "info" : "Deixe o rótulo do botão em branco para ocultá-lo"
 } ,
 {
 "tipo" : "intervalo" , 
"id" : "atraso" ,
 "min" : 1 ,
 "máximo" : 100 ,
 " passo 1 ,
 " unidades " , 
"label" : "Tempo de atraso em segundos" ,
 "padrão" : 5
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "opt_time" ,
 "min" : 1 , 
"máximo" : 100 ,
 " passo 1 ,
 "unidade" : "m" ,
 "label" : "Tempo de opção em minutos" ,
 "padrão" : 5
 }
 ] , 
"predefinições" : [
 {
 "nome" : "Modal pop-up"
 }
 ]
 }
 { % termina o esquema % }