Přehled UpSearch Plugin
UpSearch Plugin je frontendová komponenta pro integraci vyhledávání UpSearch do vašeho e-shopu. Plugin je postavený na React.js a napsaný v TypeScriptu.
Hlavní funkce
- Vyhledávání a zobrazování výsledků - Efektivní zpracování a prezentace výsledků vyhledávání
- Návrhy vyhledávání (Autocomplete) - Inteligentní našeptávání dotazů pro lepší uživatelský zážitek
- Filtrování výsledků - Pokročilé možnosti filtrování pro zpřesnění vyhledávání
- Sledování uživatelských interakcí - Integrované analytické trackování pro monitorování chování uživatelů
Komponenty
Plugin se skládá ze dvou hlavních JavaScript komponent:
1. upSearchSuggest.js
Komponenta pro autocomplete/našeptávač, typicky vkládaná do hlavičky všech stránek webu. Zobrazuje návrhy vyhledávání během psaní dotazu.
2. upSearchResults.js
Komponenta s kompletními výsledky vyhledávání (SERP), která se vkládá na speciální stránku webu s výsledky.
info
Obě komponenty se navzájem doplňují - upSearchSuggest očekává, že existuje stránka s výsledky vyhledávání a odkazuje na ni.
Technologie
- React.js - UI framework
- TypeScript - Typovaný JavaScript
- SCSS - Stylování komponent
- Webpack - Build systém
- Storybook - Vývoj a dokumentace UI komponent
Struktura projektu
src/
├── app/ # Business logika aplikace
│ ├── api/ # API klient (generovaný z OpenAPI)
│ ├── i18n/ # Internacionalizace
│ └── lib/ # Utility a knihovny
├── pages/ # HTML šablony demo stránek
├── styles/ # SCSS styly
│ ├── base/ # Základní styly (proměnné, mixiny)
│ ├── components/# Styly komponent
│ ├── core/ # Základní UI prvky (input, button)
│ └── layout/ # Layout styly
└── ui/ # React UI komponenty
Analytické trackování
Plugin automaticky odesílá uživatelské interakce do PB Trackeru. Sledované eventy zahrnují:
| Event | Popis |
|---|---|
show_results | Zobrazení výsledků v autocomplete nebo SERP |
hide | Zavření autocomplete |
addtocart | Přidání produktu do košíku |
select | Kliknutí na produkt |
Více informací o trackování najdete v sekci Analytika.