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)
    • Farver på tekst og baggrund
    • Oversættelse til andre sprog

    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 (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å 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 nedenstående kodestump i redigeringsfeltet med titlen "Til indsættelse bunden af <body>":

    1. Indsæt koden under "Til indsættelse bunden af <body>". Bemærk: Hvis koden indsættes i <head> tagget vil dokumentet endnu ikke være færdiggenereret når scriptet afvikles, og vil derfor fejle
    2. Husk at gemme dine ændringer
        
            <script type="module">
        const settings = {
            'Title': 'Dage indtil black friday',
            'End_time': 'nov 26, 2050 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>
        

    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.

    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 Friday', '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 26, 2022 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. 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

    • Læs mere om hvordan du klargør shoppen til Black Friday og andre mærkedage i denne artikel
    • Du kan læse mere om tilpasning af design her
    • Læs mere om ændring af design med CSS i denne artikel
    • Læs mere om sikker redigering af design templates i denne artikel