• Sæt nedtælling på din shop (counter)
  • Design-udvidelser
  • Integrationer og Apps

    • 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 appen til at gøre opmærksom på en begivenhed du afholder på en bestemt dato, en konkurrence eller tidsbegrænsede tilbud og kampagner. Appen sætter fokus på de vigtige tilbud og hjælper dig med at sælge mere.

      Se også: Bliv klar til udsalg med vores Black Week tema-artikel

       

      Du kan benytte nedtælling til:

      • Black Week og Black Friday
      • Cyber Monday
      • Valentine's Day
      • Singles Day
      • Julehandel
      • Januarudsalg
      • Mærkedage
      • Generelle udsalgsdage, arrangementer, konkurrencer, lodtrækning mv.

       

      Attention  Bemærk: Funktionen understøtter i nuværende version følgende designs:

       • Classic
      • Ilumina
      • Palette
      • Rooty
      • Simpl
      • Sprout
      • Terrarium

      Hvis du benytter et andet design end dem vi har listet herover, eller hvis du har foretaget tilretninger af dit nuværende design, så kan det være at du skal tilpasse tælleren før den vises korrekt på din shop.

       

      Features

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

      Du kan selv indstille:

      • Begivenhedens navn.
      • Dato for begivenheden (tæller ned fra den aktuelle dato til den angivne dato).
      • Farver på tekst og baggrund.
      • Oversættelse til andre sprog.

      Når datoen er nået, skjules tælleren automatisk. Dette kan kombineres med et periodestyret billedbanner, der kan tage over, når tælleren er skjult, for at henvise til den pågældende begivenhed. Du kan se eksempler på dette i denne artikel.

       

      Sådan gør du

      For at installere denne app på din webshop, skal du blot kopiere en lille stump kode (JavaScript) og sætte den ind i dit design. Vi gennemgår indsætning af JavaScript trin for trin i denne artikel.

      Bemærk: Indsætning af JavaScript 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.

      Gå til Webshop > Design klik på menuen Handlinger og vælg Indsæt JavaScript:

      Indsæt nedtællingskoden (se sektionen herunder) i redigeringsfeltet med titlen Sidens indhold (bunden):

      Husk at gemme dine ændringer. Bemærk: Hvis koden f.eks. indsættes i Sidens header, så vil siden ikke være færdigindlæst når scriptet afvikles, og det vil derfor ikke fungere efter hensigten.

       

      Her er koden

      
