Barra de anúncios agendados Shopify

{ % atribuir bar_interval = seção. configurações . intervalo_barra | vezes : 1000 % }
 < barra - seção 
class = "seção-bar--container"
 dados - barra - intervalo = " {{bar_interval}} "
 dados - dia = " {{- section.settings.day_schedule -}} "
 >
 <ul> _
 { %- para bloco na seção. blocos -% } 
< li class = "barra de seção" { { bloco. shopify_attributes } } >
 < imagem
 class = " {% if section.settings.no_icon %} ocultar imagem {% endif %} "
 src = " {{block.settings.bar_image | img_url: 'small' }} " 
alt = " {{block.settings.bar_image.alt | img_url: 'small' }} "
 >
 { % -se bloco. configurações . texto ! = em branco ou bloco. configurações . link ! = em branco -% } 
<a href = "{{ block.settings.link }} " style = "color: {{section.settings.text_color}} " > _ {{ block.settings.link }} _ {{section.settings.text_color}} _
 < p > { { bloco. configurações . texto | escapar } } < / p > 
< / a >
 { %- fim se -% }
 < / li >
 { %- fim para -% }
 < / ul >

 < div class = "ponto-caixa" > 
< div class = "dot-wrapper" >
 { %- para bloco na seção. blocos -% }
 < intervalo
 class = "bar-ponto {% if forloop.first %} active-dot {% endif %} " 
dados - ponto - índice = " {{forloop.index0}} "
 > & nbsp < / span
 >
 { % fim para % }
 < / div >
 < / div > 
< / barra - seção >
 <estilo> _
 . seção - barra -- contêiner {
 posição : relativa ;
 exibição : flexível ;
 preenchimento : 0 3 % ;
 justificar - conteúdo : espaço ao redor ; 
fundo - cor : { { seção. configurações . esquema de cores } } ;
 estouro : oculto ;
 }

 . seção - barra -- contêiner {
 -webkit -touch -callout : nenhum ; 
-webkit - user - select : nenhum ;
 -khtml - user - select : nenhum ;
 -moz - user - select : nenhum ;
 -ms - user - select : nenhum ;
 seleção de usuário : nenhum ;
 }
 
. seção - barra -- contêiner ul {
 posição : relativa ;
 flex - wrap : herdar ;
 exibição : flexível ;
 estouro -x : automático ;
 scroll - snap - type : x obrigatório ;
 comportamento de rolagem : suave ; 
scroll - preenchimento - esquerda : 1,5rem ;
 - webkit - overflow - rolagem : toque ;
 largura : 100 % ;
 preenchimento - esquerda : 0 ;
 }

 . seção - barra -- contêiner ul { 
scrollbar - color : rgb ( var ( -color - foreground ) ) rgba ( var ( -color - foreground ) , 0,04 ) ;
 -ms - overflow - style : nenhum ;
 largura da barra de rolagem : nenhuma ; 
}

 . seção -barra --container ul :: -webkit -barra de rolagem {
 altura : 0,4rem ;
 largura : 0,4rem ;
 Mostrar nenhum ;
 }

 . seção - barra {
 exibição : flexível ; 
largura : 100 % ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 scroll - snap - align : center ;
 }

 . seção - barra a : pairar {
 decoração de texto : sublinhado ;
 }
 
. seção - barra img {
 largura : 30px ;
 margem - direita : 5px ;
 }

 . seção - barra p {
 margem : 0 ;
 alinhamento de texto : centro ;
 tamanho da fonte : 14px ;
 }
 
. seção - barra a {
 decoração de texto : nenhuma ;
 }

 . ponto - caixa {
 largura : 100 % ;
 Mostrar nenhum ;
 posição : absoluta ;
 esquerda : 0 ; 
inferior : 23 % ;
 justificar - conteúdo : centro ;
 }

 . ponto - invólucro {
 exibição : flexível ;
 posição : absoluta ;
 largura : 100 % ;
 altura : conteúdo máximo ; 
justificar - conteúdo : centro ;
 }

 . barra - ponto {
 largura : 5px ;
 altura : 5px ;
 margem : 0 5px ;
 plano de fundo : rgba ( 0 , 0 , 0 , 0,1 ) ; 
raio da borda : 50 % ;
 cursor : ponteiro ;
 }

 . ativo - ponto {
 fundo : #000;
 }

 . ocultar - banner {
 Mostrar nenhum ! importante ;
 }
 
Tela @media somente e ( largura máxima : 1200px ) {
 . seção - barra {
 largura mínima : 100 % ;
 }

 . ponto - caixa {
 exibição : flexível ;
 }
 }
 
