Strona kontaktowa jest jedną z tych części sklepu internetowego, o których łatwo zapomnieć podczas projektowania całego serwisu. Więcej uwagi poświęcamy stronie głównej, karcie produktu, kategoriom, filtrom, koszykowi czy procesowi zakupowemu. Kontakt często zostaje na końcu — bo przecież wystarczy adres, telefon, e-mail i prosty formularz.

Technicznie rzeczywiście wystarczy.

Problem zaczyna się wtedy, kiedy sklep ma wyglądać jak dopracowany produkt, a nie jak domyślna instalacja platformy e-commerce.

Właśnie z tego powodu powstał DC Contact dla OpenCart 3 .

Nie próbowałem tutaj tworzyć ogromnego systemu CRM ani kolejnego kombajnu wykonującego kilkadziesiąt niezwiązanych ze sobą zadań. Chciałem rozwiązać jeden konkretny problem: stworzyć profesjonalną stronę kontaktową OpenCart, którą właściciel sklepu może później samodzielnie edytować z panelu administracyjnego.

Bez edycji plików Twig.

1. Bez zmieniania CSS przy każdej korekcie koloru.
2. Bez wpisywania danych firmy bezpośrednio do szablonu.
3. Bez przebudowy formularza za każdym razem, kiedy klient stwierdzi, że potrzebuje jeszcze pola „Numer zamówienia” albo możliwości przesłania zdjęcia.

A ponieważ każdy sklep jest trochę inny, zależało mi bardziej na elastyczności niż na narzuceniu jednego konkretnego wyglądu.

 

Czy sklep internetowy naprawdę potrzebuje „premium” strony kontaktowej?

Nie twierdzę, że strona kontaktowa jest najważniejszą podstroną sklepu. Nie jest.

Ale jest jedną z tych podstron, które klient odwiedza często wtedy, gdy czegoś potrzebuje:

• Może chce zapytać o produkt.
• Może nie jest pewien terminu dostawy.
• Może szuka adresu sklepu stacjonarnego.
• Może potrzebuje faktury.
• Może chce wysłać zdjęcie uszkodzonego produktu.
• Może zastanawia się, czy firma w ogóle istnieje.

I właśnie w takim momencie trafia na kontakt.

Jeżeli znajduje tam mały nagłówek, surowy formularz i kilka informacji wyglądających jak pozostałość domyślnego szablonu, nie jest to katastrofa. Sklep nadal działa. Formularz nadal może wysłać wiadomość.

Tyle że cała reszta serwisu mogła zostać wcześniej dopracowana w najmniejszym szczególe, a strona kontaktowa nagle wygląda jak coś doklejonego z innego projektu.

W przypadku małego sklepu może nie mieć to większego znaczenia. W przypadku bardziej rozbudowanej marki, producenta, sklepu B2B, firmy posiadającej kilka oddziałów albo przedsiębiorstwa prowadzącego sprzedaż w kilku krajach kontakt potrafi być jednak całkiem rozbudowaną częścią strony.

• Adres.
• Telefon.
• Kilka działów firmy.
• Godziny pracy.
• Dane serwisowe.
• Osobny e-mail do zamówień.
• Osobny e-mail do reklamacji.
• Kilka lokalizacji na mapie.
• Formularz zawierający pola zależne od charakteru biznesu.
• Możliwość dodania załącznika.
• Zgoda dotycząca przetwarzania danych.
• Ochrona przed botami.

Wtedy klasyczny kontakt zaczyna być trochę za mały.

 

Najważniejsza jest możliwość późniejszej edycji

Dla mnie największym problemem nie było nawet samo stworzenie ładniejszej strony kontaktowej.

Taką stronę można przecież napisać ręcznie w Twig, CSS i JavaScript.

Problem pojawia się później gdy:

• Klient po pół roku zmienia numer telefonu.
• Powstaje drugi oddział.
• Zmieniają się godziny pracy.
• Firma chce dodać dział reklamacji.
• Na formularzu potrzebne jest nowe pole.
• Przycisk ma mieć inny kolor, ponieważ zmieniła się identyfikacja wizualna sklepu.
• Dochodzi trzeci język.
• I nagle każda drobna korekta wymaga pracy programisty.

Moim zdaniem właśnie tutaj panel administracyjny daje największą wartość.

Jeżeli już tworzę dla sklepu bardziej rozbudowany kontakt, chciałbym jednocześnie oddać właścicielowi możliwość zarządzania nim później bez zaglądania do kodu.

DC Contact został więc zbudowany trochę jak niewielki page builder przeznaczony tylko do jednego zadania.

Nie budujemy nim dowolnych stron.

Budujemy i konfigurujemy stronę kontaktową .

