Techniczne zadanie: Adaptacja strony karty produktu pod różne rozdzielczości ekranu dla PC
1. Ogólny opis
Konieczne jest dostosowanie strony karty produktu zgodnie z projektem przedstawionym w
zrzucie ekranu. Głównym celem jest zapewnienie prawidłowego rozmieszczenia elementów na różnych
rozdzielczościach ekranu, poprawa UX i uczynienie interfejsu bardziej przyjaznym dla użytkowników.
2. Wymagania dotyczące responsywności
● Strona powinna poprawnie wyświetlać się na ekranach o szerokości od 1024px i
więcej.
● Używać elastycznych siatek (np. flexbox, grid) do rozmieszczania
bloków.
● Zapewnić prawidłowe skalowanie i odstępy między elementami.
3. Zmiany na stronie
3.1. Blok z ceną i cechami
● Zapewnić stałe rozmieszczenie tego bloku podczas przewijania strony
(sticky position).
● Dodać tekst "Gwarantowany cashback".
● Kwota cashbacku jest automatycznie obliczana jako 1% od ceny ze zniżką i ma
zaokrąglenie do 1 zł w dół.
3.2. Zmiany w kartach produktów
Materace
● Zmienić nazwę "Dodatkowe informacje" na "Cechy".
● Dodać:
● "Dopuszczalne obciążenie". (liczbę można wziąć z właściwości)
● "Wideo recenzja" (jeśli w galerii jest wideo, otwierać galerię właśnie z wideo, jeśli
nie ma, punkt nie jest wyświetlany).
Łóżka
● Zmienić nazwę "Rozmiar miejsca do spania" na "Rozmiar miejsca do spania (S x
D)".
● Zmienić nazwę "Rozmiar" na "Wymiary (S x D x W)".
● Dodać:
● "Zobacz próbki" (przewiń do próbek tkaniny).
● "Wideo recenzja" (analogicznie do materacy).
● "Zalecamy dodać" (przewiń do bloku "Z tym produktem kupują").
● Zmienić nazwę "Dodatkowe informacje" na "Cechy".
● Usunąć z "Dodatkowych informacji" punkt "Kategoria tkaniny".
● Umieścić w kolejności wskazanej na zrzutach ekranu.
4. Wymagania dotyczące układu
● Poprawne wyświetlanie w przeglądarkach Chrome, Firefox, Opera, Edge, Safari.
5. Testowanie i akceptacja pracy
● Prace prowadzić na wersji dev strony
● Testowanie na ekranach 1024px, 1280px, 1440px, 1920px.
● Sprawdzenie poprawnego wyświetlania wszystkich elementów.
● Testowanie funkcjonalności przewijania, zoomu, responsywnego bloku z ceną.
6. Termin wykonania
● Pożądany termin – 10 dni roboczych.
7. Uwagi
● Zacząć od karty produktu – materace. Po zakończeniu prac dostarczyć do
sprawdzenia. Po zatwierdzeniu kontynuować pracę nad innymi kategoriami.
9. Dodatkowe materiały
● Zrzut ekranu przykładu karty produktu (materace): Kartka produktu-materac.jpg
● Zrzut ekranu przykładu karty produktu (łóżka): Kartka produktu-łóżko.jpg
● Przykład wyświetlania rozdzielczości 1920px: Screenshot_2.png