Tela @media somente e ( largura máxima : 400px ) {
 . ocultar - imagem {
 Mostrar nenhum ! importante ;
 }
 }
 < / estilo >
 { % esquema % }
 { 
"name" : "Barra de Seção" ,
 "max_blocks" : 12 ,
 "configurações" : [
 {
 "tipo" : "selecionar" ,
 "id" : "dia_horário" ,
 "label" : "Agende o dia em que deseja que o banner apareça" ,
 "padrão" : "8" , 
"opções" : [
 {
 "valor" : "1" ,
 "rótulo" : "segunda-feira"
 } ,
 {
 "valor" : "2" ,
 "label" : "Terça-feira"
 } ,
 {
 "valor" : "3" , 
"label" : "Quarta-feira"
 } ,
 {
 "valor" : "4" ,
 "rótulo" : "Quinta-feira"
 } ,
 {
 "valor" : "5" ,
 "rótulo" : "Sexta-feira"
 } ,
 {
 "valor" : "6" , 
"rótulo" : "Sábado"
 } ,
 {
 "valor" : "0" ,
 "rótulo" : "Domingo"
 } ,
 {
 "valor" : "8" ,
 "label" : "Desativado"
 }
 ]
 } ,
 { 
"tipo" : "cor" ,
 "id" : "esquema_cor" ,
 "padrão" : "#F3F3F3" ,
 "label" : "Cor de fundo da barra de seção"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "text_color" ,
 "padrão" : "#000" , 
"label" : "Cor do texto da barra de seção"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "bar_interval" ,
 "rótulo" : "intervalo" ,
 "máximo" : 9 ,
 "min" : 1 ,
 "passo 1 , 
"unidades " ,
 "padrão" : 3
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "label" : "Nenhum ícone de imagem no celular" ,
 "id" : "no_icon"
 }
 ] ,
 "blocos" : [
 { 
"tipo" : "seção_bar" ,
 "nome" : "barra de seção" ,
 "configurações" : [
 {
 "type" : "image_picker" ,
 "id" : "bar_image" ,
 "label" : "Ícone da barra de seção"
 } ,
 { 
"tipo" : "texto" ,
 "id" : "texto" ,
 "default" : "Bem-vindo à nossa loja" ,
 "rótulo" : "Texto"
 } ,

 {
 "tipo" : "url" ,
 "id" : "link" ,
 "label" : "Link da barra de seção" 
}
 ]
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Barra de Seção"
 }
 ]
 }
 { % termina o esquema % }

classe BarSection estende HTMLElement { 
construtor ( ) {
 super ( ) ;
 esse . barInterval = isto . conjunto de dados . barraInterval ;
 esse . barraSlider = isto . querySelector ( 'ul' ) ; 
esse . barra = isto . querySelectorAll ( 'li' ) ;
 esse . barDots = isto . querySelectorAll ( '.bar-ponto' ) ;
 esse . barraAtual = 0 ; 
esse . totalBar = isto . bar . comprimento ;

 esse . barDots . para cada (
 ( ponto ) => ponto. addEventListener ( ' clique' , isto.showDot.bind ( este ) ) 
) ;
 esse . intervalo = setInterval ( este.nextBar.bind ( este ) , este.barInterval ) ; _
 esse . iniciar ( ) ; 
const resizeObserver = new ResizeObserver ( entradas => this .init ( ) ) ;
 redimensionarObserver. observe ( this.barSlider ) ; _
 esse . agendar ( ) ;
 }
 
iniciar ( ) {
 esse . intervalo ;
 esse . atualização ( 0 ) ;

 }

 agendar ( ) {
 esse . agendar = isto . conjunto de dados . dia ; 
esse . data = nova Data ( ) ;
 esse . dayOfWeekNumber = este . data . getDia ( ) ;

 if ( este . cronograma ! = 8 ) { 
if ( this.dayOfWeekNumber ! = this.schedule ) { _ _
 esse . lista de classes . add ( 'ocultar-banner' ) ;
 }
 }
 }

 atualização ( pontoIndex ) { 
esse . barDots . forEach ( ponto => ponto. classList.remove ( 'ponto ativo ' ) ) ;
 esse . barDots [ pontoIndex ] . lista de classes . add ( 'ponto ativo' ) ;

 
esse . slideScrollPosition = isto . barraSlider . larguradocliente * pontoIndex ;
 esse . barraSlider . scrollTo ( {
 esquerda : isto . slideScrollPosition
 } ) ;
 }

 mostrarDot ( e ) { 
e. preventDefault ( ) ;
 esse . atualização ( por exemplo , currentTarget.dataset.dotIndex )
 }

 próximaBar ( ) {
 esse . barra atual ++ ; 
if ( isto . barra atual == este . barra total ) {
 esse . barraAtual = 0 ;
 }
 esse . atualização ( this.currentBar ) ; _
 }
 }
 
elementos personalizados. define ( 'seção-barra' , BarSection ) ;