Dzięki temu panel może pozostać stosunkowo prosty, a jednocześnie zawierać wszystkie opcje, które rzeczywiście są przydatne w tym miejscu sklepu. ⚙️

 

Czym jest DC Contact?

DC Contact jest modułem dla OpenCart 3 , który pozwala zbudować kompletną stronę kontaktową i zarządzać nią z poziomu panelu administracyjnego.

Moduł może działać na dwa sposoby.

Pierwszy wariant to zastąpienie natywnej strony kontaktowej OpenCart . Użytkownik nadal wchodzi więc pod standardowy adres kontaktu sklepu, ale zamiast domyślnego widoku otrzymuje stronę generowaną przez DC Contact.

Drugi wariant to osobna, dedykowana strona modułu posiadająca własny adres URL.

To było dla mnie ważne, ponieważ nie zawsze chcemy usuwać albo przejmować standardowy kontakt. Czasami potrzebujemy dodatkowej strony, np. „Skontaktuj się z doradcą”, „Biuro obsługi klienta” albo po prostu bardziej rozbudowanego kontaktu działającego niezależnie od istniejącej strony.

W obecnej wersji moduł potrafi między innymi zarządzać:

danymi kontaktowymi, nagłówkami, formularzem, polami formularza, zgodą RODO, wyglądem formularza, mapą Google, wieloma lokalizacjami, własną pinezką, reCAPTCHA oraz mechanizmami antyspamowymi.

Do tego dochodzi obsługa wielu języków oraz konfiguracja osobna dla każdego sklepu w instalacji multistore.

 

Dlaczego napisałem własny moduł?

Powód był dość prozaiczny.

Przy kolejnych sklepach problem zaczynał się powtarzać.

Klient chciał coś więcej niż standardowy kontakt OpenCart, więc powstawał kolejny indywidualny szablon. Potem trzeba było dopisać mapę. Później inne pola formularza. Następnie zmienić kolor przycisku. Jeszcze później dochodził drugi język.

Oczywiście można tak pracować.

Sam robiłem to wiele razy.

Tylko że po którymś projekcie zaczyna być oczywiste, że większość tych funkcji jest powtarzalna.

Nie ma większego sensu za każdym razem od nowa pisać mechanizmu zmiany kolejności danych kontaktowych albo tłumaczyć klientowi, w którym pliku Twig znajduje się numer telefonu.

DC Contact jest moją próbą zebrania tych powtarzalnych elementów w jedno rozszerzenie.

Nie oznacza to, że moduł zastąpi każdą niestandardową stronę kontaktową. Przy bardzo indywidualnym projekcie nadal może być potrzebna praca programisty.

W wielu sklepach pozwala jednak zrobić zdecydowaną większość pracy bez dotykania kodu.

 

Bez modyfikowania plików Core OpenCart

Jednym z założeń było również ograniczenie ingerencji w sam OpenCart.

Tryb zastępujący standardową stronę kontaktową wykorzystuje system Events OpenCart . Moduł rejestruje zdarzenie i w odpowiednim momencie kieruje żądanie standardowego kontaktu do własnego kontrolera.

Nie trzeba więc ręcznie modyfikować kontrolera information/contact .

Nie trzeba nadpisywać Core.

Nie trzeba również budować wielkiego OCMOD-a wyszukującego fragmenty kodu w oryginalnych plikach.

To rozwiązanie jest po prostu łatwiejsze do utrzymania.

 

Pobieranie DC Contact

Moduł można pobrać z OpenCart Marketplace :

Pakiet instalacyjny ma format:

dc-contact.ocmod.zip

i można go zainstalować przy użyciu standardowego instalatora rozszerzeń OpenCart 3.

 

Instalacja DC Contact w OpenCart 3

Proces instalacji wygląda standardowo:

1. Pobierz pakiet dc-contact.ocmod.zip z OpenCart Marketplace.

2. Zaloguj się do panelu administracyjnego OpenCart.

3. Przejdź do Extensions → Installer .

4. Wgraj plik dc-contact.ocmod.zip .

5. Po przesłaniu rozszerzenia przejdź do Extensions → Extensions .

6. Jako typ rozszerzenia wybierz Modules .

7. Odszukaj Design Cart Contact i kliknij przycisk instalacji.

8. Następnie otwórz konfigurację modułu przyciskiem edycji.

9. W instalacji Multistore wybierz sklep, którego stronę kontaktową chcesz skonfigurować.

10. Ustaw treści i wygląd strony, a następnie zapisz konfigurację.

Podczas instalacji moduł dodaje potrzebne uprawnienia dla grupy administratora, rejestruje event odpowiedzialny za możliwość zastępowania standardowej strony kontaktowej oraz tworzy domyślną konfigurację dla sklepów.

