Prosty i Elegancki Checkout (dfsimplecheckout) — Kompletny przewodnik

Prezentacja

DataFirefly Simple Checkout zastępuje natywny, 5-etapowy checkout PrestaShop nowoczesnym tunelem zakupowym one-page, inspirowanym checkoutami Shopify i Stripe. Moduł montuje swój kontroler w czasie działania przez hook actionDispatcher — żaden plik override nie jest zapisywany na dysku, a istniejące zewnętrzne override’y na OrderController są czysto dziedziczone.

Główne funkcje: układ dwukolumnowy ze stałym podsumowaniem, logowanie społecznościowe Google i Facebook, autouzupełnianie adresu Google Places, adaptacyjny formularz adresu per kraj, kod rabatowy AJAX, trzy konfigurowalne kolory, tryb bez rozpraszaczy.

Instalacja

1. W back-office PrestaShop przejdź do Moduły → Menedżer modułów → Zainstaluj moduł.
2. Wybierz plik dfsimplecheckout.zip pobrany z Twojego konta DataFirefly.
3. Kliknij Zainstaluj, a potem Konfiguruj.
4. Wyczyść cache PrestaShop (Zaawansowane → Wydajność → Wyczyść cache).
5. Odwiedź stronę /order sklepu z produktem w koszyku: nowy checkout wyświetla się natychmiast.

Konfiguracja ogólna

Kolory

W zakładce ustawień modułu konfigurowane są trzy kolory:

