Adicionando snippet de contagem regressiva à página do produto

Adding Countdown Snippet to Product Page

Compatibilidade: Todos os temas do Shopify funcionam melhor com os temas GRATUITOS do Shopify 2.0

Vi várias seções de contagem regressiva para o Shopify, mas não vi um relógio de contagem regressiva com opções para fornecer dias, horas ou minutos. Você pode usar essa contagem regressiva para o layout da sua senha, quando sua loja não estiver pronta para abrir.

Adicione um snippet de contagem regressiva em suas seções do Shopify, como a página do produto, com uma bela animação giratória.

Se você deseja adicionar uma contagem regressiva como uma seção, você pode verificar este código aqui .

Você pode verificar a loja de demonstração aqui . Senha: made4uo

O que você está comprando:

  • Uma seção de contagem regressiva
  • Capaz de ter contagem regressiva com dias, horas ou minutos
  • Capaz de adicionar título, richtext, botão, imagem de fundo e contagem regressiva.
  • A altura do contêiner depende da altura da imagem de fundo
  • Você também pode usar a cor de fundo

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
  • Não deixamos nem adicionamos códigos para anunciar em nosso site
  • Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Na sua página de administração, clique em Loja Online > Temas > Ações > Editar código
2. Na pasta Snippet, crie uma seção e nomeie-a como “contagem regressiva” e cole o código abaixo. Certifique-se de clicar em SALVAR

{% comment %}
{% render "countdown", date: "December 01, 2023", time: "12:52:20", am_pm: "AM", text_color: "#fff", background_color: "#000", alignment: "center" size: "20" %}

data: mês dia, ano
horário: HH:MM:SS
alinhamento: 'centro' ou 'esquerda' ou 'direita'

Ajuste o tamanho de acordo com o seu tema. Certifique-se de seguir o formato fornecido
{% endcomment %}
{% liquid
if am_pm == 'AM'
assign time = time
else
assign _time = time | split: ':'
atribuir tempo = _time[0] | mais: 12 | acrescentar: ':' | acrescentar: _time[1] | acrescentar: ':' | anexar: _time[2]
fim se

atribuir _data = data | remover: "," | dividir: " "
alinhamento de caso
quando 'deixou'
atribuir countdown_align = "flex-start"
quando 'certo'
atribuir countdown_align = "flex-end"
quando 'centro'
atribuir countdown_align = "centro"
outro
atribuir countdown_align = "centro"
caso final
%}
<snippet de contagem regressiva
data-date=" {{ _date[2] }} - {{ _date[0] }} - {{ _date[1] }} {{ time }} "
style="--countdown-snippet-color: {{ text_color }} ; --countdown-snippet-bg-color: {{ background_color }} ;"
>
<div class="countdown-snippet-container" style="justify-content: {{ countdown_align }} ">
<div class="time-section" id="dias">
<div class="grupo-tempo">
<div class="segmento de tempo">
<div class="snippet de contagem regressiva">
<div class="countdown-snippet__top">0</div>
<div class="countdown-snippet__bottom">0</div>
<div class="sobreposição de contagem regressiva">
<div class="countdown-overlay__top" 0></div>
<div class="countdown-overlay__bottom">0</div>
</div>
</div>
</div>
<div class="segmento de tempo">
<div class="snippet de contagem regressiva">
<div class="countdown-snippet__top">0</div>
<div class="countdown-snippet__bottom">0</div>
<div class="sobreposição de contagem regressiva">
<div class="countdown-overlay__top">0</div>
<div class="countdown-overlay__bottom">0</div>
</div>
</div>
</div>
</div>
<p>Dias</p>
</div>

<div class="time-section" id="horas">
<div class="grupo-tempo">
<div class="segmento de tempo">
<div class="snippet de contagem regressiva">
<div class="countdown-snippet__top">0</div>
<div class="countdown-snippet__bottom">0</div>
<div class="sobreposição de contagem regressiva">
<div class="countdown-overlay__top">0</div>
<div class="countdown-overlay__bottom">0</div>
</div>
</div>
</div>
<div class="segmento de tempo">
<div class="snippet de contagem regressiva">
<div class="countdown-snippet__top">0</div>
<div class="countdown-snippet__bottom">0</div>
<div class="sobreposição de contagem regressiva">
<div class="countdown-overlay__top">0</div>
<div class="countdown-overlay__bottom">0</div>
</div>
</div>
</div>
</div>
<p>Horas</p>
</div>

