https://www.toptex.fr/js/aims/traceability/traceability.js?v=1789685678

1const traceability = {
2    version : "1.0.2",
3    traceabilityBtn : null,
4    traceabilityPopin : null,
5    traceabilityIframe : null,
6    traceabilityColorInfoContainer : null,
7    traceabilityColorFrameContainer : null,
8    traceabilityColorFrameBack : null,
9    traceabilityPopinClose : null,
10    listBtnColorTraceabilityUrl : null,
11    colorsUrlTraceability : null,
12    selectedColorId : null,
13    lang : null,
14
15    init() {
16        if(!helperVariantsColor) return;
17
18        this.colorsUrlTraceability = Object.keys(helperVariantsColor)
19            .filter(key => helperVariantsColor[key].url_traceability != null)
20            .sort((a, b) => (helperVariantsColor[a].sort_position ?? 0) - (helperVariantsColor[b].sort_position ?? 0));
21        this.lang = document.documentElement.getAttribute('lang');
22        this.traceabilityBtn = document.getElementById("traceability_btn");
23        this.traceabilityPopin = document.getElementById("traceability_popin");
24        this.traceabilityIframe = document.getElementById("traceability_frame");
25        this.traceabilityColorInfoContainer = document.getElementById("traceability_color_info_container");
26        this.traceabilityColors = document.getElementById("traceability_colors");
27        this.traceabilityColorFrameContainer = document.getElementById("traceability_color_frame_container");
28        this.traceabilityColorFrameBack = document.getElementById("traceability_frame_back");
29        this.traceabilityPopinClose = document.querySelectorAll("#traceability_popin_close, #traceability_popin_overlay");
30        this.traceabilityPopinPdf = document.getElementById("traceability_popin_pdf") || null;
31        this.traceabilityPopinZip = document.getElementById("traceability_popin_zip") || null;
32
33        this.displayTraceabilityBtn(false);
34
35        if (this.colorsUrlTraceability.length > 0) {
36            this.displayTraceabilityBtn(true);
37            this.renderHtml();
38            this.addEvents();
39        }
40    },
41
42    addEvents(){
43        this.traceabilityBtn.addEventListener("click", () => {
44            this.openTraceabilityPopin();
45        });
46
47        for (var i = 0; i < this.traceabilityPopinClose.length; i++) {
48            this.traceabilityPopinClose[i].addEventListener("click", () => {
49                this.closeTraceabilityPopin();
50            });
51        }
52
53        this.traceabilityColorFrameBack.addEventListener("click", () => {
54            this.displayContainerColorInfo();
55        });
56
57        if (this.traceabilityPopinPdf) {
58            this.traceabilityPopinPdf.addEventListener("click", () => {
59                this.downloadPdf();
60            });
61        }
62
63        if (this.traceabilityPopinZip) {
64            this.traceabilityPopinZip.addEventListener("click", () => {
65                this.downloadZip();
66            });
67        }
68
69        this.traceabilityIframe.addEventListener('load', () => { // L’iframe est complètement chargée
70            setTimeout(() => {
71                this.displayContainerframe();
72            }, 250);
73        });
74    },
75
76    displayTraceabilityBtn(choice) {
77        if (choice) {
78            this.traceabilityBtn.show();
79        } else {
80            this.traceabilityBtn.hide();
81        }
82    },
83
84    openTraceabilityPopin() {
85        this.traceabilityPopin.classList.add("open");
86        document.body.classList.add("panel-open");
87        this.displayContainerColorInfo();
88    },
89
90    closeTraceabilityPopin(){
91        this.traceabilityPopin.classList.remove("open");
92        document.body.classList.remove("panel-open");
93    },
94
95     displayContainerColorInfo() {
96         this.traceabilityColorInfoContainer.classList.add("active");
97         this.traceabilityColorFrameContainer.classList.remove("active");
98         if (this.traceabilityPopinPdf) this.traceabilityPopinPdf.style.display = 'none';
99         if (this.traceabilityPopinZip) this.traceabilityPopinZip.style.display = '';
100    },
101
102    displayContainerframe() {
103        this.traceabilityColorInfoContainer.classList.remove("active");
104        this.traceabilityColorFrameContainer.classList.add("active");
105        if (this.traceabilityPopinPdf) this.traceabilityPopinPdf.style.display = '';
106        if (this.traceabilityPopinZip) this.traceabilityPopinZip.style.display = 'none';
107    },
108
109    downloadPdf() {
110        if (this.selectedColorId === null) return;
111        window.location.href =
112            this.traceabilityPopinPdf.readAttribute('data-url') +
113            '?sku=' + encodeURIComponent(document.getElementsByClassName('variant_sku_parent')[0].value) +
114            '&label=' + encodeURIComponent(helperVariantsColor[this.selectedColorId]['color_label']) +
115            '&lang=' + this.getLang();
116    },
117
118    downloadZip() {
119        window.location.href =
120            this.traceabilityPopinZip.readAttribute('data-url') +
121            '?sku=' + encodeURIComponent(document.getElementsByClassName('variant_sku_parent')[0].value) +
122            '&lang=' + this.getLang();
123    },
124
125    getLang() {
126        return this.lang?.toLowerCase() === 'fr' ? 'fr' : 'en';
127    },
128
129    changeSrcIframe(id) {
130        this.selectedColorId = id;
131        let src = helperVariantsColor[id]['url_traceability'];
132        src += '?lang=' + this.getLang();

133        this.traceabilityIframe.src = src;
134    },
135
136    renderHtml() {
137        let self = this;
138        this.colorsUrlTraceability.forEach(function (id) {
139            self.traceabilityColors.innerHTML += `
140                <div class="option" onclick="traceability.changeSrcIframe(${id})" >
141                    <div class="color">
142                        <img loading="lazy" src="${helperVariantsColor[id]['color_url']}" alt="${helperVariantsColor[id]['color_label']}">
143                    </div>
144                    <div class="label">${helperVariantsColor[id]['color_label']}</div>
145                </div>
146            `;
147        });
148    },
149};