Kosz Szablony CSS

Edytowalne szablony CSS koszyka

Szablony CSS koszyka określają, jak koszyk zachowuje się na ekranie: jak wyrównują się poszczególne wiersze, jak zwijają się na telefonie oraz jak suma końcowa oddziela się od listy produktów powyżej. Większość kluczowej pracy dotyczy sytuacji brzegowych, takich jak nazwa produktu zajmująca dwa wiersze czy link usuwania umieszczony zbyt blisko przycisku przejścia do kasy.

Wyrównanie Flexbox na wąskich ekranach

Wiersz koszyka łączy elementy o bardzo różnych szerokościach. CSS Grid utrzymuje stabilne kolumny miniatur, tytułów i cen wzdłuż całej listy. Wewnątrz pojedynczej komórki Flexbox układa przyciski oraz liczbę selektora ilości w jednej linii.

Na wąskim ekranie wiersz zazwyczaj układa się pionowo, a kontrolka ilości i cena wędrują pod tytuł. Podsumowanie przesuwa się pod listę, a na szerokich ekranach niektóre szablony blokują je w pozycji „sticky”, dzięki czemu łączna kwota pozostaje widoczna nawet przy bardzo długim koszyku.

Warto przetestować wersję demonstracyjną z treściami, dla których style nie były pierwotnie przygotowywane:

• nazwę produktu na tyle długą, by wymusić zawijanie wiersza, aby sprawdzić, czy kolumna ceny zachowa układ;
• czterocyfrową cenę obok przekreślonej starej ceny i etykiety promocji;
• widok na szerokość telefonu z wieloma produktami, aby sprawdzić, czy ułożone pionowo wiersze zachowują wyraźny odstęp wizualny.

Stany zauważane przez klientów podczas edycji

Przyciski zmiany ilości wymagają łatwo zauważalnych stylów najechania kursorem i fokusu, co ma duże znaczenie dla osób nawigujących po koszyku za pomocą klawiatury. Opcja usunięcia sprawdza się najlepiej, gdy jest mniejsza i bardziej stonowana, dzięki czemu nikt nie kliknie jej przypadkowo, celując w zmianę liczby sztuk.

Nieaktywny przycisk przejścia do kasy lub aktualizacji powinien wyraźnie wyglądać na wyłączony. Gdy ilość przekracza stan magazynowy lub produkt staje się niedostępny, kolorowy komunikat i obramowanie przy danym wierszu precyzyjnie wskazują problem.

Rabatiche wprowadzają dodatkowy poziom hierarchii. Aktualna cena powinna mieć największą wagę wizualną, podczas gdy starą cenę można przekreślić i przyciemnić. Pusty koszyk to również stan – obszerne odstępy oraz pojedynczy link powrotu do zakupów zapobiegają wrażeniu uszkodzonego układu strony.

Waga wizualna i położenie podsumowania

Suma zamówienia oraz przycisk kasy powinny dominować nad każdą ceną jednostkową i linkiem usunięcia pozycji. Większy krój pisma i pełne wypełnienie przycisku w zupełności wystarczą. Funkcja Nicepage Theme Colors pozwala zastosować spójną paletę barw w całym projekcie, co zapewnia harmonię przycisków koszyka i akcentów cenowych z resztą sklepu.

Szybki test obciążeniowy rozwiewa większość wątpliwości: załaduj demo z najdłuższymi nazwami produktów i rzeczywistymi formatami cen, a następnie sprawdź widok na szerokości telefonu z naliczonym rabatem. Jeśli wiersze nadal trzymają wyrównanie, a realizacja zamówienia jest doskonale widoczna, style są gotowe do obsługi prawdziwych zamówień.