Tworzony jest również wpis SEO dla dedykowanej strony modułu.

W tej wersji mechanizm nie opiera się na modyfikowaniu plików Core przez klasyczny OCMOD, dlatego nie mamy tutaj rozbudowanego patchowania oryginalnego kodu OpenCart.

 

Obsługa Multistore

DC Contact obsługuje konfigurację osobno dla każdego sklepu OpenCart .

Po wejściu do ustawień modułu najpierw wyświetlany jest ekran wyboru sklepu.

Każdy sklep może dzięki temu posiadać własne:

dane kontaktowe, nagłówki, formularz, adres e-mail odbiorcy, mapę, lokalizacje, kolory, adres dedykowanej strony oraz ustawienia zabezpieczeń.

Ma to znaczenie zwłaszcza wtedy, kiedy jedna instalacja OpenCart obsługuje kilka sklepów albo kilka domen.

Nie musimy tworzyć jednego globalnego kontaktu dla całej instalacji.

Każdy storefront może mieć własną wersję. 🏪

 

Wielojęzyczna strona kontaktowa

Drugim elementem widocznym praktycznie w całym panelu jest obsługa języków.

Na górze interfejsu znajduje się przełącznik Język treści .

Jeżeli sklep posiada kilka aktywnych języków, można przełączać się między nimi i definiować osobne treści.

Wielojęzyczne są między innymi nagłówki, etykiety danych kontaktowych, ich zawartość, pola formularza, temat wiadomości, komunikaty po wysłaniu, treść zgody RODO oraz nazwy i adresy lokalizacji.

Parametry techniczne, takie jak współrzędne GPS, kolory czy wielkość czcionki, pozostają oczywiście wspólne.

 

Panel administracyjny DC Contact

Konfigurację podzieliłem na pięć głównych zakładek:

Ogólne , Tytuły , Dane kontaktowe , Formularz oraz Mapa .

Poniżej opisuję wszystkie najważniejsze ustawienia obecne w wersji 1.0.0.

 

Zakładka „Ogólne”

To tutaj określamy przede wszystkim sposób działania całej strony.

Status modułu

Opcja	Działanie
Moduł włączony	Włącza albo wyłącza DC Contact dla wybranego sklepu.

Jeżeli moduł jest wyłączony, jego dedykowany kontroler nie powinien przejmować działania strony kontaktowej.

 

Tryb strony

Jedna z najważniejszych opcji DC Contact.

Opcja	Działanie
Zastąp natywną stronę kontaktu	DC Contact przejmuje standardową stronę information/contact . Klient korzysta nadal z kontaktu OpenCart, ale widzi stronę wygenerowaną przez moduł.
Dedykowana strona modułu	Standardowy kontakt pozostaje niezależny, a DC Contact otrzymuje własną stronę.
Alias dedykowanej strony	Określa przyjazny fragment adresu URL używanego w trybie dedykowanym. Domyślna wartość to contact-page .
Publiczny adres URL	Pole informacyjne pokazujące adres, pod którym aktualnie dostępna jest skonfigurowana strona.

Alias jest automatycznie oczyszczany przed zapisaniem.

Jeżeli sklep korzysta z SEO URL, moduł synchronizuje odpowiedni wpis z mechanizmem seo_url OpenCart. Kod uwzględnia również starszy wariant url_alias , dzięki czemu rozwiązanie jest mniej uzależnione od konkretnej struktury instalacji.

Jeżeli przyjazne adresy nie są aktywne, strona nadal może działać przez klasyczny adres wykorzystujący index.php?route=... .

 

Widoczne sekcje

Nie każdy sklep potrzebuje wszystkich elementów.

Dlatego poszczególne części strony można niezależnie włączać i wyłączać.

Opcja	Działanie
Pokaż dane kontaktowe	Wyświetla blok informacji kontaktowych.
Pokaż formularz	Wyświetla formularz wiadomości.
Pokaż mapę	Włącza blok Google Maps.
Mapa pod danymi kontaktowymi	Umieszcza mapę w lewej części układu, pod informacjami kontaktowymi.
Mapa pod danymi kontaktowymi i formularzem	Mapa zostaje wyświetlona jako osobna sekcja poniżej obu kolumn.

Domyślny układ zakłada dane kontaktowe po lewej stronie i formularz po prawej.

Na mniejszych ekranach układ przechodzi do jednej kolumny, więc strona pozostaje użyteczna również na urządzeniach mobilnych. 📱

 

reCAPTCHA v2

DC Contact posiada opcjonalną integrację z klasycznym checkboxem Google reCAPTCHA v2 .

