Vlastní widgety na e-shopu — od poptávky po nasazení
Kalkulačka, konfigurátor nebo odpočet dopravy zdarma. Vlastní widget umí zvednout konverze, ale taky zpomalit web nebo rozbít košík. Ukážeme, jak takový projekt vést od zadání po provoz.
Vlastní widget je malý kus funkčnosti, který platforma sama neumí. Kalkulačka spotřeby materiálu. Konfigurátor sestavy. Ukazatel „ještě 340 Kč do dopravy zdarma“. Výběr termínu doručení. Na papíře jde o pár řádků JavaScriptu. V praxi rozhoduje, jestli widget za půl roku ještě funguje, nezpomaluje web a nerozbije se při první aktualizaci šablony.
V článku projdeme, jak takový projekt vedeme od prvního zadání po provoz. Jaké jsou technické možnosti na hlavních platformách, na co nezapomenout u rychlosti, cookies a přístupnosti a jak widget nasadit bez rizika.
Nejdřív problém, pak widget
Většina poptávek začíná řešením: „chceme konfigurátor“. My začínáme otázkou, co má widget změnit. Méně dotazů na podporu? Vyšší průměrnou objednávku? Méně vratek kvůli špatné velikosti?
Dobré zadání má pět částí:
- Cíl a metrika. Co se má zlepšit a jak to poznáme.
- Kde se widget zobrazí. Detail produktu, košík, kategorie, celý web.
- Z jakých dat čerpá. Parametry produktu, sklad, ceny, externí služba.
- Co dělá. Jen zobrazuje, nebo mění košík či objednávku.
- Kdo ho bude spravovat. Texty, ceny a pravidla by neměla vyžadovat programátora.
Někdy zjistíme, že widget není potřeba. Požadavek vyřeší existující doplněk, nastavení platformy nebo lepší text na stránce. I to je dobrý výsledek.
Technické možnosti podle platformy
| Platforma | Jak se widget typicky vkládá (k 9/2026) | Na co si dát pozor |
|---|---|---|
| Shoptet | Vlastní JS a CSS přes Editor, HTML kód; data přes Data Layer a JS události; server přes API | Podpora Shoptetu s vlastním kódem nepomáhá, šablona se může měnit |
| Shopify | Theme app extensions: app blocks a app embed blocks | App embed je po instalaci vypnutý, obchodník ho zapíná v editoru šablony |
| WooCommerce | Vlastní plugin s blokem nebo shortcodem, případně úprava child šablony | Kompatibilita s aktualizacemi WordPressu a WooCommerce |
| Vlastní řešení | Komponenta přímo ve frontendu | Plná kontrola, ale i plná odpovědnost |
Shoptet. Kód se vkládá v administraci přes Vzhled a obsah, Editor, HTML kód, do záhlaví nebo zápatí stránky. Shoptet ve své nápovědě výslovně píše, že technická podpora s vlastními úpravami nepomáhá a že neodborný kód může narušit funkčnost e-shopu. Pro vývojáře publikuje JavaScriptové události. Například ShoptetCartUpdated se spustí při každé změně košíku a ShoptetDOMPageContentLoaded po načtení nového obsahu při stránkování nebo filtrování. Widget, který na ně nereaguje, může po přefiltrování kategorie zmizet. Víc o platformě v hesle Shoptet.
Shopify. Doporučená cesta jsou theme app extensions. App block si obchodník vloží do sekce v editoru šablony, app embed block se vkládá před konec head nebo body a hodí se pro plovoucí prvky. Výhoda: widget nemění kód šablony, takže přežije její aktualizaci.
WooCommerce. Widget balíme do vlastního pluginu, ne do functions.php šablony. Přežije tak změnu šablony a dá se verzovat.
Architektura: co patří do prohlížeče a co na server
Nejdůležitější pravidlo: API klíče nikdy nepatří do JavaScriptu v prohlížeči. Kód widgetu vidí každý návštěvník. Pokud widget potřebuje data, která nejsou na stránce veřejně, volá vlastní malý backend. Ten teprve komunikuje s REST API e-shopu, ERP nebo externí služby. Backend zároveň může data cachovat, takže widget nezatěžuje API při každém zobrazení stránky.
Dál doporučujeme:
- Konfiguraci mimo kód. Texty, prahy a pravidla v administraci nebo v konfiguračním souboru.
- Izolované styly. Prefix tříd nebo Shadow DOM, aby widget nerozbil šablonu a šablona jeho.
- Tichý pád. Když backend neodpoví, widget se nezobrazí. Nesmí zablokovat košík ani objednávku.
Rychlost, cookies a přístupnost
Tři oblasti, na které se u widgetů zapomíná nejčastěji.
Rychlost. Každý skript navíc soupeří o hlavní vlákno prohlížeče. Nejvíc to odnáší metrika INP z Core Web Vitals. Podle web.dev je dobrá odezva do 200 ms, a to u 75 % interakcí. Widget proto načítáme odloženě, až když je potřeba, bez velkých knihoven kvůli jedné funkci, a jeho dopad měříme před nasazením i po něm.
Cookies. Od 1. ledna 2022 platí v Česku pro ukládání dat do prohlížeče princip opt-in podle § 89 odst. 3 zákona o elektronických komunikacích. Bez souhlasu smíte ukládat jen to, co je technicky nezbytné. Widget, který si ukládá třeba historii prohlížení pro doporučení, musí respektovat cookie lištu.
Přístupnost. Od 28. června 2025 platí zákon č. 424/2023 Sb. o požadavcích na přístupnost některých výrobků a služeb, který se týká i e-shopů. Mikropodniky jsou jako poskytovatelé služeb vyjmuty. Widget musí jít ovládat klávesnicí, mít popisky pro čtečky obrazovky a dostatečný kontrast. Konfigurátor ovladatelný jen myší je problém. Základy shrnuje heslo přístupnost.
Od poptávky po nasazení krok za krokem
| Krok | Co se děje | Výstup |
|---|---|---|
| 1. Zadání | Cíl, metrika, umístění, data, správa | Jednostránková specifikace |
| 2. Návrh | Wireframe, stavy widgetu (načítání, chyba, prázdná data), mobil | Schválený návrh |
| 3. Prototyp | Funkční verze na testovacím prostředí | Ověření s reálnými daty |
| 4. Vývoj | Hotový kód, backend, konfigurace, přístupnost | Verze k testu |
| 5. Testy | Prohlížeče, mobil, filtry, košík, rychlost, výpadek API | Protokol testů |
| 6. Nasazení | Postupné zapnutí, nejdřív pro část stránek nebo návštěvníků | Widget v provozu |
| 7. Měření | Porovnání metriky z kroku 1, Core Web Vitals, chyby | Rozhodnutí: nechat, upravit, vypnout |
Krok 3 a 5 patří na testovací prostředí, ne na ostrý e-shop. U widgetu, který mění košík nebo cenu, testujeme i celou objednávku včetně platby. Krok 7 se často vynechává. Přitom bez něj nevíte, jestli widget na něco byl.
Provoz: widget není hotový nasazením
Platformy se mění. Shoptet pravidelně publikuje novinky ve frontendu, Shopify aktualizuje šablony, WordPress a WooCommerce vydávají nové verze. Widget, na který nikdo nesahá, se jednoho dne rozbije.
Počítejte proto s:
- monitoringem chyb v JavaScriptu a dostupnosti backendu,
- kontrolou po aktualizacích šablony nebo platformy,
- dokumentací: kde widget běží, odkud bere data, kdo ho spravuje,
- vlastníkem: jeden člověk na straně e-shopu, který rozhoduje o změnách.
Kdy nám zavolat
Pokud máte nápad na widget, ale nevíte, jestli ho platforma unese, nebo máte na webu widget, který nikdo nespravuje a nikdo neví, co dělá, ozvěte se. Vlastní funkce navrhujeme a stavíme v rámci služby programování. Cenu připravíme po konzultaci podle rozsahu zadání. Pokud potřebujete widgety a menší funkce průběžně přidávat a udržovat, hodí se vývoj za měsíční paušál, kde na změny reagujeme do 1 pracovního dne.
Potřebujete s tím pomoct?