// Global variables let infoWindow, map, autocomplete, selectedItem = {}; const carrousel = '.owl-carousel-home'; const carrouselProducts = '.owl-carousel-products'; const mobileMenu = '#mobile-menu'; const nav = '.nav'; const navContainer = '.nav__container'; const navClass = 'nav--active'; const navNoScrollClass = 'nav--noscroll'; const askButton = '#lc-map-use'; const markerClose = '.map__close'; const homeCardSelector = 'options__side'; const cardSelector = 'products__card-side'; let activeNav = false; // Stores Map const mapId = 'lc-map'; const mapDialog = 'map__search-'; const mapDialogDiv = `.${mapDialog}result`; const mapDialogActive = `${mapDialog}result--active`; const mapMarkerIcon = 'https://mexico.littlecaesars.com//portals/0/Images/LittleCaesars/map-pin.png'; var userPosition = ''; var actualStore = ''; var directionsDisplay = ''; var directionsService = ''; $(window).on('load', () => { // Products hash if (window.location.hash) { $('html, body').animate({ scrollTop: $(window.location.hash).offset().top }, 'slow'); } }); // Resize $(window).on('resize', () => { $(mobileMenu).prop('checked', false); $(nav).removeClass(navClass); $('body').removeClass(navNoScrollClass); $('.carrousel__image').removeClass('animated bounceInDown slideInDown slideInUp fadeInDown fadeInLeft fadeInRight bounceInUp'); }); $(document).ready(() => { // Carrousel const homeCarousel = $(carrousel).owlCarousel({ nav: false, items: 1, loop: false, lazyLoad: true, autoplay: true, autoplayTimeout: 80000, autoplayHoverPause: true, onInitialize: function(){ $(carrousel).removeClass('loading'); } }); $(carrousel).trigger("to.owl.carousel", [0, 1]); // Change carousel homeCarousel.on('changed.owl.carousel', ({ page }) => { if (window.innerWidth <= 1000) return const { index } = page; $('.carrousel__image').removeClass('animated bounceInDown slideInDown slideInUp fadeInDown fadeInLeft fadeInRight bounceInUp'); switch (index) { case 0: $('.carrousel__image_lc').addClass('animated fadeInLeft'); $('.carrousel__image_title').addClass('animated slideInDown'); $('.carrousel__image_info').addClass('animated slideInUp'); break; /// Slide 0 case 1: $('.carrousel__image_cu4tro_pizza').addClass('animated slideInDown'); $('.carrousel__image_cu4tro_name').addClass('animated fadeInRight'); $('.carrousel__image_cu4tro_promo').addClass('animated slideInUp'); break; /// Slide 1 case 2: $('.carrousel__image-0--lc').addClass('animated bounceInDown'); $('.carrousel__image-0--title').addClass('animated slideInDown'); $('.carrousel__image-0--subtitle').addClass('animated slideInDown'); break; /// Slide 2 case 3: $('.carrousel__image-2--title').addClass('animated fadeInLeft'); $('.carrousel__image-2--subtitle').addClass('animated bounceInDown'); $('.carrousel__image-2--pizza').addClass('animated fadeInRight'); break; // Slide 3 } }); // Products carousel $(carrouselProducts).owlCarousel({ nav: false, items: 1, loop: true }); // Mobile navigations $(mobileMenu).change(function () { if ($(this).is(':checked')) { $(nav).addClass(navClass); activeNav = true; } else { $(nav).removeClass(navClass); $(nav).removeClass(navNoScrollClass); activeNav = false; } }); // Reset height of menu if height is too large if ($(window).height() > $(navContainer).height()) { $(nav).height($(window).height()); } // Mobile navigation prevent scroll $(window).on('scroll', () => { // const height = $(nav).height() - $(window).height(); const height = $(navContainer).height() - $(window).height(); if ($(window).scrollTop() > height && activeNav) { $(window).scrollTop(height); } }); // Home card flip $(`.${homeCardSelector}`).click(function () { $(this).parent().find(`.${homeCardSelector}--front`).toggleClass(`${homeCardSelector}--front-active`); $(this).parent().find(`.${homeCardSelector}--back`).toggleClass(`${homeCardSelector}--back-active`); }); // Products card flip $(`.${cardSelector}`).click(function (e) { e.preventDefault(); $(this).parent().find(`.${cardSelector}--front`).toggleClass(`${cardSelector}--front-active`); $(this).parent().find(`.${cardSelector}--back`).toggleClass(`${cardSelector}--back-active`); }); //Sucursales let sucursales = []; let cleanLocalities; let localities; let cleanSubLocalities; //$.getJSON('Portals/_default/skins/xcillion/js/sucursales5.json') $.getJSON('https://littlecaesarsapi.ktbo.mx/web/stores') .done(data => { sucursales = data; sucursales.sort(); let statesArray =[]; //clean states list of 'sucursales' sucursales.map(sucursal =>{ if(statesArray.indexOf(sucursal.state) == -1){ statesArray.push(sucursal.state); } }); statesArray.sort(); //Fill combobox states var html = 'SELECCIONE UN ESTADO'; for(var i=0; i < statesArray.length; i++){ html += '' + statesArray[i]; } $('#search-city').html(html); }) .fail(error => console.error(`Error loading places: ${error}`)); // Button ask for location on map $(askButton).click(() => askForLocation()); // Ask for location event function askForLocation(traceRoute) { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(({ coords }) => { const userPosition = { lat: coords.latitude, lng: coords.longitude }; initMap(userPosition); const marker = new google.maps.Marker({ 'position': userPosition, map }); directionsDisplay = new google.maps.DirectionsRenderer(); directionsDisplay.setMap(map); marker.setMap(map); map.setCenter(new google.maps.LatLng(userPosition.lat, userPosition.lng)); map.setZoom(15); setupMarksCluster(sucursales, false); }); } } // Google Maps function initMap(item) { _lat = parseFloat(item.lat); _lng = parseFloat(item.lng); if(!map){ console.log('initMap'); var centerMap = new google.maps.LatLng(_lat, _lng) directionsService = new google.maps.DirectionsService(); directionsDisplay = new google.maps.DirectionsRenderer(); map = new google.maps.Map(document.getElementById(mapId), { zoom: 12, center: centerMap, mapTypeControl: false, zoomControl: true, scaleControl: true, streetViewControl: true, rotateControl: true, fullscreenControl: false }); infoWindow = new google.maps.InfoWindow({ map }); directionsDisplay.setMap(map); }else{ const marker = new google.maps.Marker({ 'position': userPosition, map }); directionsDisplay = new google.maps.DirectionsRenderer(); directionsDisplay.setMap(map); marker.setMap(map); map.setCenter(new google.maps.LatLng(_lat, _lng)); map.setZoom(15); } } $(document).on('change','#search-city', function(){ $('#sublocalitysel').html(''); $('#localitysel').html(''); var theCity = $(this).val(); fillLocality(theCity) }); //accordeon ubication selection var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } //Fill localy accordeon function fillLocality(city){ localities = sucursales.filter(item => item.state.indexOf(city) != -1); localities = sortJSON(localities, 'locality', 'asc'); cleanLocalities = localities.reduce((acc, curr) => { const total = acc.filter(item => item['locality'] === curr['locality']).length; if(total == 0) { acc.push(curr); } return acc }, []); cleanLocalities.sort(); const html = cleanLocalities.map((item) => ('' + item.locality + '')); $('#search-local').html(html); $('.accordeon .panel#search-local').css('display','block'); $('.panel').removeClass('active'); $('.acc-local').addClass('active'); } $(document).on('click','.locality', function(){ $('.accordeon .panel').css('display','none'); $('.locality').removeClass('active'); var locality = $(this).attr('id'); $('#localitysel').html(locality); $('#sublocalitysel').html(''); $(this).addClass('active'); fillsubLocality(locality); }); //Create list of 'sucursales' function fillsubLocality(locality){ $('#lc-map').addClass('is-active'); const subLocality = localities.filter(item => item['locality'].indexOf(locality) != -1); cleanSubLocalities = subLocality.reduce((acc, curr) => { const total = acc.filter(item => item['subLocality'] === curr['subLocality']).length; if(total == 0) { acc.push(curr); } return acc }, []); let html = subLocality.map((item) => (''+item.name+''+item.formateed+'EL HORARIO DE LAS TIENDAS ES DE 11 AM A 11 PM. PUEDE VARIAR POR SUCURSAL')); $('#search-sublocal').html(html); } $(document).on('click', '.sucursal', function(e){ e.preventDefault(); $('.sucursal').css('display','none'); const subCode = $(this).attr('id'); const selectSuc = cleanSubLocalities.filter(item => item.store_number.indexOf(subCode) != -1); $('#sublocalitysel').html(selectSuc[0].subLocality); initMap(selectSuc[0]); setupMarksCluster(selectSuc); }); function setupMarksCluster(data) { if (!data) return; const markers = data.map(item => { // Create marker _lat = parseFloat(item.lat); _lng = parseFloat(item.lng); console.log('create marker'); const marker = new google.maps.Marker({ position: { lat: _lat, lng:_lng }, icon: mapMarkerIcon }); // Set listener const customData = { code: item.code, name: item.name, address: { street: item.street, number: item.number, complete: item.formatted, city: item.locality, neighborhood: item.subLocality }, position: { lat: _lat, lng: _lng } }; marker.addListener('click', () => showMarkerInfo(customData)); return marker; }); // Create cluster const markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://s3.amazonaws.com/ktbots/m' }); } // Displays information from marker function showMarkerInfo(customData) { $(mapDialogDiv).addClass(mapDialogActive); // Fill the information from the div if (customData.hasOwnProperty('name')) { $(`.${mapDialog}heading`).text(customData.name); } if (customData.hasOwnProperty('address')) { if (customData.address.hasOwnProperty('complete')) { $(`.${mapDialog}address`).text(customData.address.complete); } } } // Center map on markaer function centerMapWithMarker(lat, lng) { console.log('lat:' + lat); map.setZoom(16); map.setCenter(new google.maps.LatLng(lat, lng)); } // Order json function sortJSON(data, key, orden) { return data.sort(function (a, b) { var x = a[key], y = b[key]; if (orden === 'asc') { return ((x < y) ? -1 : ((x > y) ? 1 : 0)); } if (orden === 'desc') { return ((x > y) ? -1 : ((x < y) ? 1 : 0)); } }); } });
' + item.locality + '
'+item.formateed+'
EL HORARIO DE LAS TIENDAS ES DE 11 AM A 11 PM. PUEDE VARIAR POR SUCURSAL