Jak zbudowałem sklep Paccs.pl – od WooCommerce do hybrydy SPA

Potrzeba sklepu przy istniejącej stronie

Strona Paccs.pl pierwotnie pełniła funkcję wizytówki firmowej – zawierała podstawowe informacje o działalności, ofertę i dane kontaktowe. Z czasem zaszła potrzeba sprzedaży produktów online. WooCommerce okazało się najlepszym rozwiązaniem: jest darmowe, dobrze udokumentowane i integruje się z tysiącami rozszerzeń. Instalacja i konfiguracja zajęły trochę czasu – skupiłem się przede wszystkim na stworzeniu mechanizmu sklepu, a strona główna miała być prosta i przejrzysta. Początkowo sklep został podłączony w subdomenie: https://sklep.paccs.pl.

Dlaczego przeniosłem sklep z subdomeny do subfolderu

Po kilku miesiącach postanowiłem przenieść sklep do subfolderu – na adres https://paccs.pl/sklep. Dlaczego? Przede wszystkim takie ułożenie daje poczucie integralności witryny. Sklep nie jest oddzielnym bytem, ale częścią większej całości, co ułatwia nawigację użytkownikom. Z punktu widzenia SEO subfolder jest często lepszym wyborem niż subdomena, ponieważ cały autorytet domeny głównej przechodzi na podstrony. W moim przypadku efekt wizualny także przemawiał za tą decyzją – adres jest krótszy i bardziej intuicyjny. Wielu moich klientów pyta o to rozwiązanie i zawsze polecam subfolder przy mniejszych sklepach, chyba że skala lub specyfika techniczna wymusza osobny serwis.

Strona główna sklepu w WordPress – ograniczenia i frustracje

WordPress to świetny system do zarządzania treścią, jednak w roli strony głównej sklepu internetowego często zawodzi. Domyślne szablony WooCommerce są przeciętnie zoptymalizowane, a page buildery dodają zbędnego kodu. Po pewnym czasie zauważyłem spadek prędkości ładowania i trudności z dostosowaniem wyglądu dokładnie do moich potrzeb. Z mojej praktyki: każda dodatkowa wtyczka to ryzyko konfliktów i wolniejszego działania. Postanowiłem więc zastąpić domyślną stronę sklepu własnym rozwiązaniem.

Budowa dedykowanej aplikacji SPA jako front-endu sklepu

Zbudowałem lekką, szybko ładującą się stronę SPA (Single Page Application), która pobiera dane z WordPressa poprzez REST API. Główna strona sklepu, strona kategorii oraz karta produktu zostały napisane w czystym HTML, CSS i JavaScript. Dzięki temu uzyskałem pełną kontrolę nad wyglądem i interakcjami, a czas ładowania zmalał o ponad 60% w porównaniu z oryginalnym szablonem. To rozwiązanie testowałem już wcześniej przy innych projektach – podobną hybrydę opisałem w artykule Familia Czeladź — WordPress, SPA i AI, gdzie strona główna stowarzyszenia korzysta z WordPressa tylko jako źródła danych.

Dostosowanie pozostałych podstron sklepu – własne szablony

Nie ograniczyłem się wyłącznie do strony głównej. Kolejnym krokiem było zastąpienie domyślnych szablonów WooCommerce własnymi plikami PHP w motywie potomnym. Dzięki temu cały sklep – strona produktu, koszyk, podsumowanie zamówienia – ma spójny, autorski wygląd. Co więcej, mogłem implementować funkcjonalności, które nie były dostępne w żadnym z gotowych pluginów. To ogromna zaleta samodzielnego kodowania: nie jesteś ograniczony możliwościami cudzych rozwiązań.

Własne funkcjonalności: lewitujący koszyk, banery, zaawansowane filtry

Do sklepu dodałem kilka niestandardowych elementów, które znacząco podniosły komfort zakupów:

• Lewitujący koszyk – ikona koszyka podąża za użytkownikiem podczas scrollowania, co skraca ścieżkę do finalizacji zakupu.
• Banery informacyjne – dynamiczne paski z krótką informacją o promocjach czy terminach wysyłki, widoczne na wszystkich podstronach sklepu.
• Zaawansowane filtry produktów – zbudowane od zera, pozwalające filtrować po wielu atrybutach jednocześnie, działające asynchronicznie bez przeładowania strony.

Każde z tych rozwiązań powstało jako lekki kod JavaScript, optymalnie zintegrowany z API WooCommerce. Warto nadmienić, że przy tego typu pracach niezwykle pomocne są narzędzia do analizy i monitorowania wydajności – zapraszam do skorzystania z moich bezpłatnych narzędzi web, które tworzę by ułatwić pracę innym developerom.

Najtrudniejsze wyzwanie – integracja wysyłek GLS

Spośród wszystkich prac programistycznych najwięcej czasu i nerwów kosztowała mnie integracja z systemem wysyłkowym GLS. Choć na rynku istnieje kilka wtyczek, żadna nie spełniała w 100% moich wymagań, a oficjalna dokumentacja API pozostawiała wiele do życzenia. Musiałem napisać własny moduł, który komunikuje się z serwerami GLS, generuje etykiety przewozowe, nadaje przesyłkom numery trackingowe i aktualizuje statusy zamówień. Największym problemem okazało się oauth2 – błędy w autentykacji i niedostępność środowiska testowego. Po kilku tygodniach prób i konsultacjach na forach udało się osiągnąć stabilne działanie. Z perspektywy czasu wiem, że takie wyzwania są nieuniknione przy tworzeniu zaawansowanych sklepów i każdy developer powinien być na nie przygotowany.

Wnioski: Ewolucja od czystego WordPressa do rozwiązań hybrydowych

Projekt sklepu Paccs.pl obrazuje moją ogólniejszą drogę jako twórcy stron – od polegania wyłącznie na WordPressie i gotowych wtyczkach, przez stopniowe wprowadzanie własnego kodu, aż po pełne hybrydy, w których WordPress staje się tylko backendem. Takie podejście wymaga umiejętności programistycznych, ale daje nieporównywalną swobodę i wydajność. Dziś coraz więcej moich realizacji opiera się na tym modelu, a każda kolejna wnosi nowe doświadczenia.

Jeśli stoisz przed podobnym wyborem – zastanawiasz się, czy rozbudować istniejącą stronę o sklep, czy może przebudować ją na nowocześniejszą architekturę – zachęcam do kontaktu. Chętnie podzielę się wiedzą i pomogę uniknąć pułapek, które sam napotkałem.