Jeden tag <script> — bez programisty,
bez wtyczek, bez przebudowy sklepu.
Jak to działa
Zaloguj się do panelu SwiftSearch → przejdź do Ustawień → skopiuj swój Klucz publiczny.
Przed zamykającym </body> w motywie sklepu.
Zamień TWOJ-KLUCZ na klucz z panelu.
<script
src="https://cdn.swiftsearch.pl/widget.js"
data-key="TWOJ-KLUCZ"
></script>Widget automatycznie przejmuje istniejące pole wyszukiwania i wyświetla podpowiedzi z produktami w czasie rzeczywistym.
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" lub "dropdown" */
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"
data-theme="light" /* "light" lub "dark" */
data-popular="true" /* najczęściej wyszukiwane */
data-recommend="true" /* karuzela rekomendacji */
data-banner="true" /* banner graficzny */
data-facets="false" /* panel filtrów (tylko overlay) */
data-branding="true"
></script>| Parametr | Opis | Domyślnie |
|---|---|---|
| data-key | Twój publiczny klucz API (wymagane) | — |
| data-mode | overlay — pełnoekranowy overlay (Doofinder-style); dropdown — klasyczny dropdown pod inputem |
overlay |
| data-target | Selektor CSS inputa lub ikony wyszukiwania do przejęcia (np. #searchform input). Klik na ikonie otwiera overlay. |
— |
| 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 wynikach wyszukiwania (1–24) | 8 |
| data-placeholder | Tekst placeholder inputa w overlayu | "Szukaj produktu..." |
| data-lang | Język etykiet widgetu: pl lub en |
pl |
| data-theme | Schemat kolorów: light lub dark |
light |
| 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 (tylko tryb overlay) |
false |
| data-branding | false wyłącza link „Wyszukiwarka SwiftSearch" w stopce widgetu |
true |
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 — wklej klucz publiczny i domenę.
Na koniec kliknij WooCommerce → SwiftSearch → Sync All Products Now, aby zaimportować katalog.
Wolisz ręcznie? Wklej tag <script> przed <?php wp_footer(); ?> w footer.php motywu lub użyj wtyczki Insert Headers and Footers.
Moduł SwiftSearch for PrestaShop
Automatyczna synchronizacja przez hooki PS — bez edycji kodu, bez crontaba.
Pobierz moduł (.zip)Instalacja
Moduły → Zarządzaj modułami → Wgraj moduł → wybierz pobrany .zip → Zainstaluj.
Następnie kliknij Konfiguruj przy module SwiftSearch — wklej klucz publiczny i domenę.
Na koniec kliknij Sync All Products Now, aby zaimportować katalog.
Wolisz ręcznie? Design → Edytor motywu → layouts/layout-full-width.tpl → wklej tag <script> przed zamykającym {literal}{/block}{/literal}.
Wygląd → Edycja szablonu → footer.html → wklej kod przed </body>.
Zalecany selektor: data-target=".searcher input[type=text]"
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.