¡Crea tu cuenta regresiva GRATIS en Shopify!

¡Crea tu cuenta regresiva GRATIS en Shopify!

Programa tu cuenta regresiva grátis en Shopify mediante el código, y escoge si quieres poner esta en uno, múltiples, o más productos!

 

Te comparto los códigos:

Fragmentos:

 

Fragmento (snippet)
{% if end_date != blank %}

<div class="temporizador">

{% if title != blank %}<h3 class="temporizador__title">{{ title }}</h3>{% endif %}
<div class="temporizador-display">
<div class="temporizador-block">
<span class="temporizador-block__numeros js-temporizador-dias">00</span>
<span class="temporizador-block__unidades">Días</span>
</div>

<div class="temporizador-block">
<span class="temporizador-block__numeros js-temporizador-horas">00</span>
<span class="temporizador-block__unidades">Horas</span>
</div>

<div class="temporizador-block">
<span class="temporizador-block__numeros js-temporizador-minutos">00</span>
<span class="temporizador-block__unidades">Minutos</span>
</div>

<div class="temporizador-block">
<span class="temporizador-block__numeros js-temporizador-segundos">00</span>
<span class="temporizador-block__unidades">Segundos</span>
</div>

</div>

</div>

<style>

.temporizador {
background: #f6fafd;
padding: 10px;
margin: 10px 0;
}

.temporizador--terminado {
display: none;
}

.temporizador__title {
@extend .paragraph;
text-align: center;
}

.temporizador-display {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 5px;
}

.temporizador-block {
position: relative;
width: 25%;
padding: 0 10px;
&:not(:last-child):after {
content: ':';
position: absolute;
right: 0;
top: 3px;
}

}

.temporizador-block__numeros, {

}

.temporizador-block__unidades {
display: block;
text-align: center;
}

</style>

<script type="text/javascript">

var segundo = 1000,
minuto = segundo * 60,
hora = minuto * 60,
dia = (hora * 24);

var countDown = new Date('{{- end_date -}}').getTime(),
x = setInterval(function() {
var now = new Date().getTime(),

distance = countDown - now;

document.querySelector('.js-temporizador-dias').innerText = Math.floor(distance / (dia)),
document.querySelector('.js-temporizador-horas').innerText = Math.floor((distance % (dia)) / (hora)),
document.querySelector('.js-temporizador-minutos').innerText = Math.floor((distance % (hora)) / (minuto)),
document.querySelector('.js-temporizador-segundos').innerText = Math.floor((distance % (minuto)) / segundo);
}, segundo)

</script>

{% endif %}
Codigo para Seccion de producto

{% include 'temporizador',
title: "Apúrate, la oferta termina en:",
end_date: "Dic 31, 2022"
%}

Puede que te interese

Steve Krug: Una mirada a su libro "Don't make me think" y las prácticas recomendadas para un buen User Experience
Conectando G4 a cuenta estándar de Shopify

99 comentarios

kjqiwvjoth

kjqiwvjoth

¡Crea tu cuenta regresiva GRATIS en Shopify!
[url=http://www.g1g6gwwt89n048fa861c6853jb3f5vuns.org/]ukjqiwvjoth[/url]
akjqiwvjoth
kjqiwvjoth http://www.g1g6gwwt89n048fa861c6853jb3f5vuns.org/

sogrtktwws

sogrtktwws

¡Crea tu cuenta regresiva GRATIS en Shopify! – LatteMedia
asogrtktwws
[url=http://www.govq57yr5661288580g1omwo7xr5wfz7s.org/]usogrtktwws[/url]
sogrtktwws http://www.govq57yr5661288580g1omwo7xr5wfz7s.org/

dqfghchcji

dqfghchcji

¡Crea tu cuenta regresiva GRATIS en Shopify! – LatteMedia
[url=http://www.gb8yvxr6ci0r9300v200s28k5cm6e9n9s.org/]udqfghchcji[/url]
adqfghchcji
dqfghchcji http://www.gb8yvxr6ci0r9300v200s28k5cm6e9n9s.org/

fhoferbyeo

fhoferbyeo

¡Crea tu cuenta regresiva GRATIS en Shopify! – LatteMedia
fhoferbyeo http://www.grj2c5xn5py245k65q8jv8655yku9g76s.org/
afhoferbyeo
[url=http://www.grj2c5xn5py245k65q8jv8655yku9g76s.org/]ufhoferbyeo[/url]

Hello World! https://apel.top/go/gu4winrshe5dgoju?hs=63e5ef46c3833fd401c76df13367e118&

Hello World! https://apel.top/go/gu4winrshe5dgoju?hs=63e5ef46c3833fd401c76df13367e118&

x0ppt1

Dejar un comentario

Este sitio está protegido por reCAPTCHA y se aplican la Política de privacidad de Google y los Términos del servicio.