Så skapade vi en nedräknare i Umbraco

2023-07-24
nedräknare, umbraco

När jag byggde webbplatsen så kände jag tidigt att jag ville ha en countdown / nedräknare som räknar ner tiden kvar på kampanjer.
Det finns en uppsjö av såna och det är troligtvis i de flesta fall smartast (billigast och snabbast) att teckna månadsabonnemang än att bygga nytt från scratch.
Men som utvecklare tycker jag att det är roligt att skapa nytt samt jag får en funktion som är 100% anpassningsbar.

Jag började med att skapa strukturen i form av en dokumenttyp i Umbraco.
Där har jag med värden som bland annat startdatum, slutdatum, text, länk, länktext och om nedräknaren ska visas.

Strukturen för nedräknaren
Strukturen för nedräknaren

Sen var det dags för logiken. Jag fick kolla datumen som var satta som ValidTo och ValidFrom och jämföra med dagens datum för att se om kampanjen var aktiv och hur lång tid det i såna fall var kvar.
Behövde även kolla om ShowUrgency var aktiverad, det vill säga om den ska visas eller inte.

Efter det så var det dags att skapa en nedräkningsfunktion i javascript så att det går att följa nedräkningen i realtid, sekund för sekund.
Nu återstår det bara att fixa till utseendet så att det ser anständigt ut. För att göra det kollade jag på några exempel över hur andra nedräknare ser ut för att få inspiration och skapade sedan egen design.
Fantasilös som jag är så valde jag en eldliknande gradient som bakgrund för att illustrera att det är en het kampanj.

Koden la jag i en partial view och anropar den från huvudvyn för de sidor där jag önskar visa nedräknaren.
När tiden passerat så kommer nedräknaren att sluta visas automatiskt.

Resultatet går att se just nu på sidan.

Exempel på vår nedräknare
Exempel på vår nedräknare
Av: Tobias Dokken

Våra tjänster

Hemsidor

Vi skapar skräddarsydda hemsidor med fokus på konvertering och som är anpassade efter era behov och önskemål.

Analys av webbplats

Vi utför en granskning av hemsidor med fokus på utseende, prestanda, budskap som förmedlas och kommer med förslag på vad som kan förbättras.

Konsultering

Det är ofta svårt att veta vad man ska förvänta sig av sin hemsida. Då kan det vara bra att ta hjälp av en konsult som kan granska allt från systembeskrivning till testning.