# Dokumentace k pluginu „Propojení produktů“

> Pro vývojáře: přístup k datům propojení na detailu produktu, struktura objektu pro typy banner a list a příklady vlastního designu výpisu.

- **Zdroj:** https://www.webotvurci.cz/navody/propojeni-produktu/dokumentace-k-pluginu-propojeni-produktu/
- **Doplněk / kategorie:** Propojení produktů (https://www.webotvurci.cz/navody/propojeni-produktu/)
- **Datum:** 2023-08-25
- **Autor:** Webotvůrci (https://www.webotvurci.cz/)

---

### **Přístup k proměnné pro vlastní design**

**Úvod**

Tato část dokumentace je určena pro vývojáře, kteří potřebují získat přístup k proměnné **`wtPIOwnDesignedProducts`** na detailu produktu. Tato proměnná obsahuje objekt s parametry pro vytvoření vlastního designu výpisu produktů.  
**Přístup k proměnné**

Pokud chcete získat přístup k proměnné **`wtPIOwnDesignedProducts`**, jednoduše ji zavolejte v JavaScriptu:

```
let designParams = wtPIOwnDesignedProducts;
console.log(designParams);
```

**Struktura objektu**

Proměnná **`wtPIOwnDesignedProducts`** vrací objekt s následujícími klíči:

- isDevelop: Boolean hodnota určující, zda je produkt ve vývoji.
- hasOwnDesign: Boolean hodnota určující, zda produkt má vlastní design.
- title: Název typu propojení produktů (např. „Barva rámu“).
- type: Typ propojení (např. „colors“).
   - colors: Propojení produktů na základě barev.
   - photos: Propojení produktů na základě fotografií.
   - numbers: Propojení produktů na základě číselných hodnot.
   - list: Propojení produktů ve formě seznamu.
   - banner: Propojení produktů ve formě banneru.
- version: Verze pluginu.
- productsSetting: Objekt obsahující detaily propojených produktů.

**Příklad použití**

Pokud chcete upravit vzhled výpisu produktů na základě parametrů získaných z proměnné, můžete to udělat následovně:

```
let designParams = wtPIOwnDesignedProducts.productsSetting;
for (let productId in designParams) {
    let product = designParams[productId];
    let productLink = product.link;
    let backgroundColor = product.backgroundColor;
    let fontColor = product.fontColor;
    let label = product.label;

    // Zde můžete provést další úpravy nebo akce s těmito informacemi
}
```

**Poznámka**

Ujistěte se, že máte správné selektory pro cílové elementy a že proměnná **`wtPIOwnDesignedProducts`** je dostupná v kontextu, kde ji chcete použít.

## **Přístup k proměnné pro typ banner**

**Struktura objektu pro typ `banner`**

Pokud je **`type`** nastaven na **`banner`**, proměnná **`wtPIOwnDesignedProducts`** vrací objekt s následujícími klíči:

- isDevelop: Boolean hodnota určující, zda je produkt ve vývoji.
- title: Název typu propojení produktů (např. „Banner“).
- type: Typ propojení (v tomto případě „banner“).
- targetProduct: Objekt obsahující informace o hlavním produktu, na který odkazuje banner:
   - guid: Unikátní identifikátor produktu.
   - administrationName: Název produktu v administraci.
- targetProductLink: Odkaz na hlavní produkt.
- ctaHtml: HTML obsah pro výzvu k akci (např. „Více je lépe“).
- bannerHtml: HTML obsah pro hlavní text banneru.
- version: Verze pluginu.
- products: Pole produktů spojených s hlavním produktem. Každý produkt obsahuje:
   - guid: Unikátní identifikátor produktu.
   - administrationName: Název produktu v administraci.

**Příklad použití**Pokud chcete zobrazit banner na základě parametrů získaných z proměnné, můžete to udělat následovně:

```
let bannerData = wtPIOwnDesignedProducts;

let bannerElement = document.createElement('div');
bannerElement.innerHTML = bannerData.bannerHtml;

let ctaElement = document.createElement('div');
ctaElement.innerHTML = bannerData.ctaHtml;

bannerElement.appendChild(ctaElement);

document.body.appendChild(bannerElement);
```

## **Přístup k proměnné pro typ list** **Struktura objektu pro typ `list`** Pokud je **`type`** nastaven na **`list`**, proměnná **`wtPIOwnDesignedProducts`** vrací objekt s následujícími klíči:  **`isDevelop`**: Boolean hodnota určující, zda je produkt ve vývoji. **`hasOwnDesign`**: Boolean hodnota určující, zda produkt má vlastní design. **`title`**: Název typu propojení produktů. **`type`**: Typ propojení (v tomto případě „list“). **`version`**: Verze pluginu. **`productsSetting`**: Objekt obsahující detaily propojených produktů. Každý produkt má:  **`link`**: Odkaz na produkt. **`label`**: Popisek produktu.    **Příklad použití** Pokud chcete zobrazit seznam produktů na základě parametrů získaných z proměnné, můžete to udělat následovně: `let listData = wtPIOwnDesignedProducts;

let selectElement = document.createElement('select');

for (let productId in listData.productsSetting) {
    let product = listData.productsSetting[productId];
    let option = document.createElement('option');
    
    option.value = product.link;
    option.textContent = product.label;
    
    selectElement.appendChild(option);
}

document.body.appendChild(selectElement);

// Pokud chcete přidat akci po výběru produktu z select boxu:
selectElement.addEventListener('change', function() {
    window.location.href = this.value;
});` **Přístup k proměnné pro typ numbers** **Úvod** Tato část dokumentace je určena pro vývojáře, kteří potřebují získat přístup k proměnné **`wtPIOwnDesignedProducts`** pro typ **`numbers`**. **Struktura objektu pro typ****`numbers`** Pokud je **`type`** nastaven na **`numbers`**, proměnná **`wtPIOwnDesignedProducts`** vrací objekt s následujícími klíči:  **`isDevelop`**: Boolean hodnota určující, zda je produkt ve vývoji. **`hasOwnDesign`**: Boolean hodnota určující, zda produkt má vlastní design. **`title`**: Název typu propojení produktů. **`type`**: Typ propojení (v tomto případě „numbers“). **`version`**: Verze pluginu. **`displayType`**: Způsob zobrazení, který může být buď **`box`** nebo **`circle`**.  **`box`** je vhodný pro delší textové hodnoty, např. „250 kusů“. **`circle`** je vhodný pro kratší hodnoty, např. „L“, „M“.   **`productsSetting`**: Objekt obsahující detaily propojených produktů. Každý produkt má:  **`link`**: Odkaz na produkt. **`backgroundColor`**: Barva pozadí. **`fontColor`**: Barva písma. **`number`**: Číselná hodnota nebo popisek.    **Příklad použití** Na základě **`displayType`** můžete zobrazit číselné hodnoty buď ve formě boxů nebo kruhů: `let numbersData = wtPIOwnDesignedProducts;
let container = document.createElement('div');
container.className = 'numbers-container';

for (let productId in numbersData.productsSetting) {
    let product = numbersData.productsSetting[productId];
    let element = document.createElement('div');
    
    element.style.backgroundColor = product.backgroundColor;
    element.style.color = product.fontColor;
    element.textContent = product.number;
    
    if (numbersData.displayType === 'circle') {
        element.className = 'circle';
    } else {
        element.className = 'box';
    }
    
    element.addEventListener('click', function() {
        window.location.href = product.link;
    });
    
    container.appendChild(element);
}

document.body.appendChild(container);
` Pro správné zobrazení byste měli přidat CSS, např: `.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    margin: 5px;
}

.box {
    padding: 5px 10px;
    display: inline-block;
    margin: 5px;
}
` **Přístup k proměnné pro typ photos** **Úvod** Tato část dokumentace je určena pro vývojáře, kteří potřebují získat přístup k proměnné **`wtPIOwnDesignedProducts`** pro typ **`photos`**. **Struktura objektu pro typ****`photos`** Pokud je **`type`** nastaven na **`photos`**, proměnná **`wtPIOwnDesignedProducts`** vrací objekt s následujícími klíči:  **`isDevelop`**: Boolean hodnota určující, zda je produkt ve vývoji. **`hasOwnDesign`**: Boolean hodnota určující, zda produkt má vlastní design. **`title`**: Název typu propojení produktů. **`type`**: Typ propojení (v tomto případě „photos“). **`version`**: Verze pluginu. **`productsSetting`**: Objekt obsahující detaily propojených produktů. Každý produkt má:  **`link`**: Odkaz na produkt. **`label`**: Popisek produktu. **`imageLink`**: Odkaz na obrázek produktu.    **Příklad použití** Pokud chcete zobrazit obrázky produktů na základě parametrů získaných z proměnné, můžete to udělat následovně: `let photosData = wtPIOwnDesignedProducts;

let container = document.createElement('div');
container.className = 'photos-container';

for (let productId in photosData.productsSetting) {
    let product = photosData.productsSetting[productId];
    let imageElement = document.createElement('img');
    
    imageElement.src = product.imageLink;
    imageElement.alt = product.label;
    imageElement.title = product.label;
    
    imageElement.addEventListener('click', function() {
        window.location.href = product.link;
    });
    
    container.appendChild(imageElement);
}

document.body.appendChild(container);
` **Přístup k proměnné pro typ colors** **Úvod** Tato část dokumentace je určena pro vývojáře, kteří potřebují získat přístup k proměnné **`wtPIOwnDesignedProducts`** pro typ **`colors`**. **Struktura objektu pro typ****`colors`** Pokud je **`type`** nastaven na **`colors`**, proměnná **`wtPIOwnDesignedProducts`** vrací objekt s následujícími klíči:  **`isDevelop`**: Boolean hodnota určující, zda je produkt ve vývoji. **`hasOwnDesign`**: Boolean hodnota určující, zda produkt má vlastní design. **`title`**: Název typu propojení produktů. **`type`**: Typ propojení (v tomto případě „colors“). **`version`**: Verze pluginu. **`productsSetting`**: Objekt obsahující detaily propojených produktů. Každý produkt má:  **`link`**: Odkaz na produkt. **`backgroundColor`**: Barva pozadí. **`fontColor`**: Barva písma. **`label`**: Popisek barvy.    **Příklad použití**Pokud chcete zobrazit barvy produktů na základě parametrů získaných z proměnné, můžete to udělat následovně: `let colorsData = wtPIOwnDesignedProducts;

let container = document.createElement('div');
container.className = 'colors-container';

for (let productId in colorsData.productsSetting) {
    let product = colorsData.productsSetting[productId];
    let colorElement = document.createElement('div');
    
    colorElement.style.backgroundColor = product.backgroundColor;
    colorElement.style.color = product.fontColor;
    colorElement.textContent = product.label;
    colorElement.className = 'color-box';
    
    colorElement.addEventListener('click', function() {
        window.location.href = product.link;
    });
    
    container.appendChild(colorElement);
}

document.body.appendChild(container);
`

---

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