Doors And Worktops — sklep internetowy na PrestaShop

Trzecia platforma w kolejce

Sklep zaczynał na WordPressie, potem przeniósł się na Wixa, a do mnie trafił z prośbą, żeby ktoś wreszcie poukładał to na stałe. Właściciel nie szukał kolejnej przeprowadzki, tylko kogoś, kto zajmie się sprzedażą i widocznością na dłużej.

Tak wyszło. Sklep ruszył jesienią 2023 i od tamtej pory jest pod moją opieką.

Wszystko powstaje na wymiar

To nie jest katalog z gotowymi rozmiarami. Drewniane bramy garażowe robione są z dębu albo sosny, w kilku wzorach konstrukcji, a ceny zaczynają się od 622,50 funta. Podobnie idą drewniane furtki i bramy wjazdowe, drzwi wejściowe, przesuwne, tarasowe i szafowe.

Osobną część oferty stanowią blaty kuchenne i wyspy z laminatu oraz materiały budowlane: drewno konstrukcyjne, płyty OSB i boazeria na pióro-wpust, cięte pod wymiar klienta. Do tego dochodzi montaż.

Katalog musiał więc prowadzić nie do pozycji magazynowej, tylko do wyceny rzeczy, która dopiero powstanie. Warianty produktów są opisane wymiarami, a kolory i tekstury pokazywane na liście, żeby wybór zaczynał się przed wejściem na kartę. Przy pozycjach, których nie da się zamknąć w konfiguracji, klient wysyła zapytanie wprost z karty produktu, zamiast wrzucać cokolwiek do koszyka.

Ceny netto na rynku, który liczy inaczej

Sprzedaż idzie do klientów prywatnych i do firm, więc prezentacja ceny była osobnym tematem. Sklep przez dłuższy czas pokazywał kwoty netto obok brutto, a po zmianie polityki właściciela wartości bez podatku zostały z kart produktów usunięte.

Poza tym rynek brytyjski nie wymagał niczego osobliwego: waluta, wysyłka i stawki podatkowe działają na ustawieniach, które PrestaShop podaje dla tego kraju.

Pozycjonowanie było głównym zadaniem

Najwięcej pracy pochłonęła warstwa widoczności, zaniedbana na poprzednich platformach. Sama zawartość przeszła na nowy sklep bez strat.

Doszły do tego dane strukturalne, karmienie Google Shopping ofertą sklepu, uporządkowane opisy meta oraz wyłączenie z indeksowania produktów, które nie są widoczne dla kupujących. Sklep ma też blog, wpięty w stronę główną.

Własne moduły w miejsce gotowych

Strona główna ładowała trzy różne biblioteki do karuzel i galerii, a pasek zgód na cookies był zaszyfrowanym modułem, którego nie dało się poprawić. Zastąpiłem to własnym kodem.

Karuzele i galerie zdjęć działają na jednej bibliotece, Swiperze, z PhotoSwipe do powiększeń. Oba skrypty ładują się dopiero wtedy, gdy są potrzebne.

Slider strony głównej to własny moduł. Każdy slajd ma osobny obrazek na telefon, serwer przy wgrywaniu przygotowuje go w kilku szerokościach w AVIF, WebP i JPG, a pierwszy slajd przeglądarka pobiera z wyprzedzeniem, bo to on jest największym elementem na ekranie.

Osobny moduł wycina z paczki skryptów to, czego strona nie potrzebuje przy starcie. Wyszukiwarka ciągnęła za sobą pełne jQuery UI: 228 kB z 620 kB skryptów ładowanych na każdej stronie. Teraz te pliki pobierają się przy pierwszym użyciu wyszukiwarki.

Filmy z YouTube Shorts obsługuje własna biblioteka. Film pokazuje się w galerii produktu, w bloku na stronie głównej albo w dowolnej treści, wstawiony krótkim kodem. Moduł korzysta z tych samych skryptów slidera i powiększeń co reszta sklepu, bez własnych plików JS i CSS.

Pasek zgód napisałem od zera, z Consent Mode v2 ustawionym domyślnie na brak zgody. Microsoft Clarity uruchamia się dopiero po akceptacji, więc nie obciąża pierwszego wczytania strony.

Wynik PageSpeed strony głównej na telefonie wzrósł z 75 do 90, a LCP spadło z 5,7 do 3,4 s.

Trzy lata drobnych poprawek

Opieka po wdrożeniu jest tu większą częścią historii niż samo uruchomienie:

• wiosną 2025 osobna seria pracy nad szybkością: wczytywanie zasobów z wyprzedzeniem, obrazy, ograniczenie bibliotek ładowanych na starcie
• własna reguła w walidacji rejestracji, która odrzuca imiona z nienaturalnym rozkładem wielkich liter — prosty filtr na konta zakładane automatycznie
• przerobiony szablon faktury
• wyszukiwarka, karuzele na stronie głównej i jednostronicowy proces zamówienia dołożone po starcie, nie na początku

Motyw jest mój, zbudowany jako potomny wobec domyślnego motywu PrestaShopa.