W WooCommerce i PrestaShop instalujesz wtyczkę, która sama wysyła produkty i włącza wyszukiwarkę.
W innym sklepie wysyłasz produkty przez REST API i wklejasz jeden tag <script>.
Jak to działa
W panelu SwiftSearch przejdź do Ustawień. Znajdziesz tam klucz publiczny (trafia do widgetu na stronie) i klucz prywatny (Private Key, służy tylko do wysyłania produktów, nie umieszczaj go w kodzie strony).
WooCommerce i PrestaShop: zainstaluj wtyczkę (instrukcje niżej), wpisz oba klucze i domenę sklepu, a potem kliknij Sync All Products Now. Od tej chwili każda zmiana produktu synchronizuje się sama.
Inny sklep: wysyłaj produkty przez REST API, opis endpointów jest w dokumentacji.
WooCommerce: w ustawieniach wtyczki zaznacz Search Widget, tag doda się sam. PrestaShop: włącz Search Widget i wklej poniższy tag w polu Widget Embed Code.
Inny sklep: wklej tag przed zamykającym </body> w motywie.
Zamień TWOJ-KLUCZ na klucz publiczny z panelu.
<script
src="https://cdn.swiftsearch.pl/widget.js"
data-key="TWOJ-KLUCZ"
></script>Widget przejmuje istniejące pole wyszukiwania i pokazuje produkty od pierwszej wpisanej litery. Wyszukiwarkę włączaj dopiero wtedy, gdy produkty są już zsynchronizowane, inaczej klienci zobaczą puste wyniki.
Konfiguracja
Wszystkie parametry ustawiasz przez atrybuty data-* na tagu <script>. Zero konfiguracji w plikach.
<script
src="https://cdn.swiftsearch.pl/widget.js"
data-key="TWOJ-KLUCZ"
data-mode="overlay" /* "overlay", "dropdown" lub "inline" */
data-target="#searchform input" /* selektor CSS Twojego inputa */
data-logo="https://example.com/logo.svg"
data-results="8"
data-placeholder="Czego szukasz?"
data-lang="pl" /* "pl", "en" lub "de" */
data-popular="true" /* najczęściej wyszukiwane */
data-recommend="true" /* karuzela rekomendacji */
data-banner="true" /* banner graficzny */
data-facets="false" /* panel filtrów (overlay i inline) */
data-price-range="false" /* suwak cen w panelu filtrów */
data-branding="true"
></script>| Parametr | Opis | Domyślnie |
|---|---|---|
| data-key | Twój publiczny klucz API (wymagane) | - |
| data-mode | overlay: pełnoekranowy overlay; dropdown: klasyczny dropdown pod inputem; inline: wyniki z filtrami bezpośrednio na stronie (np. strona wyników wyszukiwania), w kontenerze wskazanym przez data-container |
overlay |
| data-target | Selektor CSS inputa lub ikony wyszukiwania do przejęcia (np. #searchform input). Klik na ikonie otwiera overlay. |
- |
| data-container | Tylko tryb inline: selektor CSS elementu, w którym widget wyświetla wyniki i filtry (np. #search-results) (wymagane w trybie inline) |
- |
| data-url-param | Tylko tryb inline, opcjonalnie: nazwa parametru w adresie strony, np. q. Wejście na ?q=pierścionek od razu pokazuje wyniki, a wpisywana fraza aktualizuje adres, więc wyniki można podlinkować |
- |
| data-logo | URL logo wyświetlanego w nagłówku overlaya | - |
| data-api | Adres bazowy API (zmień tylko przy self-hosted) | api.swiftsearch.pl |
| data-results | Liczba produktów w jednej porcji wyników. Kolejne porcje doczytują się same przy przewijaniu | 8 |
| data-placeholder | Tekst placeholder inputa w overlayu | "Szukaj produktu..." |
| data-lang | Język etykiet widgetu: pl, en lub de (również nazwy filtrów Cena, Kategorie, Producenci) |
pl |
| data-locale | Zapis cen (przecinek/kropka, pozycja symbolu waluty), np. de-DE. Domyślnie według języka przeglądarki odwiedzającego. Sama waluta zawsze pochodzi z produktu |
przeglądarka |
| data-recent | false wyłącza sekcję ostatnio wyszukiwanych (chipy w nagłówku overlaya) |
true |
| data-recent-max | Maksymalna liczba zapamiętanych fraz w localStorage | 6 |
| data-popular | false wyłącza sekcję najczęściej wyszukiwanych fraz (endpoint /popular-searches) |
true |
| data-recommend | false wyłącza karuzelę rekomendowanych produktów (endpoint /recommended) |
true |
| data-banner | false wyłącza banner graficzny w wynikach (endpoint /banner) |
true |
| data-facets | true włącza panel filtrów po lewej stronie wyników (tryby overlay i inline; w inline na telefonie filtry są pod przyciskiem „Filtry”) |
false |
| data-price-range | true włącza suwak zakresu cen w panelu filtrów. Wymaga data-facets="true" oraz pola price_range w odpowiedzi API |
false |
| data-branding | false wyłącza link „Wyszukiwarka SwiftSearch" w stopce widgetu |
true |
| data-timeout | Tryb awaryjny: limit czasu odpowiedzi API w milisekundach. Gdy API nie odpowie w tym czasie, nie ma połączenia albo zwraca błąd serwera, widget oddaje pole wyszukiwarce sklepu, a wpisaną już frazę wysyła formularzem sklepu, więc klient trafia na zwykłą stronę wyników. Kolejna próba po 5 minutach | 3000 |
| data-fallback-url | Tryb awaryjny, opcjonalnie: adres wyników wyszukiwarki sklepu, np. /szukaj?q={q} ({q} to wpisana fraza). Potrzebny tylko wtedy, gdy pole wyszukiwania nie jest w formularzu; domyślnie wysyłany jest formularz, w którym jest pole |
- |
| data-simulate-outage | true symuluje niedostępność API, żeby sprawdzić tryb awaryjny na swojej stronie. To samo daje dopisanie ?ss_outage=1 do adresu strony, powrót: ?ss_outage=0. Widget wysyła wtedy zdarzenie swiftsearch:fallback na document |
false |
Wygląd
Dodaj do CSS sklepu, widget automatycznie użyje Twoich kolorów.
:root {
/* Kolor przycisku, cen i linków */
--ss-accent: #e11d48;
/* Zaokrąglenie dropdowna */
--ss-radius: 8px;
/* Font (domyślnie dziedziczy z motywu) */
--ss-font: 'Montserrat', sans-serif;
}Platformy
Plugin SwiftSearch for WooCommerce
Automatyczna synchronizacja produktów, bez konfiguracji hooków, bez kodu.
Pobierz plugin (.zip)Instalacja
Wtyczki → Dodaj nową → Wgraj wtyczkę → wybierz pobrany .zip → Aktywuj.
Następnie przejdź do WooCommerce → Ustawienia → Integracja → SwiftSearch i wpisz klucz publiczny (Public Key), klucz prywatny (Secret Key) i domenę sklepu.
Kliknij WooCommerce → SwiftSearch → Sync All Products Now, aby wysłać katalog.
Po zakończeniu synchronizacji zaznacz w ustawieniach Search Widget, żeby wyszukiwarka pojawiła się w sklepie.
Wolisz sam wstawić widget? Produkty i tak synchronizuje wtyczka, a tag <script> możesz wkleić przed <?php wp_footer(); ?> w footer.php motywu albo wstawić go wtyczką Insert Headers and Footers. Wtedy nie zaznaczaj Search Widget, żeby widget nie wczytał się dwa razy.
Moduł SwiftSearch for PrestaShop
Automatyczna synchronizacja przez hooki PS, bez edycji kodu, bez crontaba.
Pobierz moduł (.zip)Instalacja
Moduły → Menedżer modułów → Załaduj moduł → wybierz pobrany .zip.
Następnie kliknij Konfiguruj przy module SwiftSearch i wpisz klucz publiczny (Public Key), klucz prywatny (Secret Key) i domenę sklepu.
Kliknij Sync All Products Now, aby wysłać katalog.
Po zakończeniu synchronizacji włącz Search Widget i wklej tag widgetu w polu Widget Embed Code.
Wolisz wstawić widget w szablonie zamiast w module? Design → Edytor motywu → layouts/layout-full-width.tpl → wklej tag <script> przed zamykającym {literal}{/block}{/literal}. Wtedy nie włączaj Search Widget w module, żeby widget nie wczytał się dwa razy.
Produkty wysyłasz przez REST API (dodawanie, aktualizacja, usuwanie), opis endpointów znajdziesz w dokumentacji.
Potem wklej tag <script> przed </body> w głównym layoucie. Użyj data-target ze ścieżką CSS do Twojego inputa wyszukiwania.
Testuj SwiftSearch przez 14 dni za darmo. Żadnej karty kredytowej.
Używamy niezbędnych plików cookies do poprawnego działania serwisu. Więcej w polityce prywatności.