Programista OpenCart 3.0.2.0.

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