<div class="time-section" id="minutos">
<div class="grupo-tempo">
<div class="segmento de tempo">
<div class="snippet de contagem regressiva">
<div class="countdown-snippet__top">0</div>
<div class="countdown-snippet__bottom">0</div>
<div class="sobreposição de contagem regressiva">
<div class="countdown-overlay__top">0</div>
<div class="countdown-overlay__bottom">0</div>
</div>
</div>
</div>
<div class="segmento de tempo">
<div class="snippet de contagem regressiva">
<div class="countdown-snippet__top">0</div>
<div class="countdown-snippet__bottom">0</div>
<div class="sobreposição de contagem regressiva">
<div class="countdown-overlay__top">0</div>
<div class="countdown-overlay__bottom">0</div>
</div>
</div>
</div>
</div>
<p>Minutos</p>
</div>

<div class="time-section" id="segundos">
<div class="grupo-tempo">
<div class="segmento de tempo">
<div class="snippet de contagem regressiva">
<div class="countdown-snippet__top">0</div>
<div class="countdown-snippet__bottom">0</div>
<div class="sobreposição de contagem regressiva">
<div class="countdown-overlay__top">0</div>
<div class="countdown-overlay__bottom">0</div>
</div>
</div>
</div>
<div class="segmento de tempo">
<div class="snippet de contagem regressiva">
<div class="countdown-snippet__top">0</div>
<div class="countdown-snippet__bottom">0</div>
<div class="sobreposição de contagem regressiva">
<div class="countdown-overlay__top">0</div>
<div class="countdown-overlay__bottom">0</div>
</div>
</div>
</div>
</div>
<p>Segundos</p>
</div>
</div>
</countdown-snippet>
<roteiro>
classe CountdownSnippet estende HTMLElement {
construtor() {
super()
this.targetDate = nova data(this.dataset.date);
this.init();
}

iniciar() {
const contagem regressiva = setInterval(() => {
const isComplete = this.updateAllSegments();

if (éCompleto) {
clearInterval(contagem regressiva);
}
}, 1000);
}

updateSegmentValues(displayElement,overlayElement,valor) {
displayElement.textContent = valor;
overlayElement.textContent = valor;
}

getTimeSegmentElements(segmentElement) {
const segmentDisplay = segmentElement.querySelector('.countdown-snippet');
const segmentDisplayTop = segmentDisplay.querySelector('.countdown-snippet__top');
const segmentDisplayBottom = segmentDisplay.querySelector('.countdown-snippet__bottom');

const segmentOverlay = segmentDisplay.querySelector('.countdown-overlay');
const segmentOverlayTop = segmentOverlay.querySelector('.countdown-overlay__top');
const segmentOverlayBottom = segmentOverlay.querySelector('.countdown-overlay__bottom');

retornar {segmentDisplayTop, segmentDisplayBottom, segmentOverlay, segmentOverlayTop, segmentOverlayBottom};
}

updateTimeSegment(segmentElement, timeValue) {
const segmentElements = this.getTimeSegmentElements(segmentElement);

if (parseInt(segmentElements.segmentDisplayTop.textContent,10) === timeValue) {
retornar;
}

segmentElement.querySelector('.countdown-overlay').classList.add('flip');
this.updateSegmentValues(segmentElements.segmentDisplayTop, segmentElements.segmentOverlayBottom,timeValue);
segmentElements.segmentOverlay.addEventListener(
'fim da animação',
this.finishAnimation.bind(this, segmentElements, timeValue)
);
}

finishAnimation(segmentElements, timeValue) {
this.updateSegmentValues(segmentElements.segmentDisplayBottom,segmentElements.segmentOverlayTop, timeValue);
segmentElements.segmentOverlay.classList.remove('flip')
this.removeEventListener('animationend',this);
}

updateTimeSection(seçãoID, timeValue) {
const primeiroNumber = Math.floor(timeValue / 10) || 0;
const segundoNumber = timeValue % 10 || 0;
const seçãoElement = document.getElementById(seçãoID);
const timeSegments = sectionElement.querySelectorAll('.time-segment');

if(timeValue <= 0){
if(sectionID == "dias" || sectionID == "horas") {
seçãoElement.style.display = "nenhum";
}
}

this.updateTimeSegment(timeSegments[0], firstNumber);
this.updateTimeSegment(timeSegments[1], segundoNumber);
}


getTimeRemaining(targetDateTime) {
const agoraHora = Date.now();
const completo = nowTime >= targetDateTime;

se (completo) {
return {completo, segundos: 0, minutos: 0, horas: 0, dias: 0};
}

const segundosRemaining = Math.floor((targetDateTime - nowTime) / 1000);
const dias = Math.floor (segundos restantes / 86400)% 24;
const horas = Math.floor (segundos restantes / 3600)% 24;
const minutos = Math.floor (segundos restantes / 60)% 60;
const segundos = segundos restantes% 60;

return {completo, segundos, minutos, horas, dias};
}

atualizarTodosSegmentos() {
const timeRemainingBits = this.getTimeRemaining (
nova data(this.targetDate).getTime()
);

this.updateTimeSection('segundos', timeRemainingBits.seconds);
this.updateTimeSection('minutos', timeRemainingBits.minutos);
this.updateTimeSection('horas', timeRemainingBits.hours);
this.updateTimeSection('dias', timeRemainingBits.days);
retornar timeRemainingBits.complete;
}
}
customElements.define("fragmento de contagem regressiva", CountdownSnippet);
</script>
<estilo>
.countdown-snippet-container {
exibição: flexível;
alinhar itens: centro;
posição: relativa;
estouro: oculto;
lacuna: 10px;
}

