Vloženie widgetu

Jeden script tag

Do šablóny e-shopu, ideálne pred </body>:

<script type="module" src="https://widget.metty.eu/v1/metty.js?api=<PUBLIC_API_KEY>"></script>

Tým je integrácia hotová. Widget sa načíta, vyzdvihne si konfiguráciu zo servera a napojí sa na vyhľadávacie pole e-shopu; inicializáciu nevoláte.

Parameter api je váš verejný kľúč. Môže zostať v HTML — na zápis do katalógu neoprávňuje.

Ktoré pole widget prevezme

Widget sa viaže na existujúce vyhľadávacie pole cez DOM selektor uložený v konfigurácii, napríklad .search-form input[type="search"]. Pole zostáva na svojom mieste a nemení vzhľad — widget k nemu pridáva panel s výsledkami.

Ak je vyhľadávanie na mobile skryté za ikonou, konfigurácia obsahuje aj selektor tohto prepínača, aby widget dokázal pole otvoriť.

Selektory nastavujeme podľa vášho webu. Ak sa šablóna e-shopu zmení a selektory prestanú zodpovedať, kontaktujte nás.

Voliteľné parametre

parameter	význam
api	povinný verejný kľúč <PUBLIC_API_KEY>
id	slug konfigurácie widgetu (napr. prod, stag); bez neho sa servíruje tá, ktorá je označená ako aktívna

<script type="module" src="https://widget.metty.eu/v1/metty.js?api=<PUBLIC_API_KEY>&id=prod"></script>

Parameter id neurčuje verziu, ale výber jednej z vašich konfigurácií. Na adrese /v1/metty.js je vždy aktuálny build zvolenej konfigurácie, takže pri vydaní novej verzie widgetu nemusíte v e-shope nič meniť.

Ak potrebujete zafixovanú verziu, napríklad počas bezpečnostného auditu, poskytneme vám nemenný odkaz na konkrétny build v tvare https://widget.metty.eu/v1/b/<sablona>-<hash>.mjs. Takýto odkaz sa nikdy nezmení, ale ani sa sám neaktualizuje.

Overenie integrácie

1. Otvorte e-shop a kliknite do vyhľadávacieho poľa — panel sa otvorí na focus, teda ešte pred písaním, a počas písania sa napĺňa výsledkami.
2. V konzole prehliadača nesmie byť chyba z widget.metty.eu ani zo search.api.metty.eu.
3. Ak sa panel nezobrazí, overte, že script tag obsahuje váš verejný kľúč a že požiadavku neblokuje blokovač reklám.

Content Security Policy

Ak má e-shop nastavenú CSP, povoľte nasledujúce zdroje:

script-src  https://widget.metty.eu
connect-src https://search.api.metty.eu
img-src     https:
style-src   'unsafe-inline'

Widget načítava konfiguráciu aj výsledky vyhľadávania zo search.api.metty.eu; na catalog.api.metty.eu nepristupuje nikdy. Obrázky produktov servíruje váš e-shop, prípadne thumbnaily zo search.api.metty.eu — oboje pokrýva img-src https:.

Direktíva style-src 'unsafe-inline' je potrebná preto, že widget vkladá svoje štýly ako element <style> do vlastného shadow rootu. Do vašej stránky sa nedostanú — shadow root ich izoluje oboma smermi. Externé fonty widget nesťahuje, takže font-src kvôli nemu rozširovať nemusíte.