Opcja	Działanie
Włącz reCAPTCHA v2	Włącza zabezpieczenie formularza.
Klucz witryny	Publiczny Site Key otrzymany z Google reCAPTCHA.
Klucz tajny	Secret Key wykorzystywany po stronie serwera do weryfikacji odpowiedzi.

Klucz tajny jest traktowany nieco inaczej niż zwykłe pole.

Po jego zapisaniu formularz administracyjny nie wyświetla go ponownie w jawnej postaci. Pozostawienie pola pustego podczas kolejnego zapisu zachowuje wcześniej zapisany klucz.

Sama odpowiedź reCAPTCHA nie jest sprawdzana wyłącznie przez JavaScript. Po wysłaniu formularza moduł wykonuje również weryfikację po stronie serwera przez API Google.

 

Zakładka „Tytuły”

Ta sekcja odpowiada za nagłówki poszczególnych części strony.

Mamy cztery niezależne bloki:

Tytuł strony , Tytuł sekcji kontaktowej , Tytuł formularza oraz Tytuł mapy .

Przykładowo domyślna polska konfiguracja wykorzystuje teksty „Kontakt”, „Dane kontaktowe”, „Napisz do nas” oraz „Znajdź nas”.

Każdy z tych tekstów można oczywiście zmienić.

 

Ustawienia typografii nagłówków

Opcja	Działanie
Tytuł	Treść nagłówka. Jest wielojęzyczna.
Znacznik nagłówka	Pozwala wybrać HTML H1 , H2 , H3 , H4 , H5 albo H6 .
Kolor tekstu	Kolor nagłówka.
Rozmiar czcionki	Wielkość tekstu w pikselach.
Grubość czcionki	Dostępne wartości: 400, 500, 600, 700 i 800.
Wyrównanie	Lewo, środek albo prawo.
Wielkie litery	Automatycznie wyświetla tekst jako uppercase.
Kolor tła	Dostępny dla głównego nagłówka strony.

Zakres wielkości nagłówków ustawiony został od 10 do 96 px.

 

Tytuł strony i sekcja Hero

Główny tytuł różni się od pozostałych nagłówków tym, że jest wyświetlany w osobnej, pełnoszerokościowej sekcji typu hero .

Możemy tutaj ustawić również kolor tła.

Domyślnie strona korzysta z fioletowego tła i białego tekstu, ale nie jest to kolor narzucony na stałe. Wszystko można zmienić z panelu.

Tekst głównego nagłówka jest jednocześnie wykorzystywany przez kontroler jako tytuł dokumentu strony.

 

Zakładka „Dane kontaktowe”

To jedna z funkcji, na których najbardziej mi zależało.

Nie mamy tutaj sztywno wpisanych pól „Adres”, „Telefon” i „E-mail”.

Zamiast tego administrator buduje własną listę pozycji kontaktowych.

Może dodać dowolną liczbę elementów, usuwać je oraz zmieniać kolejność metodą drag & drop .

 

Informacja kontaktowa

Każdy standardowy element posiada następujące ustawienia:

Opcja	Działanie
Ikona	Ikona wyświetlana obok informacji kontaktowej.
Kolor	Kolor ikony.
Pogrubienie	Pozwala wyróżnić daną pozycję.
Etykieta	Np. „Telefon”, „E-mail”, „Dział reklamacji”, „Biuro”.
Informacja kontaktowa	Właściwa treść, np. numer telefonu, adres czy godziny pracy.

Treść i etykieta są wielojęzyczne.

Znaki nowych linii w treści są zachowywane na frontendzie, dzięki czemu można wygodnie zapisać np. pełny adres:

ul. Przykładowa 10
00-000 Warszawa

 

 

Ikony Lucide

Do elementów kontaktowych dołączyłem selektor ikon oparty na bibliotece Lucide .

Nie trzeba znać nazw ikon ani wpisywać klas CSS ręcznie.

Administrator może wyszukać ikonę w interfejsie i przypisać ją do elementu.

To pozwala stworzyć pozycje reprezentujące nie tylko telefon czy e-mail, ale również lokalizację, godziny pracy, dział handlowy, pomoc, magazyn i wiele innych rodzajów informacji.

 

Separatory

Oprócz zwykłego elementu można dodać separator .

Separator może posiadać własny wielojęzyczny tytuł.

Przydaje się to szczególnie w firmach posiadających więcej niż jeden oddział.

Możemy np. wyświetlić kilka danych dla „Siedziby głównej”, dodać separator „Magazyn”, następnie kolejne dane, później „Serwis” itd.

Dzięki temu nie trzeba budować kilku oddzielnych bloków HTML.

 

Sortowanie

Zarówno informacje, jak i separatory można przeciągać.

Kolejność widoczna w panelu jest później kolejnością prezentowaną klientowi.

 

