Jak na odpočítávadlo akce v e-shopu

Kód scriptu pro odpočet času u akční ceny

Kód scriptu pro odpočet času u akční ceny je praktickým nástrojem pro e-commerce platformy a webové stránky, které chtějí vytvořit pocit naléhavosti a motivovat zákazníky k rychlému nákupu. Tento skript umožňuje nastavit odpočítávání času pro speciální nabídky, slevy nebo limitované akční ceny přímo na produktové stránce.

Když zákazník uvidí, jak se čas do konce akce krátí, často to působí jako silný podnět pro rozhodnutí nakoupit. Kód zahrnuje nastavení cílového data a času a po jeho dosažení automaticky změní zobrazení ceny, aby reflektovalo konec akce. Jeho integrace je jednoduchá, a navíc nabízí přizpůsobení vizuálního zobrazení, aby odpočet přesně zapadal do designu webu.

<script>
    // Datum a čas konce
    var countDownDate = new Date("October 31, 2024 23:59:00").getTime();

    // Aktualizace každou sekundu
    var countdownFunction = setInterval(function() {

        // Aktuální datum a čas
        var now = new Date().getTime();

        // Rozdíl mezi aktuálním časem a časem konce
        var distance = countDownDate - now;

        // Převod času na dny, hodiny, minuty a sekundy
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Zobrazení výsledku
        document.getElementById("countdown-timer").innerHTML = days + " dnů " + hours + " hodin " +
        minutes + " minut " + seconds + " sekund ";

        // Pokud odpočet skončil
        if (distance < 0) {
            clearInterval(countdownFunction);
            document.getElementById("countdown-timer").innerHTML = "Čas vypršel!";
        }
    }, 1000);
</script>

HTML kód

Vložte na místo, kde chcete odpočítávadlo akce umístit.

<div class="countdown">
    <span id="countdown-timer">X dnů XX hodin XX minut XX sekund</span>
</div>