Sklep PrestaShop Steelstorm z formularzem wariantów w Vue.js

Problem do rozwiązania

Standardowy wybór wariantu sprawdza się, gdy klient zamawia jedną konfigurację produktu. W sklepie Steelstorm proces stawał się jednak niewygodny przy większych zamówieniach obejmujących kilka odmian lub zestawów parametrów.

Każdą konfigurację trzeba było przygotowywać osobno, przechodząc ponownie przez podobne opcje. Utrudniało to kontrolowanie całego zamówienia i niepotrzebnie wydłużało proces zakupowy.

Moja rola

Przygotowałem formularz wariantów w Vue.js i zintegrowałem go z działającym sklepem PrestaShop. Odpowiadałem za interfejs formularza, obsługę wprowadzanych wartości oraz przekazywanie wybranych konfiguracji do mechanizmu sklepu.

Rozwiązanie musiało pasować do istniejącej struktury produktów i działać bez przebudowy całego katalogu. Wprowadziłem również poprawki w prezentacji oferty, widoku mobilnym oraz elementach wyświetlanych podczas pierwszego wejścia na stronę.

Formularz wariantów w Vue.js

Formularz został osadzony bezpośrednio w istniejącej karcie produktu. Użytkownik mógł przygotować kilka konfiguracji w jednym miejscu, zamiast wielokrotnie powtarzać standardowy proces wyboru wariantu.

Vue.js obsługiwał zmiany wprowadzane w formularzu i aktualizował jego stan po stronie przeglądarki. Dzięki temu kolejne wartości można było wybierać bez przeładowywania całej strony po każdej czynności.

Integracja formularza z PrestaShop

Najważniejszym ograniczeniem technicznym była konieczność rozszerzenia działającego sklepu bez zastępowania jego podstawowych mechanizmów. Formularz musiał współpracować z istniejącymi produktami, wariantami oraz procesem dodawania pozycji do koszyka.

Wybrane przez klienta dane były przekazywane do PrestaShop w sposób zgodny ze strukturą katalogu. Pozwoliło to zachować dotychczasowy system sprzedaży, a jednocześnie udostępnić interfejs dopasowany do sposobu zamawiania produktów Steelstorm.

Zakres realizacji

• przygotowanie formularza wariantów w Vue.js,
• osadzenie formularza w istniejącej karcie produktu,
• integracja z produktami i wariantami PrestaShop,
• obsługa wielu konfiguracji w ramach jednego procesu wyboru,
• przekazywanie wybranych pozycji do koszyka,
• dostosowanie formularza do telefonów i komputerów,
• poprawki interfejsu oraz prezentacji oferty,
• indywidualny preloader wyświetlany podczas pierwszego wejścia.

Testy i weryfikacja

Testy obejmowały zarówno działanie interfejsu, jak i zgodność danych przekazywanych do sklepu. Sprawdziłem:

• wybór pojedynczej oraz wielu konfiguracji,
• przekazywanie właściwych wariantów do koszyka,
• reakcję formularza na niepełne lub nieprawidłowe wartości,
• działanie na telefonach i komputerach,
• współpracę z pozostałymi elementami karty produktu.

Efekt realizacji

Sklep otrzymał formularz odpowiadający rzeczywistemu sposobowi składania większych zamówień. Klient mógł przygotować kilka konfiguracji bez wielokrotnego przechodzenia przez te same ustawienia produktu.

Rozwiązanie rozszerzyło możliwości istniejącego PrestaShop, ale nie wymagało tworzenia osobnego katalogu ani nowego systemu zamówień. Podstawowe mechanizmy sklepu pozostały zachowane, a zmienił się najbardziej problematyczny fragment procesu zakupowego.

Potrzebujesz niestandardowego formularza produktu?

Jeżeli standardowa karta produktu nie obsługuje wygodnie wariantów, konfiguracji lub większych zamówień, opisz strukturę katalogu i obecny proces zakupowy. Sprawdzę, czy problem można rozwiązać przez rozbudowę interfejsu, czy potrzebne będą również zmiany w logice koszyka.