Zakładka „Formularz”

Ta sekcja jest najbardziej rozbudowaną częścią modułu.

Formularz nie jest zestawem trzech pól zapisanych na stałe w kodzie.

Można go przebudować z panelu.

 

Ustawienia poczty

Opcja	Działanie
E-mail odbiorcy	Adres, na który mają przychodzić wiadomości z formularza.
Temat wiadomości	Wielojęzyczny temat e-maila.
Komunikat sukcesu	Tekst pokazany użytkownikowi po poprawnym wysłaniu formularza.
Komunikat błędu	Informacja wyświetlana w przypadku problemu z wysyłką.

Adres odbiorcy jest polem wymaganym i podczas zapisu konfiguracji sprawdzany jest jego format.

Moduł korzysta z konfiguracji poczty samego OpenCart, czyli z ustawionego w sklepie mechanizmu Mail/SMTP.

Jeżeli w formularzu znajduje się pole typu email i użytkownik poda w nim prawidłowy adres, moduł wykorzystuje pierwszy taki adres jako Reply-To wiadomości.

Dzięki temu po otrzymaniu zapytania można po prostu kliknąć „Odpowiedz” w programie pocztowym.

 

Konstruktor pól formularza

Administrator może dodawać pola oraz zmieniać ich kolejność metodą drag & drop.

Każde pole posiada:

Opcja	Działanie
Etykieta wyświetlana	Nazwa pola widoczna dla klienta. Wielojęzyczna.
Nazwa pola	Techniczna nazwa używana podczas przesyłania formularza.
Typ	Określa rodzaj kontrolki.
Wymagane	Użytkownik musi uzupełnić pole przed wysłaniem.
Opcje	Dodatkowa konfiguracja dla radio, checkbox i file.

Jeżeli techniczna nazwa pola zostanie pozostawiona pusta, moduł próbuje zbudować ją na podstawie pierwszej dostępnej etykiety.

Nazwy są również oczyszczane, a w przypadku duplikatów moduł dodaje kolejne sufiksy, aby pola nie otrzymały identycznych nazw.

 

Dostępne typy pól

Typ	Zastosowanie
text	Standardowe pole tekstowe.
number	Pole przeznaczone na wartość liczbową.
email	Pole adresu e-mail z dodatkową walidacją.
textarea	Większe pole wielowierszowe, np. wiadomość.
radio	Lista opcji, z której użytkownik wybiera jedną.
checkbox	Jeden checkbox albo grupa wielu opcji.
file	Pole służące do przesłania załącznika.

Domyślny formularz po instalacji zawiera pola Imię i nazwisko , E-mail oraz Wiadomość .

 

Radio

Dla pola radio w sekcji Opcje wpisujemy wartości po jednej w każdym wierszu.

Przykładowo:

Pytanie o produkt
Reklamacja
Współpraca B2B

Na frontendzie zostaną z nich zbudowane osobne pola radio.

 

Checkbox

Checkbox działa w dwóch wariantach.

Jeżeli nie zdefiniujemy żadnych opcji, otrzymamy pojedynczy checkbox.

Jeżeli podamy kilka wartości w sekcji Opcje, moduł zbuduje grupę checkboxów i użytkownik będzie mógł wybrać kilka odpowiedzi.

W przesłanej wiadomości zaznaczone wartości zostaną połączone w czytelną listę.

 

Załączniki w formularzu

Typ file pozwala dołączyć do formularza plik.

To funkcja przydatna np. przy formularzu reklamacyjnym, wycenie, serwisie albo zapytaniu wymagającym dokumentacji.

Administrator określa dozwolone rozszerzenia — po jednym w każdym wierszu.

Jeżeli lista zostanie pozostawiona pusta, moduł wykorzystuje domyślny zestaw:

pdf , jpg , jpeg , png , gif , webp , doc , docx .

Maksymalny rozmiar pojedynczego pliku w module wynosi 5 MB .

Frontend posiada własny wygodniejszy interfejs uploadu. Plik można wybrać klasycznie albo przeciągnąć do wyznaczonego obszaru. Po wyborze wyświetlana jest jego nazwa oraz możliwość usunięcia przed wysłaniem.

Po stronie serwera rozszerzenie oraz wielkość są sprawdzane ponownie.

Załącznik trafia tymczasowo do katalogu storage, zostaje dołączony do wiadomości, a następnie plik tymczasowy jest usuwany.

 

Etykieta przycisku wysyłania

Tekst przycisku również jest wielojęzyczny.

Nie musimy więc używać domyślnego „Wyślij”.

Może to być równie dobrze:

„Wyślij zapytanie”, „Poproś o ofertę”, „Skontaktuj się z nami” albo odpowiednia wersja w każdym języku sklepu.

 