• Kolor główny — przyciski, linki, stany aktywne, zaznaczone radio (domyślnie #1a73e8).
• Kolor hover przycisków — stan najechania na przyciski główne „Kontynuuj”, „Zamów” (domyślnie #1559b8).
• Kolor akcentu / sukcesu — wskaźniki ukończonego kroku, plakietka zastosowanego kodu rabatowego, etykieta „Gratis” przewoźnika, komunikaty sukcesu (domyślnie #008060).

Trzy wartości są wstrzykiwane jako zmienne CSS (--dfsc-primary, --dfsc-primary-hover, --dfsc-success) i walidowane ścisłym regexem szesnastkowym.

Logo

Podaj URL własnego logo do nagłówka checkoutu; w przeciwnym razie używane jest logo sklepu. Renderowane wymiary: maksymalnie 190×42 px.

Tryb bez rozpraszaczy

Opcja Ukryj nagłówek i stopkę motywu (domyślnie włączona) usuwa kompletny nagłówek motywu (menu, wyszukiwarka, koszyk) i jego stopkę wyłącznie na stronie /order. Implementacja nadpisuje bloki Smarty header i footer w naszym szablonie: na motywie, który nie używa tych standardowych bloków, opcja po prostu nie działa — nigdy nie powoduje pustej strony.

Pozostałe opcje

• Pole notatki dla sprzedawcy (wł/wył)
• Pole kodu rabatowego (wł/wył)
• Znaczki zaufania — dowolny HTML wyświetlany pod podsumowaniem
• Linki prawne w stopce checkoutu (regulamin, prywatność, zwroty — wykrywane przez natywne role CMS)

Logowanie społecznościowe Google

Tworzenie danych uwierzytelniających

1. Wejdź na Google Cloud Console i utwórz (lub wybierz) projekt.
2. W APIs & Services → Credentials utwórz OAuth client ID typu Web application.
3. W Authorized JavaScript origins dodaj URL swojego sklepu (np. https://www.twojsklep.pl) — bez ścieżki, z protokołem https.
4. Skopiuj wygenerowany Client ID (kończy się na .apps.googleusercontent.com).

Konfiguracja modułu

1. W ustawieniach modułu włącz Google Sign-In i wklej Client ID.
2. Zapisz, a potem wyczyść cache.
3. Na /order przycisk Google pojawia się nad zakładkami „Jestem nowym klientem / Mam już konto”.

Przebieg: klient klika, wybiera swoje konto Google, moduł otrzymuje token JWT i waliduje go po stronie serwera przez oficjalny endpoint tokeninfo (weryfikacja audience, wystawcy, daty ważności i zweryfikowanego e-maila). Jeśli konto klienta z tym e-mailem istnieje, następuje zalogowanie; w przeciwnym razie konto tworzone jest automatycznie z imieniem i nazwiskiem z profilu Google.

Logowanie społecznościowe Facebook

Tworzenie aplikacji

1. Na Meta for Developers utwórz aplikację typu Consumer.
2. Dodaj produkt Facebook Login i zadeklaruj swoją domenę w ustawieniach.
3. Pobierz App ID i App Secret z Settings → Basic.

Konfiguracja modułu

Włącz Facebook Login w ustawieniach, wklej App ID i App Secret, zapisz. Walidacja serwerowa jest dwuetapowa: debug_token (sprawdza, czy token faktycznie należy do Twojej aplikacji), a następnie pobranie profilu z podpisem appsecret_proof (HMAC-SHA256). App Secret nigdy nie opuszcza Twojego serwera.

Autouzupełnianie adresu Google Places

1. W Google Cloud Console aktywuj API Places API i Maps JavaScript API.
2. Utwórz klucz API i ogranicz go do swojej domeny (zalecane).
3. W module włącz Autouzupełnianie adresu i wklej klucz.

Pole „Adres” formularza podpowiada wtedy sugestie podczas pisania. Wybór sugestii wypełnia ulicę, dodatek do adresu, miasto, kod pocztowy, kraj i region, jeśli dotyczy. Sugestie są ograniczone do aktywnych krajów sklepu (do 5 krajów — limit API Google).

Adaptacyjny formularz adresu per kraj

Formularz adresu dostosowuje się automatycznie do wybranego kraju:

• Domyślny kraj dropdownu to ten skonfigurowany w Międzynarodowy → Lokalizacja back-office (a nie pierwszy kraj alfabetycznie).
• Pole Stan/Region pojawia się tylko dla krajów, które je mają (USA, Hiszpania, Włochy…), a jego dropdown zawiera wyłącznie aktywne regiony wybranego kraju.
• Pole DNI pojawia się dla krajów, które go wymagają (Hiszpania).
• Walidacja kodu pocztowego używa formatu kraju.
• Po zmianie kraju strona przeładowuje się z formularzem przebudowanym pod nowy kraj.

Edycja adresu

Każdy zapisany adres ma ikonę ołówka. Kliknięcie otwiera formularz inline wstępnie wypełniony wszystkimi wartościami adresu (ładowanymi po stronie serwera z kontrolą własności — klient nigdy nie może podejrzeć adresu innego klienta). Zapis aktualizuje istniejący adres, bez tworzenia duplikatu.

Kod rabatowy

Pole kodu rabatowego (opcjonalne) działa w AJAX: dodawanie i usuwanie bez przeładowania, natychmiastowa aktualizacja podsumowania. Operacje są delegowane do natywnego kontrolera CartController PrestaShop, więc wszystkie reguły koszyka (daty, kwota minimalna, ograniczenia przewoźnika, łączenie) są respektowane identycznie. Natywne komunikaty błędów („Ten kod wygasł”, „Nie osiągnięto kwoty minimalnej”…) są zwracane bez zmian.

Kompatybilność z przewoźnikami i Colissimo

Dodatkowa zawartość przewoźników (mapa punktów odbioru Colissimo, widget Mondial Relay…) jest renderowana przez {$carrier.extraContent} jak w natywnym szablonie. Dla Colissimo Points Relais moduł automatycznie wstrzykuje dane wybranego punktu (identyfikator, telefon komórkowy) do żądań walidacji, co eliminuje fałszywy komunikat „Wybierz punkt odbioru”, który moduł Colissimo mógł wyświetlać na checkoutach one-page.

Hooki deweloperskie

• displayDfsimplecheckoutExpress — slot u góry checkoutu na płatności ekspresowe (Apple Pay, Google Pay, PayPal Express).
• displayDfsimplecheckoutSidebarTop / displayDfsimplecheckoutSidebarBottom — strefy wstrzykiwania w kolumnie podsumowania.
• actionDfscSocialLogin — wyzwalany po udanym logowaniu społecznościowym, z parametrami customer i dfsc_social_provider (google lub facebook). Przydatny do tagowania CRM.

Rozwiązywanie problemów

Przycisk Google się nie wyświetla

• Sprawdź, czy Client ID jest wpisany i opcja włączona.
• Sprawdź w konsoli przeglądarki, czy nie ma błędu „origin not allowed” — w takim przypadku dodaj dokładny URL sklepu (z https, bez końcowego slasha) do Authorized JavaScript origins w Google Cloud Console.

Logowanie społecznościowe się nie utrzymuje

Wyczyść cache PrestaShop i cache przeglądarki. Jeśli problem nie ustępuje, sprawdź, czy żaden zewnętrzny moduł bezpieczeństwa nie unieważnia ciasteczek sesji po zalogowaniu.

Pole Stan pokazuje niewłaściwe regiony

Upewnij się, że używasz wersji 1.2.20 lub nowszej modułu, która rozwiązuje strukturę formularza po stronie serwera dla każdego kraju.

Pusta strona na /order

Włącz tryb debug PrestaShop (_PS_MODE_DEV_), aby wyświetlić błąd, lub sprawdź var/logs. Upewnij się, że żaden inny moduł checkoutu one-page nie jest aktywny jednocześnie.

Odinstalowanie

Odinstaluj moduł z Menedżera modułów. Środowisko runtime jest natychmiast zwalniane i przywracany jest natywny 5-etapowy checkout. Żadnych plików resztkowych, żadnych osieroconych danych.