Rozšířili jsme doplněk Propojení produktů o sadu custom eventů, které vám umožní lepší integraci s vašimi skripty, analytickými nástroji a vlastními úpravami.
Co jsou Custom Events?
Custom Events jsou způsob, jak může doplněk komunikovat s ostatními skripty na vašem e-shopu. Díky nim můžete reagovat na různé události – například když se načtou propojení produktů, když zákazník klikne na variantu nebo přidá produkt do košíku.
Tato funkcionalita je určena především pro vývojáře a pokročilé uživatele, kteří chtějí:
- Sledovat chování zákazníků pomocí Google Analytics nebo jiných nástrojů
- Přidat vlastní vizuální efekty při interakci s propojením
- Integrovat doplněk s dalšími systémy
- Vytvořit vlastní design pro specifické typy propojení
Přehled dostupných eventů
Lifecycle eventy
Tyto eventy vás informují o stavu načítání doplňku:
| Event | Kdy se spustí |
|---|---|
wtPI:init | Na začátku načítání dat |
wtPI:rendered | Po vykreslení HTML všech propojení |
wtPI:error | Při chybě načítání |
Render eventy
Umožňují zasáhnout do procesu vykreslování:
| Event | Kdy se spustí |
|---|---|
wtPI:beforeRender | Před vložením HTML – můžete upravit výstup |
wtPI:afterRender | Po vložení HTML propojení do DOM |
wtPI:configSkippedOwnDesign | Když je propojení označeno pro vlastní design |
wtPI:labelsResized | Po vykreslení, když se upraví šířka popisků podle šablony |
Additions eventy
Specifické pro sekci doplňkových produktů:
| Event | Kdy se spustí |
|---|---|
wtPI:additions:accordionCreated | Při vytvoření navigace mezi skupinami doplňků |
wtPI:additions:tabChange | Při přepnutí mezi skupinami |
wtPI:additions:carouselInit | Po inicializaci karuselu produktů |
Interakce eventy
Sledují akce zákazníků:
| Event | Kdy se spustí |
|---|---|
wtPI:navigate | Před přechodem na jinou variantu nebo banner |
wtPI:addToCart | Před přidáním doplňku do košíku |
Praktické příklady použití
1. Sledování v Google Analytics
Chcete vědět, jak zákazníci používají propojení produktů? Přidejte tento kód do vašeho e-shopu:
<script>
// Sledování kliknutí na varianty a bannery
document.addEventListener('wtPI:navigate', function(e) {
gtag('event', 'click', {
'event_category': 'Propojení produktů',
'event_label': e.detail.type,
'value': e.detail.url
});
});
// Sledování přidání do košíku z doplňků
document.addEventListener('wtPI:addToCart', function(e) {
gtag('event', 'add_to_cart', {
'event_category': 'Doplňky produktu',
'value': e.detail.guid
});
});
</script>2. Loading indikátor
Zobrazte zákazníkům, že se něco děje:
<script>
document.addEventListener('wtPI:init', function() {
// Zobrazit loading spinner
document.body.classList.add('wtpi-loading');
});
document.addEventListener('wtPI:rendered', function() {
// Skrýt loading spinner
document.body.classList.remove('wtpi-loading');
});
</script>
<style>
.wtpi-loading .p-detail-inner {
opacity: 0.5;
pointer-events: none;
}
</style>3. Vlastní hover efekt pro barevné varianty
Přidejte náhled barvy při najetí myší:
<script>
document.addEventListener('wtPI:afterRender', function(e) {
if (e.detail.type === 'colors') {
var links = e.detail.wrapper.querySelectorAll('a');
links.forEach(function(link) {
link.addEventListener('mouseenter', function() {
var color = this.querySelector('.item-type-bg').style.backgroundColor;
document.querySelector('.p-image').style.borderColor = color;
});
});
}
});
</script>Jak začít?
Custom Events jsou automaticky dostupné v nejnovější verzi doplňku Propojení produktů. Stačí přidat váš JavaScript kód do šablony e-shopu nebo použít Google Tag Manager.
Potřebujete pomoc s implementací?
Rádi vám pomůžeme s nastavením custom eventů pro váš e-shop. Kontaktujte nás a společně najdeme nejlepší řešení pro vaše potřeby. Napište nám na email shoptet@webotvurci.cz