<script type="module">
    const settings = {
        'Title': 'Dage indtil black friday',
        'End_time': 'nov 26, 2035 00:00:00',
        'Days': 'Dage',
        'Hours': 'Timer',
        'Minutes': 'Minutter',
        'Seconds': 'Sekunder',
        'Font': 'inherit',
        'Text_color': '#f1f1f1',
        'Background': '#1f1f1f'
    };

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

    let countDown = new Date(settings.End_time).getTime();
    let now = new Date().getTime();
    let distance = 0;

    if ((countDown - now) >= 0) {
        const element = makeTemplate()

        bindCounterAnimation(element)
        appendTemplateSupport(element)

        document.body.prepend(element)
    }

    function appendTemplateSupport (element) {
        let navSelector = '';
        switch (platform.template.meta.PARENT) {
            case 'template105':
            case 'template007':
            case 'template003':
            case 'template002':
                navSelector = '.site-header';
                break;
        
            default:
                navSelector = '.site-navigation';
                break;
        }

        const nav = document.querySelector(navSelector);
        const navStyles = window.getComputedStyle(nav);

        if (['absolute','fixed','sticky'].includes(navStyles.getPropertyValue('position'))) {
            offsetNav();
            window.addEventListener('resize', offsetNav);
            
            function offsetNav() {
                const nav = document.querySelector(navSelector);
                const navStyles = window.getComputedStyle(nav);
                const borderBottomWidth = window.getComputedStyle(nav).getPropertyValue('border-bottom-width');
                const offsetvalue = (parseFloat(borderBottomWidth) + parseFloat(navStyles.height) + nav.offsetTop) + 'px';

                if (platform.template.meta.PARENT === 'template005') {
                    element.style['padding-top'] = offsetvalue;
                } else {
                    element.style['margin-top'] = offsetvalue;
                }
            }
        }
    }

    function bindCounterAnimation (element) {

        updateCounter();

        const x = setInterval( () => {
            updateCounter();
            // Hide when date is reached
            if (distance <= 0) {
                clearInterval(x);
                element.style.display = 'none';
            }
        }, second);

        function updateCounter () {
            now = new Date().getTime();
            distance = countDown - now;

            element.querySelector('#days').innerText = Math.floor(distance / (day));
            element.querySelector('#hours').innerText = Math.floor((distance % (day)) / (hour));
            element.querySelector('#minutes').innerText = Math.floor((distance % (hour)) / (minute));
            element.querySelector('#seconds').innerText = Math.floor((distance % (minute)) / second);
        }
    }

    function makeTemplate () {
        let template = document.createElement('div');
        template.classList = 'w-counter wrapper';
        template.innerHTML = `
            ${styles()}
            <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>`;

        return template
    }

    function styles () {
        return `<style>
            .w-counter.wrapper {
                color: ${settings.Text_color};
                font-family: ${settings.Font};
                text-align: center;
                z-index: 999;
                padding: 1em 0;
                background: ${settings.Background};
                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);
            }
            .w-counter h2,
            .w-counter ul {
                padding: 0;
                margin: 0;
            }
            .w-counter h2 {
                color: ${settings.Text_color};
                font-family: inherit;
                font-weight: semibold;
                text-transform: uppercase;
            }
            .w-counter li {
                display: inline-block;
                font-size: 1.5em;
                list-style-type: none;
                padding: 0 0.5em;
                text-transform: uppercase;
            }
            .w-counter li span {
                display: block;
                font-size: 4.5rem;
            }
            @media (max-width: 960px){
                .w-counter h2 {
                    margin: 0;
                    padding: 10px 0;
                }
                .w-counter li {
                    font-size: 1em;
                    padding: 0 0.2em 1em 0.2em;
                }
                .w-counter li span {
                    display: inline;
                    font-size: 1em;
                    margin-right: 5px;
                }
            }
            ${platform.template.meta.PARENT === 'template004' ? `
                body {
                    padding-top: 0;
                }
                .w-counter.wrapper {
                    margin-bottom: 2em;
                }
            `:''}
            ${platform.template.meta.PARENT === 'template105' ? `
                .site-header {
                    top: 0;
                }
                .site-main-wrapper {
                    padding-top: 0 !important;
                }
            ` : ''}
            ${platform.template.meta.PARENT === 'template104' ? `
                .w-counter h2:before {
                    display: none;
                }
            ` : ''}
            ${platform.template.meta.PARENT === 'template007' ? `
                .navbar-placeholder {
                    height: 0;
                }
            ` : ''}
            ${platform.template.meta.PARENT === 'template003' ? `
                @media (min-width: 960px){
                    .site-corporate {
                        margin-bottom: 0;
                        position: absolute;
                        top: 0;
                        width: 100%;
                    }
                }
                @media (max-width: 960px){
                    .w-counter.wrapper {
                        margin-top: 0 !important;
                    }
                }
            ` : ''}
            ${platform.template.meta.PARENT === 'template002' ? `
                div.site {
                    padding-top: 0;
                }
            ` : ''}
        </style>`
    }
</script>

      Download

       

      Som nævnt øverst i artiklen indsættes koden på designet under Webshop > Design via funktionen Handlinger > Indsæt Javascript i feltet Sidens indhold (bunden).

      Bemærk: Så snart du klikker Gem i design manageren vil nedtællingsfunktionen være online, og hvis den nuværende dato matcher scriptets indstilling vil du kunne se tælleren i toppen af siden. Du bør derfor foretage dine indstillinger (tilpasning af titel, dato og tidspunkt i koden) inden du gemmer app-koden. Du kan også arbejde på en kopi af dit design så du undgår utilsigtede ændringer på din live-shop.

       

      Konfiguration af scriptet

      I toppen af koden har du mulighed for at sætte følgende værdier:

      • Title: Denne skal sættes til titlen, som vises i toppen af counteren. Dette kan f.eks. være 'Dage til Black Week', 'Dage til jul' eller 'Dage til den store premiere' mv.
      • End_time: Denne værdi bruges til at sætte tiden som man ønsker at countdown appen skal tælle ned til. Vigtigt: Husk at angive måned på engelsk (Oktober = "oct", Maj = "may" etc.) og benyt formatering magen til vores eksempel, f.eks. 'nov 20, 2023 00:00:00'.
      • Text_color: Her indsættes evt. farvekode til teksten i banneret.
      • Background: Her indsættes evt. farvekode til baggrunden af banneret.
      • Font: Her indsættes navn på evt. alternativ font (skrifttype). Værdien "inherit" gør at shoppens nuværende font benyttes.
      • Andre variabler: Days, Hours, Minutes og Seconds benyttes til at lave oversættelserne til tidsenhederne, som bruges i countdown koden. Disse kan tilpasset hvis du benytter koden på andre sprog.

      TIP: Du kan benytte denne farvevælger til at generere nye farvekoder. Kopier farvekoderne fra felterne som vist her:

      En korrekt CSS-farvekode starter med "#" og hele strengen kopieres over så f.eks. #ff0000 vil stå som 'Text_color': '#ff0000' i vores counter kode.

       

      Nyttige links