Zgoda RODO

Moduł posiada osobny blok odpowiedzialny za zgodę pod formularzem.

Opcja	Działanie
Pokaż ramkę RODO	Włącza wymagany checkbox zgody.
Treść zgody	Wielojęzyczny tekst wyświetlany obok checkboxa.

Jeżeli zgoda jest aktywna, formularz nie zostanie prawidłowo wysłany bez jej zaznaczenia.

Sprawdzenie odbywa się zarówno w interfejsie użytkownika, jak i po stronie serwera.

Sam tekst zgody pozostawiłem administratorowi. Moduł nie powinien udawać narzędzia prawnego i narzucać jednej treści odpowiedniej dla każdej firmy.

 

Zabezpieczenia antyspamowe

Nie chciałem uzależniać ochrony formularza wyłącznie od reCAPTCHA.

Dlatego formularz posiada również prostsze mechanizmy działające niezależnie.

Opcja	Działanie
Ukryte pole anti-bot	Dodaje honeypot niewidoczny dla normalnego użytkownika. Bot automatycznie uzupełniający formularze może się na nim „złapać”.
Minimalny czas wypełniania	Odrzuca formularz przesłany szybciej niż ustawiona liczba sekund.
Blokowanie linków	Odrzuca przesłane wartości zawierające http:// , https:// albo www. .

Domyślnie honeypot jest aktywny, a minimalny czas wypełniania wynosi 3 sekundy.

Blokowanie linków jest domyślnie wyłączone, ponieważ nie w każdym sklepie byłoby dobrym rozwiązaniem. Jeżeli klient ma np. przesyłać adres strony internetowej, ta funkcja oczywiście nie powinna być włączona.

Oprócz konfigurowalnych zabezpieczeń formularz wykorzystuje również własny token zapisany w sesji. Przy wysyłce token z formularza jest porównywany z tokenem sesji.

Można więc połączyć kilka poziomów ochrony:

honeypot, minimalny czas, blokowanie linków oraz reCAPTCHA v2.

 

Walidacja formularza

DC Contact wykonuje również walidację w przeglądarce.

Sprawdzane są między innymi pola wymagane, poprawność adresu e-mail, wybór wymaganej opcji, obecność wymaganego pliku, zgoda RODO oraz reCAPTCHA.

Błędy pojawiają się bezpośrednio przy konkretnych polach.

Nie polegam jednak wyłącznie na JavaScript.

Najważniejsze kontrole wykonywane są ponownie po stronie PHP, ponieważ walidację frontendową można ominąć.

 

Wygląd formularza

Nie chciałem zmuszać użytkownika do edytowania CSS tylko dlatego, że formularz nie pasuje kolorystycznie do sklepu.

W zakładce Formularz znajduje się dlatego również sekcja Wygląd formularza .

 

Blok formularza

Opcja	Działanie
Tło bloku	Kolor tła całego formularza.
Domyślny kolor tekstu	Podstawowy kolor tekstu wewnątrz bloku.

 

Etykiety

Opcja	Działanie
Kolor tekstu	Kolor etykiet pól.
Rozmiar czcionki	Wielkość etykiety od 10 do 32 px.
Grubość czcionki	Waga fontu.
Wielkie litery	Zamienia etykiety wizualnie na uppercase.

 

Pola formularza

Opcja	Działanie
Tło pola	Kolor tła inputów i textarea.
Kolor tekstu pola	Kolor wprowadzanych wartości.
Kolor obramowania	Kolor ramki pól.
Rozmiar czcionki	Od 10 do 24 px.
Grubość obramowania	Od 0 do 8 px.
Zaokrąglenie	Promień narożników od 0 do 40 px.

Możemy więc zrobić zarówno bardzo płaski, minimalistyczny formularz, jak i formularz posiadający mocniejsze obramowania i zaokrąglone pola.

 

Przycisk wysyłania

Przycisk ma osobny zestaw parametrów.

Opcja	Działanie
Tło przycisku	Podstawowy kolor tła.
Kolor tekstu	Kolor napisu.
Kolor obramowania	Kolor ramki.
Tło po najechaniu	Kolor hover.
Kolor tekstu po najechaniu	Kolor napisu w stanie hover.
Kolor obramowania po najechaniu	Ramka w stanie hover.
Grubość obramowania	Od 0 do 8 px.
Zaokrąglenie	Od 0 do 40 px.
Rozmiar czcionki	Od 10 do 24 px.
Grubość czcionki	Waga tekstu przycisku.
Wyrównanie	Lewo, środek albo prawo.
Wielkie litery	Wyświetla tekst przycisku jako uppercase.

Dzięki temu przycisk można dopasować do podstawowego CTA używanego w motywie sklepu bez pisania dodatkowego arkusza CSS.

 

