Dokumentace k pluginu „Propojení produktů“

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); `