/** Mudi Experience */ class MudiExperience{ constructor(){ this.color = "#212246"; this.dataSever = null; this.skuNumber = null; this.fatherContainer = null; }; /** 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":"5PiwoPTtwJT3QgF9D2cR" }, body: JSON.stringify(myBody) }) const response = await request.json(); this.dataServer = response.data[0]; } catch (error) {console.error(`Mudi Error:\n${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/RodriguezJose92/panamericana@latest/index.css`; /* custom this path */ document.head.appendChild(link) }; /** Create button only 3D ✔️*/ createBtns(){ /** Verify btns */ document.body.querySelector('.btnsMudiContainer') && document.body.querySelector('.btnsMudiContainer').remove(); /** Create Fragment */ const fragment = document.createDocumentFragment(); /** Create containers */ const containerBtns = document.createElement('DIV'); containerBtns.classList.add('btnsMudiContainer'); containerBtns.appendChild(this.createTooltip()); containerBtns.innerHTML +=` `; containerBtns.querySelector('#img3DBtn').addEventListener('click',()=>{ this.createModal(); /** GTM */ this.sendEventInteraction('3D'); }); fragment.appendChild(containerBtns); /** Add DOM */ this.fatherContainer.appendChild(fragment) }; /** Create Modal ✔️ */ createModal(){ /** create variables */ let flagAR = false; /** We create a shell for the MUDI modal */ const modalMudi = document.createElement('DIV'); modalMudi.id=`modalMudi`; modalMudi.classList.add(`mudiModal`); modalMudi.innerHTML=`
VER EN TU ESPACIO

ESCANÉAME PARA
VER EN TU ESPACIO

Apunta el teléfono al piso.

Desplaza para visualizar.

Amplia y detalla el producto.

Toca dos veces para restablecer.

`; /** We close the MUDI modal*/ modalMudi.querySelector(`.closeModalMudi`).addEventListener('click',()=>{ document.body.querySelector('#modalMudi').remove(); }); /** Init ARExperience */ modalMudi.querySelector(`#imgARBtn`).addEventListener('click',()=>{ if(window.innerWidth>1000){ !flagAR ? ( document.body.querySelector('.containerQRMudi').style.right="15%", changeStyleBtnAR(flagAR,this.color), flagAR = !flagAR ) : ( document.body.querySelector('.containerQRMudi').style.right="-150%", changeStyleBtnAR(flagAR,this.color), flagAR = !flagAR ) } else { this.sendEventInteraction('AR'); window.open(`${this.dataServer.URL_AR}`,"_BLANK"); } flagAR && this.sendEventInteraction('AR') }); /** Verify Style Bttn AR */ function changeStyleBtnAR(flagAR,color){ let icon = document.body.querySelectorAll('.cls-3_modal') flagAR ? ( document.body.querySelector('.cls-1_modal').style.fill=color, icon.forEach((icon)=>icon.style.fill="white"), document.body.querySelector('.cls-2_modal').style.fill="white" ) : ( document.body.querySelector('.cls-1_modal').style.fill="white", icon.forEach((icon)=>icon.style.fill=color), document.body.querySelector('.cls-2_modal').style.fill=color ) }; document.body.appendChild(modalMudi) }; /** create tooltip ✔️ */ 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(()=>{ document.body.querySelector('.tooltipMudi').remove(); },9000) return tooltip; }; /** Send Evnt Interacción ✔️ */ sendEventInteraction(eventName){ let OSdevice; if (navigator.userAgent.includes('Android')) OSdevice = 'Android'; else if (navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad')) OSdevice = "IOS"; else OSdevice = 'DESK'; window.dataLayer && dataLayer.push({ event: `Evento de interaccion ${eventName}`, valorMudi: 1, sku: this.skuNumber, sistemaOperativo: OSdevice }) }; /** viewer event Mudi GTM */ sendEventViewer(){ let OSdevice; if (navigator.userAgent.includes('Android')) OSdevice = 'Android'; else if (navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad')) OSdevice = "IOS"; else OSdevice = 'DESK'; window.dataLayer && dataLayer.push({ event: `visualizacion_botones`, valorMudi: 1, sku: this.skuNumber, sistemaOperativo: OSdevice }) }; /** verifyExperience ✔️ */ async experienceOn(skuNumber, fatherContainer){ /** Verify father Container */ fatherContainer && (this.fatherContainer = fatherContainer); /** Response Mudi server */ await this.conectServer(skuNumber); /** verify process */ if (!this.dataServer){ document.body.querySelector('.btnsMudiContainer') && document.body.querySelector('.btnsMudiContainer').remove(); console.warn(`El sku: ${skuNumber} no posee experiencias de 3D y AR`) return; } /** Create Styles */ this.createStyles(); /** Create Buttons */ this.createBtns(); /** Viewer event GTM */ this.sendEventViewer(); }; }; const mudiExperience = new MudiExperience(); /** Verificación de SKU number desde el Domn y el contendor del botón 3D */ function verifyDomElements(){ /** Declaro mis variables del DOM */ let sku , fatherContainer ; if( navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad')){ // <-- Esto es para iPhone sku = document.body.querySelector('.vtex-product-identifier-0-x-product-identifier__value'); fatherContainer = document.body.querySelector('.vtex-store-components-3-x-carouselGaleryCursor'); }else { // Para android y Desk sku = document.body.querySelector('.vtex-product-identifier-0-x-product-identifier__value'); fatherContainer = document.body.querySelector('.vtex-store-components-3-x-carouselGaleryCursor'); } sku && fatherContainer ? mudiExperience.experienceOn( sku.innerHTML , fatherContainer.parentNode.parentNode ) : requestAnimationFrame(verifyDomElements) }; verifyDomElements();