https://www.ducplant.sk/user/documents/webotvurci/w-script.js?v=1.04

1jQuery( document ).ready(function() {
2if (dataLayer[0]["shoptet"]["pageType"] == "productDetail") {
3    let product_id = dataLayer[0]["shoptet"]["product"]["guid"];
4    const eshop_id = dataLayer[0]["shoptet"]["projectId"];
5
6    fetch("https://shoptet.webotvurci.cz/eshop-endpoints/" + eshop_id + "/product-variants/setting-hash")
7        .then((response) => response.json())
8        .then((response) => {
9            var product_connections_setting = "https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-variants/" + eshop_id + "/eshopSetting.json?" + response;
10            fetch(product_connections_setting)
11                .then((response) => response.json())
12                .then((json) => {
13                    let products = json.products[product_id];
14                    if (products !== undefined) {
15                        products.forEach((element) => {
16                            let product_config_id = element;
17                            let product_config_data = json.configs[product_config_id];
18                            WtShowProductInterconnectionsAddonCisBox(product_config_data);
19                            console.log(product_config_data);
20                        });
21                    }
22
23                });
24        })
25        .catch((error) => {
26            console.log(error);
27        });
28}
29
30
31function WtShowProductInterconnectionsAddonCisBox(product_config_data){
32    var productData = product_config_data;
33 
34    if (dataLayer[0]["shoptet"]["pageType"] == "productDetail" && typeof productData !== 'undefined') {
35 
36        var container;
37
38        // Přiřazení containeru dle hodnoty v shoptet design template name
39        switch (shoptet.design.template.name) {
40            case "Step":
41                container = document.querySelector(".p-detail-inner .p-basic-info-block");
42                if (document.querySelector("#product-detail-form .variant-list") !== null || document.querySelector('#product-detail-form .surcharge-list') !== null) {
43                    container = document.querySelector(".p-detail-inner .p-basic-info-block");
44                }
45                break;
46
47            case "Classic":
48
49                if (document.querySelector("#product-detail-form .detail-parameters th") !== null || document.querySelector("#product-detail-form .detail-parameters tbody") !== null) {
50                    container = document.querySelector(".p-detail-inner .detail-parameters");
51                } else if (document.querySelector("#product-detail-form #choose-variant") !== null) {
52                    container = document.querySelector("#product-detail-form .p-short-description");
53                }
54                break;
55
56            case "Waltz":
57
58                if (document.querySelector("#product-detail-form .variant-list") !== null) {
59                    container = document.querySelector(".p-detail-inner .variant-list");
60                } else if (document.querySelector('#product-detail-form .surcharge-list') !== null) {
61                    container = document.querySelector(".p-detail-inner .surcharge-list");
62                }
63                break;
64
65            case "Samba":
66
67                if (document.querySelector("#product-detail-form .p-variants-block") !== null) {
68                    container = document.querySelector(".p-detail-inner .p-variants-block");
69                }
70                break;
71
72            case "Disco":
73
74                if (document.querySelector("#product-detail-form .p-variants-block") !== null) {
75                    container = document.querySelector(".p-detail-inner .p-variants-block");
76                }
77                break;
78
79            case "Tango":
80                container = document.querySelector(".p-detail-inner .price-final");
81
82                if (document.querySelector("#product-detail-form .detail-parameters") !== null) {
83                    container = document.querySelector(".p-detail-inner .detail-parameters");
84
85                }
86                break;
87            case "Techno":
88                container = document.querySelector(".p-detail-inner .price-final");
89
90                if (document.querySelector("#product-detail-form .detail-parameters") !== null) {
91                    container = document.querySelector(".p-detail-inner .detail-parameters");
92
93                }
94                break;
95
96            case "Soul":
97                if (document.querySelector("#product-detail-form .product-detail-variant-wrap") !== null) {
98                    container = document.querySelector(".p-detail-inner .product-detail-variant-wrap");
99
100                }
101                break;
102            case "Pop":
103            case "Rock":
104                container = document.querySelector("#t-product-detail #product-detail");
105
106                if (document.querySelector("#product-detail-form .product-detail-variant-wrap") !== null) {
107                    container = document.querySelector(".p-detail-inner .product-detail-variant-wrap");
108
109                }
110                break;
111            case "Echo":
112                container = document.querySelector(".pr-list-horizontal-price");
113
114                if (document.querySelector("form .pr-listing-variant-wrap") !== null) {
115                    container = document.querySelector("form .pr-listing-variant-wrap");
116
117                } else if (document.querySelector('form .pr-listing-surcharge-wrap') !== null) {
118                    container = document.querySelector("form .pr-listing-surcharge-wrap");
119                }
120                break;
121            default:
122                if (document.querySelector("#product-detail-form .variant-list") !== null) {
123                    container = document.querySelector(".p-detail-inner .p-variants-block");
124                }
125                break;
126        }
127
128        // Kontrola parametrů hasOwnDesign a type
129        if (productData.hasOwnDesign === true && productData.type === "list") {
130            // Vytvoření custom select boxu
131            var customSelectBox = document.createElement('div');
132            customSelectBox.setAttribute('class', `c-product-interconnection-detail-params--custom is-template--${shoptet.design.template.name}`);
133
134            // Načtení aktuálního product_id
135            let product_id = dataLayer[0]["shoptet"]["product"]["guid"];
136
137            // Vytvoření aktuální položky
138            var currentItem = document.createElement('div');
139            currentItem.setAttribute('class', `c-product-interconnection-custom--image-select-list is-current`);
140
141            var currentProductData = productData.productsSetting[product_id];
142            var currentMeta = productData.metas[product_id];
143
144            // Výpočet počtu položek a cenového rozpětí
145            var itemCount = Object.keys(productData.productsSetting).length;
146            var prices = Object.values(productData.metas)
147                .filter(meta => meta.visibility === "visible")
148                .map(meta => meta.price);
149            var minPrice = Math.min(...prices);
150            var maxPrice = Math.max(...prices);
151
152            if (currentProductData && currentMeta) {
153                currentItem.innerHTML = `
154                    <div class="c-product-interconnection-custom--image-select-list__inner">
155                        <img src="${currentMeta.image}" alt="${currentMeta.name}">
156                        <h3>${currentMeta.name}</h3>
157                         <div class='select-all-items-info'>Na výber až z ${itemCount} variant <span class='price'>${minPrice},- až ${maxPrice},-</span></div>

158                         <span class='select-chevron'> ▼</span>
159                    </div>`;
160            }
161            customSelectBox.appendChild(currentItem);
162
163            // Vytvoření kontejneru pro všechny položky
164            var itemsContainer = document.createElement('div');
165            itemsContainer.setAttribute('class', 'c-product-interconnection-custom--image-select-list-dropdown');
166            itemsContainer.style.display = 'none'; // Skrytí položek na začátku
167            customSelectBox.appendChild(itemsContainer);
168
169            // Iterace přes productsSetting a vytvoření položek
170            for (var key in productData.productsSetting) {
171    if (key !== product_id) { // Přeskočení aktuální položky
172        var item = document.createElement('div');
173        item.setAttribute('class', 'c-product-interconnection-custom--image-select-list-dropdown__item');
174        item.dataset.link = productData.productsSetting[key].link;
175
176        // Vytvoření obsahu položky
177        var image = productData.metas[key].image;
178        var name = productData.metas[key].name;
179        var price = productData.metas[key].price;
180        var availability = productData.metas[key].availability;
181
182        // Pokud je availability null, zkus ji získat z DOM
183        if (!availability) {
184            var availabilityElement = document.querySelector('.availability-label');
185            availability = availabilityElement ? availabilityElement.textContent.trim() : 'Není skladem';
186        }
187
188        console.log('Product ID:', key, 'Availability:', availability);
189
190        item.innerHTML = `<div class='dropdown-item__inner'>
191            <img src="${image}" alt="${name}">
192            <h3>${name}</h3>
193            <div class='price-availability'> 
194                <span class='price'>${price} €</span>
195                <span class='availability is--${availability}'>${availability}</span>
196            </div>
197        </div>`;
198
199        // Přidání události pro přesměrování na kliknutí
200        item.addEventListener('click', function () {
201            window.location.href = this.dataset.link;
202        });
203
204        itemsContainer.appendChild(item);
205    }
206}
207
208
209            // Přidání události pro zobrazení/skrytí položek na kliknutí na aktuální položku
210            currentItem.addEventListener('click', function () {
211                if (itemsContainer.style.display === 'none') {
212                    itemsContainer.style.display = 'block';
213                } else {
214                    itemsContainer.style.display = 'none';
215                }
216            });
217
218            // Přidání custom select boxu do zvoleného kontejneru
219            if (container) {
220                container.parentNode.insertBefore(customSelectBox, container);
221            }
222        }
223    }
224}
225	});