Wózek Szablony CSS

Konfigurowalne szablony CSS koszyka dla interfejsów sklepów

Dwa sklepy mogą sprzedawać te same trzy produkty i prezentować je w koszykach, które wyglądają zupełnie inaczej. Większość osób przeglądających szablony CSS koszyka szuka gotowego wyglądu z arkuszem stylów, który można później dostosować. Każdy szablon określa, jak prezentowane są pozycje zamówienia oraz ceny i która kwota przyciąga wzrok jako pierwsza. Wiele projektów wykorzystuje banery promocyjne i bloki kuponów skomponowane wokół grafiki koszyka.

Kompaktowe wiersze lub przestronne karty

Szablony prezentujące pełne zamówienie różnią się kilkoma widocznymi cechami:

• Kompaktowe wiersze z małymi miniaturami sprawdzają się w sklepach, w których kupuje się wiele rzeczy naraz, takich jak artykuły papiernicze czy akcesoria do telefonów.
• Elementy w stylu kart zapewniają każdemu produktowi duże zdjęcie i obszerne marginesy wewnętrzne, co pasuje do sklepu meblowego.
• Podsumowanie może znajdować się w bocznej kolumnie lub zamykać listę jako wyrazisty blok.
• Cienkie linie podziału, delikatne cienie lub stonowane tła czytelnie oddzielają poszczególne pozycje.

Elementy, z którymi kupujący wchodzą w interakcję przed płatnością

W każdym wierszu na pierwszym planie znajdują się miniatura i nazwa produktu, a pod nimi mniejszym, szarym drukiem wyświetlany jest wariant. Ilość, cena oraz link usuwania są zazwyczaj wyrównane do prawej strony.

Licznik z przyciskami plus i minus działa naturalnie na ekranach dotykowych, podczas gdy pole numeryczne lub mała lista rozwijana pozwalają zaoszczędzić miejsce. Dopracowany szablon przyciemnia przycisk minusa, gdy ilość wynosi 1, dzięki czemu nikt nie klika go bez potrzeby.

W podsumowaniu wiersze sumy częściowej i rabatu mają lżejszy krój pisma, podobnie jak szacunkowy koszt wysyłki, jeśli występuje. Całkowita kwota otrzymuje największą wagę wizualną na ekranie. Przycisk przejścia do kasy wymaga wyraźnych stanów najechania kursorem i fokusu, a przycisk aktualizacji może pozostać wyszarzony do momentu wprowadzenia zmian.

Gdy standardowe ustawienia szablonu nie pozwalają dopracować konkretnego detalu, opcje niestandardowego CSS w Nicepage umożliwiają dodanie reguł dla pojedynczego elementu lub całej witryny. Pozwala to łatwo skorygować na przykład odstępy w liczniku ilości czy pogrubienie sumy częściowej.

Rozmieszczenie cen na telefonach

Na wąskim ekranie wiersz koszyka znany z wersji desktopowej musi zmienić swój układ. Niektóre szablony umieszczają miniaturę i tytuł nad licznikiem ilości. Inne przypinają cenę do prawej krawędzi, zachowując liczby w jednej kolumnie. Układy Grid i Flexbox radzą sobie z tym doskonale, ponieważ wiersz może płynnie zmienić układ w punkcie przerwania, zachowując wyrównanie cen.

Nazwa produktu w stylu „Sweter merino z okrągłym dekoltem, Grafitowy, Rozmiar XL” najszybciej obnaża niedociągnięcia: w słabym szablonie tekst zawija się i spycha cenę z właściwej pozycji.

Dobry szablon CSS koszyka niemal nie wymaga poprawek. Wzrok od razu trafia na kwotę całkowitą, a przyciski wyglądają jednoznacznie jak przyciski. Przejście do kasy pozostaje łatwo dostępne na telefonie, a dopasowanie kolorów i czcionek staje się czystą formalnością.