'use strict'; (function ($) { /*------------------ Preloader --------------------*/ $(window).on('load', function () { $(".loader").fadeOut(); $("#preloder").delay(200).fadeOut("slow"); /*------------------ Gallery filter --------------------*/ $('.featured__controls li').on('click', function () { $('.featured__controls li').removeClass('active'); $(this).addClass('active'); }); if ($('.featured__filter').length > 0) { var containerEl = document.querySelector('.featured__filter'); var mixer = mixitup(containerEl); } }); /*------------------ Background Set --------------------*/ $('.set-bg').each(function () { var bg = $(this).data('setbg'); $(this).css('background-image', 'url(' + bg + ')'); }); //Humberger Menu $(".humberger__open").on('click', function () { $(".humberger__menu__wrapper").addClass("show__humberger__menu__wrapper"); $(".humberger__menu__overlay").addClass("active"); $("body").addClass("over_hid"); }); $(".humberger__menu__overlay").on('click', function () { $(".humberger__menu__wrapper").removeClass("show__humberger__menu__wrapper"); $(".humberger__menu__overlay").removeClass("active"); $("body").removeClass("over_hid"); }); //Menu cart $(".menu_cart").on('click', function () { const path = window.location.pathname; const isCheckoutPage = /\/(cart|checkout|pay|status)(\/|$)/.test(path); if (!isCheckoutPage) { $(".cart__menu__wrapper").addClass("show__cart__menu__wrapper"); $(".cart__menu__overlay").addClass("active"); $("body").addClass("over_hid"); Livewire.emit('showShopMenu'); } }); $(".cart__menu__overlay").on('click', function () { $(".cart__menu__wrapper").removeClass("show__cart__menu__wrapper"); $(".cart__menu__overlay").removeClass("active"); $("body").removeClass("over_hid"); Livewire.emit('hideShopMenu'); }); $(".close_menu_cart").on('click', function () { $(".cart__menu__wrapper").removeClass("show__cart__menu__wrapper"); $(".cart__menu__overlay").removeClass("active"); $("body").removeClass("over_hid"); Livewire.emit('hideShopMenu'); }); /*------------------ Función compartir --------------------*/ $(document).ready(function() { $('#social_share').on('click', function(event) { event.preventDefault(); // Prevenir comportamiento predeterminado del botón const share = $('.icons_share'); const isMobile = window.innerWidth < 991; // Verifica si el ancho de la pantalla es menor a 991px // Función para compartir usando la API Web Share const shareViaWebShare = () => { let productUrl = $(this).data('url'); let productName = $(this).data('name'); let message = `Mira este producto increíble: ${productName}`; navigator.share({ title: productName, text: message, url: productUrl, }).then(() => { console.log('Contenido compartido exitosamente.'); }).catch((error) => { console.error('Error al compartir:', error); }); }; // Función para compartir en redes sociales usando enlaces const shareViaLink = () => { share.fadeToggle(300); // Animar el fade in/out $('#social_facebook').on('click', function(event) { event.preventDefault(); let productUrl = $(this).data('url'); let facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(productUrl)}`; window.open(facebookUrl, '_blank'); }); $('#share-whatsapp').on('click', function(event) { event.preventDefault(); let productUrl = $(this).data('url'); let productName = $(this).data('name'); let message = `Mira este producto increíble: ${productName}`; let whatsappUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(message)}%20${encodeURIComponent(productUrl)}`; window.open(whatsappUrl, '_blank'); }); $('#x-logo').on('click', function(event) { event.preventDefault(); let productUrl = $(this).data('url'); let twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(productUrl)}`; window.open(twitterUrl, '_blank'); }); $('#copy-url').on('click', function(event) { event.preventDefault(); let productUrl = $(this).data('url'); // Obtener la URL del producto navigator.clipboard.writeText(productUrl).then(() => { toastr.success('Se ha copiado el link.', { closeButton: true, progressBar: true, positionClass: "toast-top-right", timeOut: 5000 }); }).catch(err => { console.error('Error al copiar la URL: ', err); }); }); }; // Si la pantalla es menor a 991px y soporta la API Web Share if (isMobile && navigator.share) { shareViaWebShare(); // Compartir directamente en móvil } else { shareViaLink(); // Mostrar enlaces para compartir en escritorio } }); }); /*------------------ carga dinamica de secciones --------------------*/ document.addEventListener("DOMContentLoaded", () => { const default_url = window.default_url; const MAX_CONCURRENT_LOADS = Math.max(2, Math.floor((navigator.hardwareConcurrency || 4) / 1.5)); let activeLoads = 0; const loadQueue = []; const loadingSet = new Set(); const controllers = {}; const PRIORITY_IDS = ["promotionGroupContainer", "recomendedGroupContainer"]; const loadSections = [ { id: "bannersTopContainer", type: "banners-top" }, { id: "promotionGroupContainer", type: "promotions-group" }, { id: "recomendedGroupContainer", type: "recomended-group" }, { id: "menuCategories", type: "menu-categories" }, { id: "menuContainer", type: "menu-category" }, { id: "bannersRecommendedContainer", type: "banners-recommended" }, { id: "bannersPartnerContainer", type: "banners-partners" }, { id: "bannersCenterContainer", type: "banners-center" }, { id: "bannersBottonContainer", type: "banners_bottom" }, { id: "bannersOffersContainer", type: "banners-offers" }, { id: "presentationsByCategoryContainer", type: "presentations-by-category" }, ]; function showLoader(el, type) { if (!el.offsetParent) return; el.innerHTML = type === "banner" ? `
` : `
${'
'.repeat(6)}
`; } function enqueueSection(section, el, observer) { if (loadingSet.has(el.id)) return; const item = { section, el, observer }; loadingSet.add(el.id); if (PRIORITY_IDS.includes(section.id)) { loadQueue.unshift(item); } else { loadQueue.push(item); } processQueue(); } function processQueue() { while (activeLoads < MAX_CONCURRENT_LOADS && loadQueue.length > 0) { const { section, el, observer } = loadQueue.shift(); loadSection(section, el, observer); } } function retryFetch(url, options) { console.log(`📡 Intentando fetch: ${url}`); return fetch(url, options) .then(res => { if (!res.ok) { console.error(`❌ Error HTTP ${res.status} al cargar: ${url}`); throw new Error(`HTTP error: ${res.status}`); } return res; }) .catch(err => { console.error(`⛔ Error en fetch: ${url}`, err); throw err; }); } function loadSection(section, el, observer) { const type = section.id.includes("banners") ? "banner" : "cart"; showLoader(el, type); const controller = new AbortController(); controllers[el.id] = controller; activeLoads++; const url = `${default_url}/ajax?type=${section.type}`; const timeoutId = setTimeout(() => controller.abort(), 12000); retryFetch(url, { signal: controller.signal, keepalive: true }) .then(res => { if (!res.ok) { // Dispara error si la respuesta tiene status 4xx o 5xx throw new Error(`HTTP ${res.status}`); } return res.text(); }) .then(html => { if (!document.body.contains(el)) return; el.style.opacity = 0; el.innerHTML = html; el.dataset.loaded = "true"; observer.unobserve(el); requestAnimationFrame(() => { el.style.transition = 'opacity 0.5s ease'; el.style.opacity = 1; }); initOwlSliders(el); executeInlineScripts(el); }) .catch(err => { if (err.name !== 'AbortError') { console.error(`Error en sección ${section.type}`, err); el.innerHTML = `

😕 No pudimos cargar esta sección.

`; el.dataset.loaded = "error"; observer.unobserve(el); const retryBtn = el.querySelector('.retry-btn'); if (retryBtn) { retryBtn.addEventListener('click', () => { el.dataset.loaded = ""; // Resetear para que el observer vuelva a activarse enqueueSection(section, el, observer); // Volver a ponerlo en la cola }); } } }) .finally(() => { clearTimeout(timeoutId); activeLoads--; loadingSet.delete(el.id); delete controllers[el.id]; processQueue(); }); } const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { const el = entry.target; const section = loadSections.find(s => s.id === el.id); if (!entry.isIntersecting || !section || el.dataset.loaded) return; enqueueSection(section, el, observer); }); }, { threshold: 0.1, rootMargin: "600px 0px" }); loadSections.forEach(section => { const el = document.getElementById(section.id); if (el) { if ('requestIdleCallback' in window) { requestIdleCallback(() => observer.observe(el)); } else { observer.observe(el); } } }); // Precarga automática en background con baja prioridad if ('requestIdleCallback' in window) { requestIdleCallback(() => { const backgroundIds = []; backgroundIds.forEach(id => { const el = document.getElementById(id); const section = loadSections.find(s => s.id === id); if (el && section && !el.dataset.loaded) { enqueueSection(section, el, observer); } }); }, { timeout: 7000 }); } }); // Ejecutar scripts inline de vistas inyectadas function executeInlineScripts(container) { const scripts = container.querySelectorAll('script'); scripts.forEach(script => { const newScript = document.createElement('script'); if (script.src) newScript.src = script.src; else newScript.textContent = script.textContent; document.body.appendChild(newScript); script.remove(); }); } function initOwlSliders(scope = document) { $(scope).on('initialized.owl.carousel', function(event){ window.dispatchEvent(new Event('resize')); setTimeout(() => { $('.owl-carousel').trigger('refresh.owl.carousel'); }, 500); }); // Reinicializa sliders existentes dentro del nuevo contenido $(scope).find('.banners__slider').owlCarousel({ loop: true, margin: 0, items: 1, dots: true, nav: true, navText: ["", ""], smartSpeed: 500, autoplay: true, autoplayTimeout: 6000, autoplayHoverPause: true, autoHeight: true, lazyLoad: true, lazyLoadEager: 2 }); $(scope).find('.banners_partner_').owlCarousel({ loop: true, margin: 0, items: 1, dots: true, nav: true, navText: ["", ""], smartSpeed: 500, autoplay: true, autoplayTimeout: 6000, autoplayHoverPause: true, autoHeight: true, lazyLoad: true, lazyLoadEager: 2 }); $(scope).find('.banners__slider_bottom').owlCarousel({ loop: true, margin: 0, items: 1, dots: true, nav: true, navText: ["", ""], smartSpeed: 500, autoplay: true, autoplayTimeout: 6000, autoplayHoverPause: true, autoHeight: true, lazyLoad: true, lazyLoadEager: 2 }); var itemCount = window.itemCount || 0; var loopSetting = itemCount >= 4; $(scope).find('.classes__slider').owlCarousel({ loop: loopSetting, margin: 1, dots: false, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplay: true, autoplayHoverPause:true, responsive: { 0: { items: 1, loop: true }, 391: { items: 1, loop: true }, 480: { items: 1, loop: true }, 576: { items: 1, loop: true }, 768: { items: 2, loop: true }, 992: { items: 2, loop: true }, 1200: { items: 2, }, 1441: { items: 3, }, 1599: { items: 3, }, 1900: { items: 4, } } }); $(scope).find('.promotion__slider').owlCarousel({ loop: true, margin: 1, dots: false, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplayTimeout: 6000, autoplay: true, autoplayHoverPause:true, responsive: { 0: { items: 2, }, 391: { items: 2, }, 480: { items: 2, }, 576: { items: 3, }, 768: { items: 3, }, 992: { items: 4, }, 1200: { items: 5, }, 1441: { items: 6, }, 1599: { items: 7, }, 1900: { items: 7, } } }); } /*------------------ Navigation --------------------*/ $(".mobile-menu").slicknav({ prependTo: '#mobile-menu-wrap', allowParentLinks: true }); /*----------------------- Banners Slider Top ------------------------*/ $(".banners__slider").owlCarousel({ loop: true, margin: 0, items: 1, dots: true, nav: true, navText: ["", ""], smartSpeed: 500, autoplay: true, autoplayTimeout: 6000, autoplayHoverPause: true, autoHeight: true, lazyLoad: true, lazyLoadEager: 2 }); /*----------------------- Banners Slider Bottom ------------------------*/ $(".banners__slider_bottom").owlCarousel({ loop: true, margin: 0, dots: true, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplay: true, autoplayTimeout: 6000, autoplayHoverPause: true, autoplayHoverPause:true, responsive: { 0: { items: 1, }, 991: { items: 1, }, 992: { items: 1, }, 1900: { items: 1, } } }); /*----------------------- Banners Slider Partner ------------------------*/ $(".banners_partner_").owlCarousel({ loop: true, margin: 0, dots: true, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplay: true, autoplayTimeout: 6000, autoplayHoverPause: true, autoplayHoverPause:true, responsive: { 0: { items: 1, }, 991: { items: 1, }, 992: { items: 1, }, 1900: { items: 1, } } }); /*----------------------- classes__slider ------------------------*/ // Obtener el valor de la variable global itemCount var itemCountClasses = window.itemCountCategories || 0; // Configurar el loop en base al número de elementos var loopSettingClasses = itemCountClasses >= 4; $(".classes__slider").owlCarousel({ loop: loopSettingClasses, margin: 1, dots: false, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplay: true, autoplayHoverPause:true, responsive: { 0: { items: 1, loop: true }, 391: { items: 1, loop: true }, 480: { items: 1, loop: true }, 576: { items: 1, loop: true }, 768: { items: 2, loop: true }, 992: { items: 2, loop: true }, 1200: { items: 2, }, 1441: { items: 3, }, 1599: { items: 3, }, 1900: { items: 4, } } }); /*----------------------- Promotion Slider ------------------------*/ $(".promotion__slider").owlCarousel({ loop: false, margin: 1, dots: false, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplayTimeout: 6000, autoplay: false, autoplayHoverPause:true, responsive: { 0: { items: 2, }, 391: { items: 2, }, 480: { items: 2, }, 576: { items: 3, }, 768: { items: 3, }, 992: { items: 4, }, 1200: { items: 5, }, 1441: { items: 6, }, 1599: { items: 7, }, 1900: { items: 7, } } }); /*----------------------- Recomended Slider ------------------------*/ $(".categories__slider").owlCarousel({ loop: true, margin: 1, dots: false, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplayTimeout: 6000, autoplay: true, autoplayHoverPause:true, responsive: { 0: { items: 2, }, 391: { items: 2, }, 480: { items: 2, }, 576: { items: 2 }, 768: { items: 3, }, 992: { items: 3, }, 1200: { items: 4, }, 1441: { items: 4, }, 1599: { items: 5, }, 1900: { items: 6, } } }); /*----------------------- related Slider ------------------------*/ // Obtener el valor de la variable global itemCount var itemCountRelated = window.itemCountRelated || 0; // Configurar el loop en base al número de elementos var loopSettingRelated = itemCountRelated >= 6; $(".related__slider").owlCarousel({ loop: loopSettingRelated, margin: 1, dots: false, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplayTimeout: 6000, autoplay: true, autoplayHoverPause:true, responsive: { 0: { items: 1, }, 768: { items: 2, }, 992: { items: 3, }, 1200: { items: 4, }, 1441: { items: 4, }, 1599: { items: 5, }, 1900: { items: 6, } } }); /*----------------------- Partner Slider ------------------------*/ // Obtener el valor de la variable global itemCountPartner var itemCountPartner = window.itemCountPartner || 0; // Configurar el loop en base al número de elementos var loopPartner = itemCountPartner >= 6; $(".partner__slider").owlCarousel({ loop: loopPartner, dots: false, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplayTimeout: 6000, autoplay: true, autoplayHoverPause:true, responsive: { 0: { items: 2, }, 391: { items: 2, }, 480: { items: 2, }, 576: { items: 2 }, 768: { items: 3, }, 992: { items: 3, }, 1200: { items: 4, }, 1441: { items: 4, }, 1599: { items: 5, }, 1900: { items: 6, } } }); /*----------------------- Bousiness Carousel ------------------------*/ $(".busines_carousel").owlCarousel({ loop: false, dots: true, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplayTimeout: 6000, autoplay: false, autoplayHoverPause:true, responsive: { 0: { items: 4, }, 391: { items: 4, }, 480: { items: 5, }, 576: { items: 6, }, 768: { items: 8, }, 992: { items: 8, }, 1200: { items: 8, }, 1441: { items: 10, }, 1599: { items: 11, }, 1900: { items: 12, } } }); /*----------------------- Cart carousel ------------------------*/ // Obtener el valor de la variable global itemCountPartner var itemCountPartner = window.itemCountPartner || 0; // Configurar el loop en base al número de elementos var loopPartner = itemCountPartner >= 6; $(".cart__slider").owlCarousel({ loop: true, margin: 1, dots: false, nav: true, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', smartSpeed: 500, autoHeight: true, autoplayTimeout: 6000, autoplay: true, autoplayHoverPause:true, responsive: { 0: { items: 1, }, 385: { items: 2, }, 575: { items: 2, }, 767: { items: 2, }, 992: { items: 3, }, 1199: { items: 3, }, 1399: { items: 4, }, 1599: { items: 5, }, 1900: { items: 5, } } }); //$(".categories__slider").css("height", "250px"); $('.hero__categories__all').on('click', function(){ $('.hero__categories ul').slideToggle(400); }); /*-------------------------- Latest Product Slider ----------------------------*/ $(".latest-product__slider").owlCarousel({ loop: true, margin: 1, items: 1, dots: false, nav: true, navText: ["", ""], smartSpeed: 500, autoHeight: false, autoplay: true }); /*----------------------------- Product Discount Slider -------------------------------*/ $(".product__discount__slider").owlCarousel({ loop: true, margin: 1, items: 3, dots: true, smartSpeed: 500, autoHeight: false, autoplayTimeout: 6000, autoplay: true, responsive: { 320: { items: 1, }, 480: { items: 2, }, 768: { items: 2, }, 992: { items: 4, }, 1440: { items: 5, }, 1600: { items: 6, } } }); /*--------------------------------- Product Details Pic Slider ----------------------------------*/ $(".product__details__pic__slider").owlCarousel({ loop: true, margin: 1, items: 3, dots: true, smartSpeed: 500, autoHeight: true, autoplayTimeout: 6000, autoplay: true, nav: false, navText: ["", ""], animateOut: 'fadeOut', animateIn: 'fadeIn', responsive: { 768: { items: 2, }, 992: { items:3 } } }); /*----------------------- Price Range Slider ------------------------ */ var rangeSlider = $(".price-range"), minamount = $("#minamount"), maxamount = $("#maxamount"), minPrice = rangeSlider.data('min'), maxPrice = rangeSlider.data('max'); rangeSlider.slider({ range: true, min: minPrice, max: maxPrice, values: [minPrice, maxPrice], slide: function (event, ui) { minamount.val('$' + ui.values[0]); maxamount.val('$' + ui.values[1]); } }); minamount.val('$' + rangeSlider.slider("values", 0)); maxamount.val('$' + rangeSlider.slider("values", 1)); /*-------------------------- Select ----------------------------*/ //$("select").niceSelect(); $(".select").select2(); /*------------------ Single Product --------------------*/ $('.product__details__pic__slider img').on('click', function () { var imgurl = $(this).data('imgbigurl'); var bigImg = $('.product__details__pic__item--large').attr('src'); if (imgurl != bigImg) { $('.product__details__pic__item--large').attr({ src: imgurl }); } }); /*------------------- Quantity change --------------------- */ var proQty = $('.pro-qty'); proQty.prepend('-'); proQty.append('+'); proQty.on('click', '.qtybtn', function () { var $button = $(this); var $input = $button.parent().find('input'); var oldValue = parseInt($input.val()); var minVal = $input.attr('min') ? parseInt($input.attr('min')) : 1; var maxVal = $input.attr('max') ? parseInt($input.attr('max')) : Infinity; if ($button.hasClass('inc')) { var newVal = (isNaN(oldValue) || oldValue < maxVal) ? oldValue + 1 : oldValue; } else { var newVal = (isNaN(oldValue) || oldValue > minVal) ? oldValue - 1 : oldValue; } $input.val(newVal); }); // Manejar la entrada directa en el campo proQty.on('input', 'input', function () { var $input = $(this); var newVal = parseInt($input.val()); var minVal = $input.attr('min') ? parseInt($input.attr('min')) : 1; var maxVal = $input.attr('max') ? parseInt($input.attr('max')) : Infinity; // Ajustar el valor si es menor que el valor mínimo if (isNaN(newVal) || newVal < minVal) { newVal = minVal; } // Ajustar el valor si es mayor que el valor máximo if (newVal > maxVal) { newVal = maxVal; } $input.val(newVal); }); })(jQuery);