// This event will be fired whenever the Lookfy app is created document.addEventListener('lookfyGallery', function(event) { const {galleryElement} = event.detail; const hotspots = galleryElement.querySelectorAll(".kt-hotspot-item"); hotspots.forEach((hotspot)=>{ hotspot.addEventListener("click", (e)=>{ hotspotMove(hotspot); }); hotspot.addEventListener("touchstart", (e)=>{ hotspotMove(hotspot); }); }); }); function hotspotMove(hotspot){ const hotspotId = hotspot.dataset.id; const product = document.getElementById(hotspotId); /* const inViewPort = isElementInViewport(product); if(!inViewPort){ var rect = product.getBoundingClientRect(); var scrollObj = { behavior: "smooth", inline: "nearest" }; //block: "end", const productPosition = rect.top > 0 ? "end" : "start"; product.scrollIntoView({ ...scrollObj, block: "center", //productPosition }); }*/ product.scrollIntoView({ behavior: "smooth", inline: "nearest", block: "center", }); } function isElementInViewport (el) { var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */ rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */ ); } // This event will be fired whenever the Lookfy app is created document.addEventListener('lookfyGallery', function(event) { const {galleryData: { type }, row} = event.detail; if (lfUtils.lfLayoutColumn(type)) { row.querySelectorAll('.kt-lcolumn-item').forEach(rowItem => { const icons = rowItem.querySelectorAll(".kt-hotspot-item"); const productsClass = (type == 'default_embedded') ? ".hotspot-item-products-list" : '.kt-products-column'; const products = rowItem.querySelectorAll(`${productsClass} .hotspot-item-product`); products.forEach((product, index) => { product.addEventListener("mouseover", () => { icons.forEach((icon, j) => { if (j == index) { const event = new Event('mouseover', { bubbles: true }); icon.dispatchEvent(event); } }); }); product.addEventListener("mouseout", () => { //console.log(j,icon, index ,'log icon') icons.forEach((icon, j)=> { if (j == index) { const event = new Event('mouseout', { bubbles: false }); icon.dispatchEvent(event); } } ); }); }); }); } }); // add qty and add to cart button document.addEventListener('lookfyGallery', function(event) { const {galleryData, galleryElement} = event.detail; if((galleryData.type == "default_embedded")||(galleryData.type == "column_carousel")){ const hotspots = galleryElement.querySelectorAll(".kt-hotspots-wrapper .kt-hotspot-item"); hotspots.forEach(hotspot => { const form = hotspot.querySelector(".hotspot-item-form"); const hotspotLink = form.querySelector(".hotspot-item-form a"); hotspotLink.innerHTML = "Add to Cart"; const hotspotId = hotspotLink.closest(".hotspot-item-detail").dataset.hotspot; const hotspotForm = document.getElementById(hotspotId); if(hotspotForm){ const qty_val = hotspotForm?.querySelector(".quantity__input")?.value || 1; const qty_min = hotspotForm.querySelector(".quantity__input")?.quantity_rule?.min || 1; hotspotLink.addEventListener("click", (e)=>{ e.preventDefault(); if(hotspotForm){ hotspotForm.querySelector("button.kt-button-addtocart")?.click(); } }); const content = hotspot.querySelector(".hotspot-item-content-inner"); content.insertAdjacentHTML("beforeend", `

Menge: ${qty_min}

`); if(form.classList.contains("hotspot-item-availabletrue")){ form.insertAdjacentHTML("afterbegin", `

`); if(form){ const container = form.querySelector('.qty-input'); const input = container.querySelector('input[name="quantity"]'); const btnMinus = container.querySelector('.btn--minus'); const btnPlus = container.querySelector('.btn--plus'); const min = parseInt(input.min) || 0; // Handle minus button btnMinus.addEventListener('click', () => { let value = parseInt(input.value) || 0; if (value > min) { input.value = value - 1; } input.dispatchEvent(new Event('change', { bubbles: true })); }); // Handle plus button btnPlus.addEventListener('click', () => { let value = parseInt(input.value) || 0; input.value = value + 1; input.dispatchEvent(new Event('change', { bubbles: true })); }); // Handle manual input input.addEventListener('blur', () => { let value = parseInt(input.value); if (isNaN(value) || value < min) { input.value = min; } }); // Handle manual input input.addEventListener('change', () => { const quantityInput = hotspotForm.querySelector('.quantity__input'); console.log(quantityInput); if (quantityInput) { quantityInput.value = input.value; } }); } } } }); } }); // This is how you can configure a listener for said event document.addEventListener('lookfyCartAdded', function(event) { const tooltipElements = document.querySelectorAll('.kt-tooltip'); tooltipElements.forEach(function(element) { const event = new MouseEvent('mouseout', { bubbles: true, cancelable: true, view: window }); element.dispatchEvent(event); }); }); window.lfFormData = "cart-drawer,cart-drawer,cart-icon-bubble"; document.addEventListener("lookfyCartAdded", ({detail: { cartDetail, products }}) => { const cart = lfUtils.select('cart-notification') || lfUtils.select('cart-drawer'); if(lfShop.setup.redirect == "drawer" && cart){ if(products && lfUtils.select('cart-notification')){ const sectionElement = document.getElementById('cart-icon-bubble'); sectionElement.innerHTML = lfGetSectionInnerHTML(cartDetail.sections['cart-icon-bubble']); }else{ cart.renderContents(cartDetail); } lfUtils.documentEvent("lookfyCartFinished"); } });

WPM

‎