# Nové Custom Events v doplňku Propojení produktů

> Doplněk umí posílat vlastní eventy — navažte na ně měření, analytiku nebo vlastní úpravy. Přehled událostí a praktické příklady.

- **Zdroj:** https://www.webotvurci.cz/navody/propojeni-produktu/nove-custom-events-v-doplnku-propojeni-produktu/
- **Doplněk / kategorie:** Propojení produktů (https://www.webotvurci.cz/navody/propojeni-produktu/)
- **Datum:** 2025-12-12
- **Autor:** Webotvůrci (https://www.webotvurci.cz/)

---

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:

### Render eventy

Umožňují zasáhnout do procesu vykreslování:

### Additions eventy

Specifické pro sekci doplňkových produktů:

### Interakce eventy

Sledují akce zákazníků:

## 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

---

*Návod pochází z webu Webotvůrci — Zlatý a Premium partner Shoptetu.*
*Všechny návody: https://www.webotvurci.cz/navody/ · Kontakt: jsme@webotvurci.cz*