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