Produktgruppeside – fleksibilitetsvisning med hjælp fra JQuery

Niklas fra DinTrainer efterspurgte en smart måde at skifte mellem de forskellige typer produkter og services, som han tilbød i sit website for personlig træning. Kort tid efter havde jeg med hjælp fra JQuery opbygget en brugergrænseflade, der var nem at gå til.

 

Niklas havde originalt opstillet sine produktgrupper i separate undersider, som man kunne tilgå via hovedmenuen. Det er der jo som sådan heller ikke noget galt ved. Han spurgte dog, om det kunne stilles op på en anden måde.

 

Jeg fik således ideen til at bygge en top-down struktur, hvor man havde grupperne som en visuel menu øverst, hvor man skulle kunne klikke sig ind til de forskellige lister – uden at man skulle skifte side hver gang. Meget af dynamikken skulle derfor udvikles i klient-siden (i modsætning til server-siden). Jeg vidste derfor, at jeg kunne bruge JQuery til at løse opgaven.

 

Simpelt spørgsmål om vis og skjul

 

Jeg skulle genbruge den grafiske visning af produkterne, så ved simpel opmærkning i HTML5 og CSS3 fik jeg hurtigt genskabt de data, der skulle bruges i mit lokale projekt. Det var heldigvis ikke en produktliste på 1000+ produkter, så det var hurtigt klaret. 

 

Derefter fik jeg brugt samme stil til at designe oversigten i toppen af indholdssiden. Det blev efterhånden komprimeret ned fra 4 til 3 produktgrupper, så de kunne nemt stilles op horisontalt.

 

Selve essensen af opgaven gik derefter på kun at vise de relevante produktlister ved at klikke på produktgrupperne. Klikkede man på de andre kategorier, skulle den forrige liste således skjules, og den nye liste fremvises.

 

Med hjælp fra JQuery metoderne show() og hide() kunne jeg nemt skabe denne konfiguration. I samme anledning fik jeg også givet resultatet en glidende effekt, hvilket hjalp til at skabe det flow, der var behov for i processen.

 

Niklas blev meget begejstret over den nye måde at give brugeren mulighed for at bladre rundt i produktlisterne. Desværre fik han aldrig implementeret funktionaliteten til hans website, så vi rigtigt kunne foretage brugertest af løsningen.