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=VAS_API_KLUC"></script>

To je celé. Widget sa načíta, vyzdvihne si nastavenia zo servera a napojí sa na vyhľadávacie pole e-shopu — nemusíš volať žiadnu inicializáciu.

api je tvoj verejný api_key. Pokojne ostane v HTML, na zápis do katalógu nestačí.

Ktoré pole widget prevezme

Widget sa viaže na existujúce vyhľadávacie pole cez DOM selektor, ktorý má uložený v nastaveniach (napr. .search-form input[type="search"]). Pole zostane na svojom mieste a vyzerá rovnako — widget k nemu iba pridá panel s výsledkami.

Keď je hľadanie na mobile schované za ikonou, nastaví sa aj selektor prepínača, aby sa pole dalo otvoriť.

Selektory nastavujeme my podľa tvojho webu; keď sa šablóna zmení a prestanú sedieť, ozvi sa.

Pripnutie konkrétnej verzie

Bežne netreba — na /v1/metty.js je vždy aktuálny build. Keď chceš zmrazenú verziu:

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

id je slug konfigurácie widgetu (napr. prod, stag). Bez neho sa servíruje tá, ktorá je označená ako aktívna.

Overenie, že to beží

1. Otvor e-shop a začni písať do vyhľadávacieho poľa — po druhom–treťom znaku sa má objaviť panel.
2. V konzole prehliadača nesmie byť chyba z widget.metty.eu.
3. Keď panel nenabehne, skontroluj, či script tag naozaj obsahuje tvoj api_key a či ho blokátor reklám neodfiltroval.

Content Security Policy

Ak má e-shop CSP, povoľ:

script-src  https://widget.metty.eu
connect-src https://api.metty.eu
img-src     https: