Countdown timer/clock on password page administrable

mariocotomd
New Member
3 0 0

Investigating thoroughly and manage to make the code of the countdown counter manageable, when I reach the end I put a code to hide it, I'm still working on the beginning part, but it works to give you an end date

Name Sections: countdown-bar.liquid

 

{% if section.settings.enable_countdown %}


    <div class="contador-publicitario">


          {% for block in section.blocks  %}
        <a href="{{ block.settings.promo_link }}">
            <div class="container">
            <h1>{{ block.settings.titulo_pricipal }}</h1>
     {% if block.settings.timer_date != blank %}
              <div class="timer">
                <div class="timer-display">
                  <div class="timer-block timer-days">
                    <span class="timer-block__num js-timer-days">00</span>
                    <span class="timer-block__unit">Días</span>
                  </div>
                  <div class="timer-block timer-hours">
                    <span class="timer-block__num js-timer-hours">00</span>
                    <span class="timer-block__unit">Horas</span>
                  </div>
                  <div class="timer-block timer-minutes">
                    <span class="separador">:</span>
                    <span class="timer-block__num js-timer-minutes">00</span>
                    <span class="timer-block__unit">Minutos</span>
                  </div>
                  <div class="timer-block timer-seconds">
                    <span class="separador">:</span>
                    <span class="timer-block__num js-timer-seconds">00</span>
                    <span class="timer-block__unit">Segundos</span>
                  </div>
                </div>
              </div>


              <script type="text/javascript">

                var second = 1000,
                    minute = second * 60,
                    hour = minute * 60,
                    day = hour * 24;
                var countDown = new Date({{ block.settings.timer_date | json }}).getTime(),
                    x = setInterval(function() {
                    var now = new Date().getTime(),
                        distance = countDown - now;
                        document.querySelector('.js-timer-days').innerText = Math.floor(distance / (day)),
                        document.querySelector('.js-timer-hours').innerText = Math.floor((distance % (day)) / (hour)),
                        document.querySelector('.js-timer-minutes').innerText = Math.floor((distance % (hour)) / (minute)),
                        document.querySelector('.js-timer-seconds').innerText = Math.floor((distance % (minute)) / second);

                      if($(".js-timer-days").text() == "-1") {
                         $('body').addClass("ocultar-contador");
                      }
                  }, second)
                
              </script>
              
              

    {% endif %}



        <div class="row wrapper-contador-publicitario">
            <div class="col-md-6 enlaces-textos">
                <div class="col-md-8">
                    <h2>{{ block.settings.nombre_promo }}</h2>
                </div>
                <div class="col-md-4 button">
                    {{ block.settings.nombre_promo_enlace }}
                </div>
            </div>
        </div>  
              </div>
         </a>      
          {% endfor %} 



    </div>
  
{% endif %}


{% schema %}
  {
    "name": "Contador Publicitario",
 	"max_blocks": 1,
    "settings": [ {
          "type": "checkbox",
          "id": "enable_countdown",
          "default": false,
          "label": "Activar Contador publicitario"
      }
	],
    "blocks" : [
          {
            "type": "images",
            "name": "Bloque",
            "settings": [
			 {
                  "type": "text",
                  "id": "titulo_pricipal",
                  "label": "Titulo principal"
              },
              {
                  "type": "text",
                  "id": "timer_date",
                  "label": "Fecha de finalizacion y hora",
                  "info": "Formato: Sept 30, 2021 00:00"
              },
              {
                  "type": "text",
                  "id": "nombre_promo",
                  "label": "Sub Titulo"
              },
			  {
                  "type": "text",
                  "id": "nombre_promo_enlace",
                  "label": "Texto de Boton"
              },
              {
                  "type": "url",
                  "id": "promo_link",
                  "label": "Link URL"
             }
         ]
       }
     ],
    "presets": [{
        "name": "Contador Publicitario",
        "category": "Image",
        "settings": {
        },
        "blocks": [
          {
            "type": "images"
          }
        ]
      }]
  }
{% endschema %}

 

/* Contador Ofertero */

.timer {
    /*background: #f6fafd;
    padding: 10px;
    margin: 10px 0;*/
  }
  .timer--expired {
    display: none;
  }
  .timer__title {
    @extend .paragraph;
    text-align: center;
  }
  .timer-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;
    width: 326px;
    margin: 0 auto;
  }
  .timer-block {
    position: relative;
    width: 61px;
    /*width: 25%;
    padding: 0 0;*/
    &:not(:last-child):after {
      content: ':';
      position: absolute;
      right: 0;
      top: 3px;
    }
  }
  .timer-block__num,
  .timer-block__unit {
    display: block;
    text-align: center;
  }


.contador-publicitario {
	background: #FFCB05;
    border: 5px solid #004B8C;
    text-align: center;
}

.contador-publicitario h1 {
    font-weight: 600;
    font-size: 33px;
    margin: 16px 0 6px;
  	color: #004B8C;
}

.timer-block__num {
	background: #fff;
    color: #004b8c;
    display: inline-block;
    border-radius: 12px;
    padding: 5px;
    font-size: 30px;
    width: 56px;
    box-shadow: 1px 1px 7px #828282;
    font-weight: 700;
    font-family: 'Century Bold',arial;
}

.timer-block .separador {
    color: #004b8c;
    font-size: 45px;
    position: absolute;
    left: -18px;
    z-index: 10;
    top: -8px;
}

.timer-block__unit {
	text-transform: uppercase;
    margin-top: 7px;
    font-size: 13px;
    color: #004b8c;
    font-family: 'Century Bold',arial;
}

.wrapper-contador-publicitario .enlaces-textos {
	margin: 9px auto 8px;
    float: none;
    overflow: hidden;
}

.wrapper-contador-publicitario .enlaces-textos h2 {
	font-family: 'Century Bold',arial;
    text-transform: none;
    font-size: 20px;
}

.wrapper-contador-publicitario .enlaces-textos a {
	background: #314dcb;
    color: #fff;
    vertical-align: initial;
    padding: 15px 27px;
    display: inline-block;
    border-radius: 50px;
    font-weight: 600;
    font-family: 'Century Bold',arial;
}

.timer-seconds .timer-block__unit {
	margin-left: -8px;
}

.ocultar-contador .contador-publicitario {
	display: none;
}

mariocotomd_0-1632412933596.png

 

mariocotomd_3-1632413046967.png

 

mariocotomd_2-1632413030553.png

mariocotomd_4-1632413066799.png

 

0 Likes