Counter (nedtællingsfunktion)

I denne artikel:


Sæt fokus på dine begivenheder

Med denne smarte app kan du indsætte en nedtællingsfunktion på din webshop. Du kan bruge app'en til at gøre opmærksom på en begivenhed du afholder på en bestemt dato, en konkurrence eller tidsbegrænsede tilbud/ kampagner. App'en sætter fokus på de vigtige tilbud og hjælper dig med at sælge mere.

Eksempelvis:

  • Black Friday
  • Cyber Monday
  • Julehandel
  • Mærkedage
  • Udsalgsdage
  • Arrangementer, konkurrencer, lodtrækning mv.

 

Features

Når du holder udsalg på din webshop, vil du gerne have at flest muligt ser de ekstra gode priser på dine produkter. Brug nedtællingsfunktionen til at sætte fokus på udsalget og sælg endnu mere!

Du kan selv indstille

  • Begivenhedens navn
  • Dato for begivenheden (der tælles ned fra den aktuelle dato)
  • Udseende (via CSS)

Når datoen er nået, skjules tælleren automatisk.

 

Sådan kommer du i gang

For at installere denne app på din webshop, skal du blot kopiere en lille stump kode og sætte den ind i dit design. Vi gennemgår det her, trin for trin.

Bemærk: Indsætning af JavaScript og CSS kræver at din nuværende abonnementspakke understøtter dette. Hvis du er i tvivl om hvilken pakke du har, er du velkommen til at kontakte vores kundeservice.

  1. Gå ind i Design manager og find den ønskede design template. Klik på knappen Ret design, og klik derefter på knappen Indsæt javascript i toppen af siden. Indsæt herefter følgende kodestump i redigeringsfeltet med titlen "Til indsættelse i toppen af <body:>":

        <script type="text/javascript">
        const settings = {
        'Title': 'Dage indtil black friday',
        'End_time': 'apr 22, 2020 08:00:00',
        'Days': 'Dage',
        'Hours': 'Timer',
        'Minutes': 'Minutter',
        'Seconds': 'Sekunder'
        };

        let template = document.createElement('div');
        template.classList = 'sw-counter wrapper';
        template.innerHTML = `<h2 id="head">${settings['Title']}</h2>
        <ul>
        <li><span id="days"></span>${settings['Days']}</li>
        <li><span id="hours"></span>${settings['Hours']}</li>
        <li><span id="minutes"></span>${settings['Minutes']}</li>
        <li><span id="seconds"></span>${settings['Seconds']}</li>
        </ul>`;
        document.body.prepend(template);

        const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

        let countDown = new Date(settings['End_time']).getTime();
        const x = setInterval(function () {
        let now = new Date().getTime(),
        distance = countDown - now;

        document.querySelector('.sw-counter #days').innerText = Math.floor(distance / (day)),
        document.querySelector('.sw-counter #hours').innerText = Math.floor((distance % (day)) / (hour)),
        document.querySelector('.sw-counter #minutes').innerText = Math.floor((distance % (hour)) / (minute)),
        document.querySelector('.sw-counter #seconds').innerText = Math.floor((distance % (minute)) / second);

        // Hide when date is reached
        if (distance < 0) {
        clearInterval(x);
        document.querySelector('.sw-counter.wrapper').style.display = 'none';
        }

        }, second);
        </script>
    

Bemærk: Så snart du klikker gem vil nedtællingsfunktionen være online. Du bør derfor foretage dine indstillinger (tilpasning af titel, dato og tidspunkt i koden) inden du gemmer app-koden:

  • Title: Denne skal sættes til titlen, som der ønskes der skal vises. Dette kunne være "Dage til Black Friday", eller "Dage til jul" eventuelt.
  • End_time: Denne setting bruges til at sætte tiden, som man ønsker at countdown appen skal tælle ned til.
  • Resterende indstillinger: Disse indstillinger er Days, Hours, Minutes, Seconds. Disse er brugt til at lave oversættelserne til tidsenhederne, som bruges i countdown koden.
  1. Følgende kode (CSS) benyttes til at bestemme counterens udseende på shoppen (styling af elementerne). Den indsættes via knappen Indsæt CSS, som du finder ved siden af knappen Indsæt javascript (som beskrevet ovenfor):

        .sw-counter.wrapper {
        color: #f1f1f1;
        text-align: center;
        /*position: fixed;*/
        top: 0;
        left: 0;
        right: 0;
        background: #1f1f1f;
        box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.2), 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.14), 0 0.2rem 0.1rem 0 rgba(0, 0, 0, 0.12);
        }

        .sw-counter h2 {
        color: #f1f1f1;
        font-weight: semibold;
        text-transform: uppercase;
        }

        .sw-counter li {
        display: inline-block;
        font-size: 1.5em;
        list-style-type: none;
        padding: 0 1em .5em;
        text-transform: uppercase;
        }

        .sw-counter li span {
        display: block;
        font-size: 4.5rem;
        }

        html,
        body {
        margin: 0;
        }
    

 

Eksempel

Hvis du ønsker at afprøve tælleren uden for shoppen, kan du indsætte koden i en normal HTML-fil, og åbne den i din browser.

Du kan downloade et eksempel her (zip-filen indeholder filen "counter-test.html"):
counter-test.zip

Når åbner siden i din browser vises tælleren i toppen af siden:

Bemærk: Hvis du ikke sætter tidspunkt til en fremtidig dato, vises tælleren ikke.

 

Nyttige links