Lajittelujärjestyksen valinta

Yksi asioista jonka koen kusevan mm. monissa verkkokaupoissa on tuotteiden lajittelujärjestyksen valinta. Usein homma menee sillä tavalla, että tuotteet voi lajitella vain yhden säännön mukaisesti (esim. pelkän hinnan mukaan). Toisaalta jos useampi taso on mahdollista valita, niin homma pitää hoitaa käänteisessä järjestyksessä, eli jos haluan vaikka järjestyksen saatavuus, hinta ja nimi, niin tuotteet pitää ensin järjestää nimen mukaan (sivu latautuu uudelleen), sitten hinta (taas sivu latautuu uudelleen) ja lopulta saavatuuden mukaan (ja taas sivu latautuu uudelleen).

Joten sitten leikin vähän CSS:n kanssa: Sort order selector

Tuotteiden lajittelujärjestys

Tekninen toteutus on semmoinen, että taustalla on radiopainikkeita, joihin viittaavat label-elementit. Radionappulat on piilotettu, mutta label-elementtien napsuttelu aktivoi radiopainikkeita. Sitten vaan label-elementtejä siirrellään sen verran nätisti, että käyttäjälle kerrotaan virheelliset valinnat ja ensimmäisiksi kullakin rivillä sijoitetaan se nykyinen valinta.

Käyttöliittymä on isompikokoinen kuin haluaisin, mutta halusin toteuttaa pelkän CSS:n voimalla toimivan ratkaisun tähän hankalaan ongelmaan. jQueryllä sitten voisikin toteuttaa jo aika näppärän käyttöliittymän…