Często na stronie internetowej, zwłaszcza w landing page stosujemy element odliczający czas do jakiegoś wydarzenia. Do tego celu wykorzystujemy w Divi moduł, który nazywa się timer. W przypadku odliczania dni do wydarzenia, domyślnie są ustawione trzy cyfry np. 183 dni lub 213 dni. Co w przypadku kiedy mamy tych dni 34? Moduł domyślnie wyświetla zero przed dniami, będzie to wyglądać w następujący sposób: 034. Zgodzisz się ze mną, że taki format nie jest korzystny wizualnie. Pokażę Ci sposób jak usunąć zero w przypadku tylko dni, oraz usuniemy zero we wszystkich liczbach czyli: dni, godziny, minuty i sekundy.

Zobacz przykład na mojej stronie LandingPage z zapisem na kurs WordPress’a

Aby usunąć zero, do naszej strony musimy dodać trochę kodu JavaScript. Logujemy się do naszego panelu WordPress’a, przechodzimy z lewej strony w menu do Divi, następnie wybieramy integracje. W polu „Dodaj kod <head> Twojego bloga” wklejamy poniższy kod. Zapisujemy ustawienia i cieszymy się timerem bez zera wiodącego.

Kod w przypadku usunięcia zera tylko dla pola „dni”

<script>
jQuery(function($){
    
    var olddays = $('.et_pb_countdown_timer .days .value');
    
    // Clone the days and hide the original. 
    // - Wraps new days element in a span to prevent Divi from updating it
    olddays.each(function(){
        var oldday = $(this);
        oldday.after(oldday.clone());
        oldday.next().wrap('<span></span>');
    }).hide();
    
    // Update the clone each second, removing the trailing zero
    (function update_days() {
        olddays.each(function(){
            var oldday = $(this);
            var days = oldday.html();
            if (days.substr(0,1) == '0') { days = days.slice(1); }
            oldday.next().find('.value').html(days);
        });
        setTimeout(function(){ update_days(); }, 1000);
    })()

});
</script>

Kod w przypadku usunięcia wszystkich zer w timerze

<script>
jQuery(function($){
    
    var oldvals = $('.et_pb_countdown_timer .value');
    
    // Clone the vals and hide the original. 
    // - Wraps new vals element in a span to prevent Divi from updating them
    oldvals.each(function(){
        $(this).after($(this).clone()).next().wrap('<span></span>');
    }).hide();
    
    // Update the clones each second, removing the trailing zeros
    setInterval(function () {
        oldvals.each(function(){
            var oldval = $(this);
            var val = oldval.html();
            val = trim_leading_zeros(val);
            oldval.next().find('.value').html(val);
        });
    }, 250);
    
    function trim_leading_zeros(str) {
        if ((str.length > 1) && (str.substr(0,1) === '0')) {
            return trim_leading_zeros(str.slice(1));
        }
        return str;
    }

});
</script>