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.

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 i toppen af <body:>":

  1. Indsæt koden under "Til indsættelse i toppen 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="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;

if (isValidDate(settings['End_time'])) {
	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';
			console.log('The countdown has finished');
		}

	}, second);
} else {
	console.error('End date is invalid');
}

function isValidDate(d) {
	return d instanceof Date && !isNaN(d);
}
</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 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")
  • Resterende indstillinger: Disse indstillinger er Days, Hours, Minutes, Seconds. Disse er brugt til at lave oversættelserne til tidsenhederne, som bruges i countdown koden.

Nedenstående 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:

Husk at gemme dine ændringer.


        .sw-counter.wrapper {
        color: #f1f1f1;
        text-align: center;
        position: sticky;
        z-index: 999;
        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.

Da der ikke er angivet font (skrifttype) i CSS-koden benyttes den generelle font som er valgt i shoppens designindstillinger. Og hvis du downloder og åbner vores eksempel ("counter-test.html") vil browseren benytte fonten "Times New Roman", medmindre du specificerer en anden font.

Hvis du f.eks. vil ændre farver på tælleren, kan du ændre hhv. "color" og "background" til de ønskede farvekoder og sætte en anden font, som i dette eksempel:

Sæt følgende properties i CSS'en, for at ændre farve og font:

sw-counter.wrapper:

  • font: sans-serif;
  • color: #ffffff;
  • background: #008000;

Herover har vi tilføjet "font", da vi ønsker at benytte en anden end standarden.

.sw-counter h2:

  • color: #ffffff;

Herover sættes farven på overskriften "Dage indtil Black Friday", som på den måde kan differentieres fra nedtællingen, hvis man ønsker det.

Du kan læse mere om farvekoder og CSS i denne artikel.

 

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