.seção de tempo p {
margem: 1rem 0 0;
cor: var(-texto-contagem regressiva);
tamanho da fonte: {{ size | divided_by: 2 | append: "px"}}
}

.seção de tempo {
alinhamento de texto: centro;
tamanho da fonte: {{size | append: "px" }} ;
}

.grupo de tempo {
exibição: flexível;
lacuna: 5px;
}

.segmento de tempo {
exibição: bloco;
tamanho da fonte: {{size | append: "px" }} ;
peso da fonte: 900;
largura: 100%;
}

.snippet de contagem regressiva {
posição: relativa;
altura: 100%;
}

.snippet de contagem regressiva__top,
.snippet de contagem regressiva__bottom {
estouro: oculto;
alinhamento de texto: centro;
largura: 100%;
altura: 50%;
posição: relativa;
preenchimento: 0px 5px;
}

.snippet de contagem regressiva__top {
altura da linha: 1,55;
cor: #eee;
cor de fundo: var(--countdown-snippet-bg-color);
}

.snippet de contagem regressiva__bottom {
altura da linha: 0;
cor: var(-cor do trecho de contagem regressiva);
cor de fundo: var(--countdown-snippet-bg-color);
}

.sobreposição de contagem regressiva {
posição: absoluta;
superior: 0;
perspectiva: 400px;
altura: 100%;
largura: 100%;
}

.countdown-overlay__top,
.countdown-overlay__bottom {
posição: absoluta;
estouro: oculto;
alinhamento de texto: centro;
largura: 100%;
altura: 50%;
}

.countdown-overlay__top {
superior: 0;
altura da linha: 1,55;
cor: var(-cor do trecho de contagem regressiva);
cor de fundo: var(--countdown-snippet-bg-color);
origem da transformação: inferior;
}

.countdown-overlay__bottom {
inferior: 0;
altura da linha: 0;
cor: var(-cor do trecho de contagem regressiva);
cor de fundo: var(--countdown-snippet-bg-color);
borda superior: 2px preto sólido;
origem da transformação: topo;
filtro: contraste(0,6);
}

.countdown-overlay.flip .countdown-overlay__top {
animação: flip-top 0,8s linear;
}

.countdown-overlay.flip .countdown-overlay__bottom {
animação: flip-bottom 0,8s linear;
}

@keyframes flip-top {
0% {
transformar: girarX(0deg);
}
50%,
100% {
transformar: girarX(-90deg);
}
}

@keyframes flip-bottom {
0%,
50% {
transformar: girarX(90deg);
}
100% {
transformar: girarX(0deg);
}
}
</estilo>

3. Se estiver usando um Shopify 2.0 com líquido personalizado, você pode ir para o editor de tema. Na página do seu produto, adicione um bloco "Líquido personalizado" e cole o código abaixo

{% render " countdown ", date: " December 01, 2023 ", time: " 12:52:20 ", am_pm: " AM ", text_color: " #fff ", background_color: " #000 ", alignment: " center " size: " 20 " %}

Altere o texto em negrito para o valor de sua preferência.

NOTA: Certifique-se de seguir o formato de data, hora e cores. Tenha cuidado ao escolher o tamanho, pois ele pode depender do código atual do seu tema do Shopify.

Se você não possui um líquido customizado em seu tema, deverá colocar o código dentro de sua seção. Você deve ter conhecimento de onde deseja colocá-lo. Se você estiver tendo problemas, não hesite em nos contatar.

É isso (",)

0 comentários

Deixe um comentário