Zakładka „Mapa”

Ostatnia główna sekcja konfiguracji odpowiada za integrację z Google Maps .

Nie jest to statyczny iframe z jednym adresem.

Mapa może posiadać kilka lokalizacji, własny marker oraz indywidualną stylistykę.

 

Google Maps

Opcja	Działanie
Klucz Google API	Klucz wykorzystywany do załadowania Google Maps JavaScript API.
Map ID	Identyfikator mapy skonfigurowany w Google Cloud.
Domyślne przybliżenie	Poziom zoom od 1 do 20.
Wysokość mapy	Wysokość w zakresie od 200 do 900 px.
Obraz pinezki	Pozwala wgrać własny marker.
Usuń obecną pinezkę	Usuwa wcześniej zapisany obraz markera.

Obsługiwane formaty własnego markera to:

PNG, JPG, JPEG, GIF, WebP oraz SVG.

Własne obrazy pinezek są przechowywane w osobnym katalogu image/dc_contact/ .

 

Map ID i nowe markery Google

DC Contact korzysta z obsługi nowych markerów Google Maps, jeżeli odpowiednie API jest dostępne.

Do prawidłowego wykorzystania AdvancedMarkerElement potrzebny jest Map ID .

Jeżeli własny Map ID nie został podany, kod może wykorzystać demonstracyjny identyfikator Google.

Warto zwrócić uwagę na jedną rzecz: w przypadku map działających przez Map ID tradycyjny JSON stylu mapy nie jest używany w ten sam sposób.

Google przeniósł stylizację takich map do mechanizmu Cloud-based maps styling .

Dlatego jeśli korzystamy z własnego Map ID, wygląd mapy najlepiej skonfigurować bezpośrednio w Google Cloud.

 

Wiele lokalizacji na jednej mapie

Moduł nie ogranicza się do jednej siedziby.

Administrator może dodawać kolejne lokalizacje oraz przeciągać je w panelu.

Każda lokalizacja posiada:

Opcja	Działanie
Nazwa lokalizacji	Wielojęzyczna nazwa, np. „Siedziba”, „Magazyn”, „Salon Warszawa”.
Adres	Wielojęzyczny adres wyświetlany użytkownikowi.
Szerokość geograficzna	Latitude.
Długość geograficzna	Longitude.

W panelu umieściłem również odnośnik do latlong.net , który może pomóc w znalezieniu współrzędnych.

Jeżeli skonfigurowana jest jedna lokalizacja, mapa centruje się na niej i wykorzystuje określony poziom zoom.

Jeżeli lokalizacji jest kilka, mapa automatycznie dopasowuje obszar tak, aby objąć markery.

Kliknięcie markera otwiera okno z nazwą oraz adresem lokalizacji.

To przydatne np. dla sieci salonów, kilku magazynów albo firmy posiadającej biura w różnych miastach. 📍

 

Własna pinezka

Standardowy marker Google nie zawsze pasuje do identyfikacji wizualnej strony.

Dlatego można wgrać własny obraz.

Może to być np. niewielkie logo, symbol firmy albo przygotowana specjalnie pinezka w kolorystyce sklepu.

Jeżeli później zmienimy plik, poprzednia wersja zostaje usunięta.

 

Snazzy Maps

Na dole zakładki Mapa znajduje się pole Styl Snazzy Maps .

Można wkleić do niego JSON opisujący wygląd klasycznej mapy Google.

Pozwala to przygotować np. mapę monochromatyczną, ciemną, pastelową albo dopasowaną do kolorystyki sklepu.

Kod próbuje również bezpiecznie sparsować wprowadzony JSON. Jeżeli jest nieprawidłowy, styl jest pomijany zamiast blokować działanie całej strony.

Trzeba jednak pamiętać o wspomnianym wcześniej Map ID.

Przy mapach wykorzystujących Map ID oraz Advanced Markers styl JSON nie jest stosowany. W takim przypadku styl mapy należy ustawić w Google Cloud.

 

Co dzieje się po wysłaniu formularza?

Od strony użytkownika mechanizm jest prosty.

Klient uzupełnia pola i wysyła formularz.

Najpierw JavaScript sprawdza podstawową poprawność danych.

Po wysłaniu żądania PHP ponownie wykonuje kontrole bezpieczeństwa i walidację.

Sprawdzane mogą być między innymi token sesji, honeypot, minimalny czas wypełnienia, reCAPTCHA, zgoda RODO, pola wymagane, dozwolone rozszerzenia plików, wielkość załączników oraz obecność niedozwolonych linków.

Dopiero po przejściu tych kontroli składana jest wiadomość e-mail.

