Apunta el teléfono al piso.
Desplaza para visualizar.
Amplia y detalla el producto.
Toca dos veces para restablecer.
${finalSize}
`; currentSizeDOM == option.idOption ? size.setAttribute("selectSizeModalMudi", "true") : size.setAttribute("selectSizeModalMudi", "false"); containerSizes.appendChild(size); size.addEventListener("click", () => { cleanSizes(); size.setAttribute("selectSizeModalMudi", "true"); this.matchColorAndSize(); HTML.querySelector(`.form-control`) && (HTML.querySelector(`.form-control`).value = option.idOption); }); mudiPage.updateSize(); }); this.modalMudi.querySelector(".iframeMudi3D") && this.modalMudi .querySelector(".iframeMudi3D") .appendChild(containerSizes); } } matchColorAndSize() { const ColorSku = this.modalMudi .querySelector(`[checkColor='true']`) .getAttribute("sku"); const CurrentSize = this.modalMudi.querySelector( `[selectsizemodalmudi='true']` ).children[0].innerHTML; /** Lamento ensuciar mi código con este forHELL */ for (const key in colchones) { for (const key2 in colchones[key]) { for (const key3 in colchones[key][key2]) { for (const key4 in colchones[key][key2][key3]) { for (const key5 in colchones[key][key2][key3][key4]) { for (const key6 in colchones[key][key2][key3][key4][key5]) { for (const key7 in colchones[key][key2][key3][key4][key5][ key6 ]) { if ( colchones[key][key2][key3][key4][key5][key6][key7]["sku"] == ColorSku ) { this.updaterData( colchones[key][key2][key3][key4][key5][key6][CurrentSize][ "sku" ] ); } } } } } } } } } createModalPDP({ sizes = [], colors }) { this.createModal(); this.addBtnAR(); this.addColorTool(colors, sizes); this.addSizeTool(sizes); document.body.appendChild(this.modalMudi); } createModalPLP({ sizes = [], colors, combinations, configPLP, name, HTML }) { this.createModal(); this.addBtnAR(); this.addColorTool( colors ? JSON.parse(colors) : [], sizes ? JSON.parse(sizes) : [], configPLP, HTML ); this.addSizeTool(sizes ? JSON.parse(sizes) : [], configPLP, HTML); // this.addBtnGoToSide(name, combinations, sizes, HTML); document.body.appendChild(this.modalMudi); } updaterData(sku) { this.modalMudi.querySelector( ".modelMudi" ).src = `https://viewer.mudi.com.co/v1/web/?id=147&sku=${sku}`; this.modalMudi.querySelector( ".mudiQR" ).src = `https://viewer.mudi.com.co/v1/qr/?id=147&sku=${sku}`; this.dataServer.URL_AR = `https://viewer.mudi.com.co/v1/ar/?id=147&sku=${sku}`; } } class BTN3D { constructor(skuNumber, color) { this.btn3D; this.skuNumber = skuNumber; this.color = color; } /** Creates */ create({ sizeList, colorList, referenceList, data }) { document.querySelector(".btnsMudiContainer") && document.querySelector(".btnsMudiContainer").remove(); /** Create Fragment */ const btn3D = document.createDocumentFragment(); /** Create containers */ const containerBtn = document.createElement("DIV"); containerBtn.classList.add("btnsMudiContainer"); containerBtn.appendChild(this.createTooltip()); containerBtn.setAttribute("skuNumber", this.skuNumber); containerBtn.innerHTML += ` `; containerBtn.querySelector("#img3DBtn").addEventListener("click", () => { if (referenceList) { console.log("estoy aqui"); } else { const modal = new ModalMudi(data, this.color, this.skuNumber); modal.createModalPDP({ sizes: sizeList, colors: colorList }); mudiPage.updateBtn3D(); mudiSession.updateInteractionSession(); } /** Enviamos el evento al GTM */ sendEventInteraction("Evento de interaccion 3D", this.skuNumber); }); this.btn3D = btn3D; btn3D.appendChild(containerBtn); sendEventInteraction("visualizacion_botones", this.skuNumber); /* Seteamo el evento para el Add To Car*/ setTimeout(() => { mudiPage.updateViewBtn(); }, 500); /** Add DOM */ return btn3D; } createTooltip() { const tooltip = document.createElement("P"); tooltip.classList.add("tooltipMudi"); tooltip.innerHTML = `¡Nuevo! Descubre como se ve este producto en 3D y realidad aumentada en tu espacio`; setTimeout(this.deleteTooltip, 9000); return tooltip; } /** Deletes */ deleteTooltip() { document.body.querySelector(".tooltipMudi").style.opacity = 0; setTimeout( () => document.body.querySelector(".tooltipMudi").remove(), 1500 ); } deleteBtn() { if (this.btn3D) { this.btn3D.style.opacity = 0; setTimeout(() => this.btn3D.remove(), 1500); } } } class MudiExperiencePDP { constructor() { /** config Amoblando Pullman */ this.sizeList; this.colorList; /** Reference node HTML father , node Container Btn 3D */ this.fatherContainer; /** Response Mudi-Server*/ this.dataServer; this.colorClient = "#03457c"; } /** Conect mudiServer ✔️ */ async conectServer(skuNumber) { const myBody = { skus: [skuNumber] }; this.skuNumber = skuNumber; try { /** We make the request to the MUDI server */ const request = await fetch( "https://mudiview.mudi.com.co:7443/product/getProductsUrl", { method: "POST", headers: { "Content-type": "application/json", tokenapi: "GjSAn4bGJZzU4cZnZP5q", }, body: JSON.stringify(myBody), } ); const response = await request.json(); if ( response.data && Array.isArray(response.data) && response.data.length > 0 ) { this.dataServer = response.data[0]; this.getValues(); } } catch (error) { throw error; } } /** Create Styles ✔️ */ createStyles() { /** Verify element HTML */ if (document.head.querySelector("#stylesMudiGeneral")) { return; } const link = document.createElement("LINK"); link.setAttribute("rel", "stylesheet"); link.id = "stylesMudiGeneral"; link.href = `https://cdn.jsdelivr.net/gh/mudi-3D/amoblandoPullman@latest/index.css`; /* custom this path */ document.head.appendChild(link); } /** Get config by Amoblando Pullman from HTML Elements hidden - ✔️ */ getValues() { let ElementSizeList = document.getElementById("referenceSizeMudi"); let ElementColorList = document.getElementById("referenceColorMudi"); ElementColorList && (this.colorList = JSON.parse(ElementColorList.value)); ElementSizeList && (this.sizeList = JSON.parse(ElementSizeList.value)); } async experienceOn(skuNumber, fatherContainer) { /** Verify father Container */ fatherContainer && (this.fatherContainer = fatherContainer); try { await this.conectServer(skuNumber); this.createStyles(); if (this.dataServer) { const btn3D = new BTN3D(skuNumber, this.colorClient).create({ colorList: this.colorList, sizeList: this.sizeList, referenceList: null, data: this.dataServer, }); fatherContainer.appendChild(btn3D); } } catch (error) { console.error(`Mudi Error:\n${error}`); } } } class MudiExperiencePLP { constructor() { this.storage = []; this.counterBackFlags = 0; } getMudiFlags() { this.counterBackFlags++; let allMudiFlags = []; const images = document.body.querySelector(".imgMundi"); images && (allMudiFlags = document.body.querySelectorAll(".imgMundi")); if (this.counterBackFlags == 500) { console.warn(`No se encontro ningun elemento PLP MUDI`); return; } else if (allMudiFlags.length == 0) { requestAnimationFrame(this.getMudiFlags.bind(this)); return; } setTimeout(() => { mudiPage.updateViewBtn(); }, 500); //mudiPage.updateViewBtn(); allMudiFlags.forEach((flag) => { const status = flag.getAttribute("style"); //status == "" && flag.addEventListener("click", (e) => { this.buildModal(e); mudiPage.updateBtn3D(); mudiSession.updateInteractionSession(); }); }); } buildModal(e) { this.createStyles(); const infoCard = this.getInfoAttr(e.target.parentNode.children[1]); const sku_number = this.getSkuNumber(infoCard); sendEventInteraction("3D PLP", sku_number); const modalPLP = new ModalMudi( { URL_QR: `https://viewer.mudi.com.co/v1/qr/?id=147&sku=${sku_number}`, URL_WEB: `https://viewer.mudi.com.co/v1/web/?id=147&sku=${sku_number}`, URL_AR: `https://viewer.mudi.com.co/v1/ar/?id=147&sku=${sku_number}`, }, "#03457c" ); modalPLP.createModalPLP({ sizes: infoCard.listSize, colors: infoCard.listColors, combinations: infoCard.listCombinations, configPLP: { currentSize: infoCard.currentSize, currentColor: infoCard.currentColor, }, name: infoCard.name, HTML: e.target.parentNode.children[1], }); } getSkuNumber(info) { const JSONInfoColors = info.listColors ? JSON.parse(info.listColors) : []; const JSONInfoSize = info.listSize ? JSON.parse(info.listSize) : []; const objCurrentColor = JSONInfoColors.find( (option) => option.idOption == info.currentColor ); if (!info.listSize) { return objCurrentColor.sku; } else { const listColors = JSONInfoColors.find( (option) => option.idOption == info.currentColor ); const CurrentSize = JSONInfoSize.find( (option) => option.idOption == info.currentSize ); const text = CurrentSize.medida.split(" | ")[1]; return this.matchColorAndSize(listColors.sku, text); } } matchColorAndSize(ColorSku, CurrentSize) { /** Lamento ensuciar mi código con este forHELL */ for (const key in colchones) { for (const key2 in colchones[key]) { for (const key3 in colchones[key][key2]) { for (const key4 in colchones[key][key2][key3]) { for (const key5 in colchones[key][key2][key3][key4]) { for (const key6 in colchones[key][key2][key3][key4][key5]) { for (const key7 in colchones[key][key2][key3][key4][key5][ key6 ]) { if ( colchones[key][key2][key3][key4][key5][key6][key7]["sku"] == ColorSku ) { console.log( colchones[key][key2][key3][key4][key5][key6][CurrentSize][ "sku" ] ); return colchones[key][key2][key3][key4][key5][key6][ CurrentSize ]["sku"]; } } } } } } } } } getInfoAttr(elementHTML) { let listSize = elementHTML.querySelector("#referenceSizeMudi"); let listColors = elementHTML.querySelector("#referenceColorMudi"); let listCombinations = elementHTML.querySelector( "#referenceCombinationsMudi" ); let nameProduct = elementHTML.querySelector(".reteyuj"); listSize && (listSize = listSize.value); listColors && (listColors = listColors.value); listCombinations && (listCombinations = listCombinations.value); const currentColor = elementHTML .querySelector(".chkColor") .getAttribute("attr-value"); const currentSize = elementHTML.querySelector( ".form-control.center-block.input-sm" ).value; return { listSize: listSize, listColors: listColors, listCombinations: listCombinations, currentColor: currentColor, currentSize: currentSize, name: nameProduct, }; } createStyles() { /** Verify element HTML */ if (document.head.querySelector("#stylesMudiGeneral")) { return; } const link = document.createElement("LINK"); link.setAttribute("rel", "stylesheet"); link.id = "stylesMudiGeneral"; link.href = `https://cdn.jsdelivr.net/gh/mudi-3D/amoblandoPullman@latest/index.css`; /* custom this path */ document.head.appendChild(link); } excute() { this.getMudiFlags(); } } document.addEventListener("DOMContentLoaded", () => { const mudiExperiencePLP = new MudiExperiencePLP(); mudiExperiencePLP.excute(); }); const mudiExperience = new MudiExperiencePDP(); window.mudiExperience = mudiExperience; setTimeout(addTocarFunctionMudi, 1500);