Treść e-maila tworzona jest automatycznie na podstawie pól skonfigurowanych w panelu.

Dzięki temu dodanie nowego pola do formularza nie wymaga równoczesnego przebudowania osobnego szablonu wiadomości.

 

Formularz korzysta z poczty OpenCart

Nie chciałem tworzyć drugiego, niezależnego systemu konfiguracji SMTP.

DC Contact korzysta z ustawień poczty już zapisanych w OpenCart.

Pobierany jest więc skonfigurowany silnik pocztowy, host SMTP, użytkownik, hasło, port i timeout.

Dzięki temu jeżeli wysyłka e-maili w sklepie została wcześniej prawidłowo skonfigurowana, formularz kontaktowy korzysta z tego samego mechanizmu.

 

Co z SEO strony kontaktowej?

W przypadku trybu zastępującego moduł pozostaje pod standardową stroną kontaktową sklepu.

Jeżeli OpenCart posiada dla niej SEO URL, DC Contact może nadal korzystać z tego adresu.

W trybie dedykowanym moduł synchronizuje własny alias strony z tabelą SEO OpenCart.

Administrator widzi w konfiguracji gotowy Publiczny adres URL , więc łatwo sprawdzić, gdzie znajduje się strona.

Widoczny główny tytuł strony jest również ustawiany jako tytuł dokumentu.

W obecnej wersji moduł nie posiada natomiast osobnych pól do konfigurowania meta description czy innych rozbudowanych danych SEO. Nie chcę przypisywać mu funkcji, których nie ma.

 

Przykład zastosowania

Wyobraźmy sobie sklep producenta wyposażenia domu posiadającego siedzibę, magazyn oraz dwa salony sprzedaży.

W sekcji kontaktowej możemy przygotować osobne grupy informacji dla każdego z tych miejsc.

Formularz może zawierać imię i nazwisko, e-mail, numer telefonu, wybór działu, temat zapytania, wiadomość oraz pole pozwalające przesłać zdjęcie lub dokument PDF.

Na mapie mogą znaleźć się cztery markery.

Klient wybierający polską wersję sklepu otrzyma polskie etykiety, a użytkownik niemieckiej wersji te same elementy w języku niemieckim.

Właściciel sklepu nie musi przy tym zmieniać ani jednego pliku Twig.

I właśnie taki scenariusz miałem na myśli podczas tworzenia tego rozszerzenia.

 

Czy DC Contact zastępuje page builder?

Nie.

I nie próbuję przedstawiać go jako form buildera a osobiście unikam takich rozwiązań jak ognia: są ciężkie i spowalniają sklep.

Jeżeli ktoś chce tworzyć całkowicie dowolne strony, budować kilkanaście sekcji marketingowych, animacje, slidery i indywidualne kompozycje, odpowiednie narzędzie będzie lepszym rozwiązaniem.

DC Contact ma znacznie węższe zadanie.

Ma pozwolić stworzyć dobrą stronę kontaktową OpenCart 3 i później normalnie nią zarządzać.

Dzięki temu zamiast setek ustawień niezwiązanych z kontaktem panel zawiera opcje dotyczące właśnie tej części sklepu.

 

Podsumowanie

DC Contact powstał dlatego, że natywna strona kontaktowa OpenCart jest wystarczająca do prostych zastosowań, ale przy bardziej dopracowanych sklepach często zaczyna brakować elastyczności.

Największym problemem nie jest nawet stworzenie indywidualnego kontaktu.

Problemem jest jego późniejsze utrzymanie.

Jeżeli numer telefonu, lokalizacja, formularz czy kolor przycisku znajdują się bezpośrednio w kodzie szablonu, każda zmiana może oznaczać kolejną ingerencję programisty.

W DC Contact chciałem przenieść możliwie dużą część tej pracy do panelu administracyjnego.

Dlatego można niezależnie skonfigurować nagłówki, informacje kontaktowe, kolejność elementów, formularz, pola, załączniki, RODO, ochronę antyspamową, wygląd formularza, Google Maps, wiele lokalizacji i własną pinezkę.

Do tego dochodzi wielojęzyczność, Multistore oraz dwa sposoby publikowania strony — jako zamiennik standardowego kontaktu albo jako całkowicie niezależny adres.

Nie jest to rozwiązanie, które ma zastąpić każdy indywidualny projekt.

Nie taki był cel.

Chciałem po prostu, aby w OpenCart 3 można było zrobić porządną, nowoczesną stronę kontaktową, a później zmienić na niej numer telefonu albo dodać kolejne pole formularza bez otwierania edytora kodu.

I jeżeli właśnie takiej funkcji brakuje w danym sklepie, DC Contact może oszczędzić sporo niepotrzebnej pracy. 🙂