globalThis['zbThemes']['phaseIiCarPartsCoveHomeCategory'] = ( class phaseIiCarPartsCoveHomeCategory { routeObject; /** * variable used to store the location id */ locationId; /** * variable hold the subscription values */ subscriptionObject = []; /** * @type {HTMLElement | null} A reference to the navigation click element. * Used for listening to click events. */ navigationButton = null; /** * @type {() => void} A handler function for the navigation button. */ naviagtionHandler; /** * @type {HTMLElement | null} A reference to the navigation click element. * Used for listening to click events. */ navigationButton = null; /** * @type {() => void} A handler function for the navigation button. */ naviagtionHandler; /** * Variable can hold the image url for displaying the images. * @type {string} */ awsImageUrl; /** * @type {() => void} A handler function for the next button. */ nextButtonHandler; /** * @type {() => void} A handler function for the previous button. */ prevButtonHandler; /** * @type {() => void} A handler function for the resize event. */ resizeHandler; language = globalThis?.safelocalStorage?.getItem('language') || 'en'; /** * @type {Object} Variable used to hold JSON details. */ categorydetail = ''; /** * @type {Number} Variable used to hold unique section id. */ sectionId; service; data; /** * @type {Object} Variable used to hold default font style values. */ fontStyleValues = { bold: 'B', italic: 'I', underline: 'U' }; /** * Variable used to hold copy of JSON details. * @type {any} */ categorydetails; /** * Featured categories input variable with API call. * @type {any} */ featuredCategories = null; /** * Variable which is used to emit the page to navigate. * @type {EventEmitter} */ pageToNavigate = null; /** * Parent div element with the class "brandsImageWrap." * @type {HTMLElement} */ imageWrapper = null; /** * Child elements of the parent div with the class "brandsImageWrap." * @type {any} */ imageItems = null; /** * Number of child elements to be displayed. * @type {number} */ imageLength = 0; /** * Number of items to display per view. * @type {number} */ perView = 3; /** * Total scroll position. * @type {number} */ totalScroll = 0; /** * Current active element's index with the "active" class. * @type {number} */ activeIndex = 0; /** * Current active element. * @type {HTMLElement} */ activeCard = ''; /** * Variable used to slide to the next card. * @type {HTMLElement} */ nextCard; /** * Variable used to slide to the previous card. * @type {HTMLElement} */ previousCard = null; /** * Current window width. * @type {number} */ windowWidth = globalThis?.safeWindow?.innerWidth || 0; /** * Timer used for clearTimeout. * @type {any} */ timer = null; /** * To assign temporary per image in the view. * @type {boolean} */ tempPerView = false; /** * Variable used to get active cloned element index. * @type {number} */ cloneActiveIndex = 0; /** * Variable used to find if the next button is clicked or not. * @type {number} */ isNext = null; /** * @type {HTMLElement | null} A reference to the next button element. * Used for listening to click events. */ nextButton = null; /** * @type {HTMLElement | null} A reference to the previous button element. * Used for listening to click events. */ prevButton = null; /** * Identifier for the interval or timeout. * @type {number} */ intervalId = null; /** * Variable used to hold resulting HTML template. * @type {string} */ template = null; /** * Variable used to hold child variable. * @type {string} */ child = null; /** * constructor which sets up section id and section detail. * @param {sectionId : string, categorydetail : json} */ constructor(sectionId, sectionData, bundle) { this.sectionId = sectionId; this.categorydetail = sectionData; this.bundle = bundle; this.routeObject = this.bundle?.routerObject; this.awsImageUrl = this.bundle?.environment?.awsImageUrl || ''; this.service = this.bundle?.service || {}; this.data = { input: { locationId: this.service?.locationId || null, storeId: this.service?.storeId || null, } }; zbLoadCustomScripts(['zwe-font-resizer']); } /** * Handles the Phase II car parts cover for the home category. * Generates and returns an HTML string. * * @returns {Promise} A promise that resolves to an HTML string. */ async phaseIiCarPartsCoveHomeCategory(child) { this.locationId = this.bundle?.service?.locationId ?? 0; return await this.service?.getFeaturedCategories(this.data) .then((res) => { if(child){ this.child = child; } this.categorydetails = this.categorydetail; this.featuredCategories = res.featuredCategories.getCategories; try{ this.template =`

${this.featuredCategories && this.featuredCategories?.length && this.featuredCategories?.length > 0 ? `

${this.child.sharedThemeCommonHeading?.(this.categorydetails?.headingSettings) ?? ''}

${this.featuredCategories?.map((item , i) =>{ return `

${(this.categorydetails?.design === 'stright' && this.categorydetails?.imageBars) ? `

` : ''}

${item.categoryName ?? ''}

${this.categorydetails?.design === 'stright' && this.categorydetails?.imageBars ? `

` : ''}

` }).join('')}

` : `

${this.categorydetails?.isEditor ? `

"Currently you have not added any Featured Categories, if you wish to see this template please add Featured Categories"

` : ''}`}

` let html = this.template return html } catch (error){ return `` } }) .catch((err) => { return []; }); } /** * Initializes event handlers and elements for the category carousel. * * - Sets up resize, next, and previous button handlers. * - Attaches event listeners to the buttons. * - Ensures the visibility of elements and triggers the initial load. */ async zbOnInit(element) { this.subscriptionObject.push( this.bundle?.service?.changedLocation.subscribe(async(response) => { if (this.locationId !== response?.id && this.service?.locationId) { this.data = { input: { locationId: response?.id ?? this.bundle?.locationId, storeId: this.service?.storeId || null, } }; element.innerHTML = ``; const content = await this.phaseIiCarPartsCoveHomeCategory(); element.innerHTML = content ?? ''; if(this.featuredCategories?.length > 0){ this.initialMethod(element); } } })) if(this.featuredCategories?.length > 0){ this.initialMethod(element); } } /** * function initializes initial values */ initialMethod(element) { this.resizeHandler = this.debounce(() => this.onResize() ,200); this.nextButtonHandler = () => this.goToNextCard(true); this.prevButtonHandler = () => this.goToPreviousCard(false); globalThis?.safeWindow?.addEventListener('resize',this.resizeHandler); if (this.categorydetails) { this.nextButton = globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .CAC_FC_nextButton`); this.prevButton = globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .CAC_FC_prevButton`); this.nextButton?.addEventListener('click', this.nextButtonHandler); this.prevButton?.addEventListener('click', this.prevButtonHandler); const imageItems = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > *`); const inVisibleElement = globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper`); inVisibleElement.style.visibility = 'visible'; this.initialLoad(imageItems); } } /** * Initializes the image items and updates the card slider based on the category details. * @param { NodeListOf } imageItems - The collection of image elements to be processed. */ initialLoad(imageItems) { if (imageItems) { imageItems = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > *`); if (this.featuredCategories && this.featuredCategories?.length < imageItems?.length) { this.imageLength = imageItems?.length - this.perView; const startIndex = imageItems?.length - this.perView; const endIndex = imageItems?.length; for (let i = startIndex; i < endIndex; i++) { const currentElement = imageItems[i]; if (currentElement) { if (currentElement?.classList && currentElement?.classList?.contains('active')) this.cloneActiveIndex = i; currentElement.parentNode && currentElement.parentNode.removeChild(currentElement); currentElement.innerHTML = ''; } } if(imageItems?.length){ this.loadInitialImages(); } } } if (this.categorydetails && this.categorydetails.design && this.categorydetails.design === 'stright' && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`) && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)?.length > this.imageLength) { if (globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength] && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength + 1] && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength + 2]) { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength].classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength]?.classList.add('stright'); globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength + 1].classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength + 1]?.classList.add('stright'); globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength + 2].classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength + 2]?.classList.add('stright'); } } else { if (globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength] && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength + 1] && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength + 2]) { globalThis?.safeDocument?.querySelectorAll('.card-slider_card')[this.imageLength].classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength].classList?.remove('stright'); globalThis?.safeDocument?.querySelectorAll('.card-slider_card')[this.imageLength + 1].classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength + 1].classList?.remove('stright'); globalThis?.safeDocument?.querySelectorAll('.card-slider_card')[this.imageLength + 2].classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .card-slider_card`)[this.imageLength + 2].classList?.remove('stright'); } } this.afterInitialLoad(); } /** * This method is called to perform additional setup actions after the initial load. */ afterInitialLoad() { if (this.featuredCategories && this.featuredCategories?.length && this.featuredCategories?.length > 0) { this.imageWrapper = globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper`); this.imageItems = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > *`); this.imageLength = this?.imageItems?.length; this.activeCard = globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper .card-slider_card.active`); this.activeIndex = Array?.from(globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper .card-slider_card`))?.indexOf(this.activeCard); if (this.featuredCategories?.length === 2) { this.perView = 2; } else if (this.featuredCategories?.length === 1) { this.perView = 1; } this.onResize(); this.slideOptions(); } } /** * This function duplicates the first `perView` number of elements * and appends the cloned elements to the image wrapper. * It is used to create a seamless carousel experience. */ loadInitialImages() { for (let i = 0; i < this.perView; i++) { setTimeout(() => { const originalElement = this.imageItems[i]; let temp = originalElement?.querySelector(`#zb-section${this.sectionId} img`).id; const clonedElement = originalElement && (() => { const clone = originalElement?.cloneNode(true); const imgElement = clone?.querySelector(`img`); if (imgElement) { imgElement.id = temp + '-'+i; } return clone; })(); if (clonedElement) { // renderer && renderer.listen(clonedElement, 'click', () => { // navigateTo('products', { categoryId: featuredCategories[i]?.id }) // }); } if (originalElement) { clonedElement && clonedElement.classList && clonedElement.classList.remove('active'); this.imageWrapper && this.imageWrapper?.appendChild(clonedElement); zbSetOptimizedImageUrl(`#${clonedElement?.querySelector(`img`)?.id}` ,this.awsImageUrl + this.featuredCategories[i]?.categoryImageUrl , 600) }},0); } setTimeout(() => { this.naviagtionHandler = (element) => this.CAC_CR_PageToNavigate(element); this.navigationButton = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .imgContainer`); this.navigationButton.forEach(element => { element?.addEventListener('click',() => this.naviagtionHandler(element.classList[1])); }); if (this.cloneActiveIndex > 0 && this.windowWidth >= 600) { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.cloneActiveIndex].classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.cloneActiveIndex]?.classList?.add('active'); globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.cloneActiveIndex].classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.cloneActiveIndex]?.classList?.remove('inactive-left', 'inactive-right'); this.cloneActiveIndex = -1; this.getActiveCard(); }},0) } /** * This function is called when the window width changes. * It adjusts the carousel's layout and styles dynamically based on the window width * and the number of featured categories available. */ onResize() { if (this.featuredCategories && this.featuredCategories?.length && this.featuredCategories?.length > 0) { this.windowWidth = globalThis?.safeWindow?.innerWidth; this.imageItems = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > *`); if (this.windowWidth < 600 || this.featuredCategories?.length == 1) { this.perView = 1; this.imageItems && this.imageItems?.forEach(res => { res && res?.classList?.remove('active'); res && res?.classList?.remove('inactive-left'); res && res?.classList?.remove('inactive-right'); res && res?.classList?.remove('singleCategoryImage'); res && res?.classList?.add('respActive') }); if (this.featuredCategories?.length == 1) { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .arrow`) && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .arrow`)?.forEach(element => { element && element?.classList?.add('singleCategory'); }); if(this.perView){ this.imageWrapper && this.imageWrapper?.style?.setProperty('--per-view', perView?.toString()); } } else { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .arrow`) && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .arrow`).forEach(element => { element && element?.classList?.remove('singleCategory'); }); } this.cloneDeleteOnResize(); } else if (this.windowWidth < 850 && this.featuredCategories.length > 1) { this.perView = 2; if (this.featuredCategories?.length < 3) { this.imageItems && this.imageItems?.forEach(res => { if (res && res.classList) { res?.classList?.remove('active'); res?.classList?.remove('inactive-left'); res?.classList?.remove('respActive'); res?.classList?.remove('inactive-right'); res?.classList?.remove('respActive') res?.classList?.add('singleCategoryImage'); } }); globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .arrow`) && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .arrow`).forEach(element => { element && element?.classList && element?.classList?.add('singleCategory'); }); this.imageWrapper && this.imageWrapper?.style?.setProperty('--per-view', this.perView?.toString()); return } else { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .arrow`) && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .arrow`).forEach(element => { element && element?.classList && element?.classList?.remove('singleCategory'); }); this.imageItems && this.imageItems.forEach(res => { res && res?.classList && res?.classList?.remove('respActive'); res && res?.classList && res?.classList?.remove('singleCategoryImage'); }); } this.cloneDeleteOnResize(); this.imageItems[1] && this.imageItems[1]?.classList?.add('active'); } else if (this.featuredCategories?.length > 2) { this.perView = 3; this.imageItems?.forEach(res => { res && res?.classList && res?.classList?.remove('respActive'); res && res?.classList && res?.classList?.remove('singleCategoryImage'); }); this.cloneDeleteOnResize(); this.imageItems[1] && this.imageItems[1]?.classList?.add('active'); } else { this.imageItems.forEach(res => { if (res && res.classList) { res?.classList?.remove('active'); res?.classList?.remove('inactive-left'); res?.classList?.remove('respActive'); res?.classList?.remove('inactive-right'); res?.classList?.add('singleCategoryImage'); } }); this.perView = 2; globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .arrow`).forEach(element => { element && element?.classList && element?.classList?.add('singleCategory'); }); this.imageWrapper && this.imageWrapper?.style?.setProperty('--per-view', this.perView.toString()); return } this.loadInitialImages(); this.getActiveCard(); this.tempPerView = this.perView; this.imageWrapper && this.imageWrapper?.style?.setProperty('--per-view', this.perView?.toString()); const widthEl = (globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper > :first-child`)) && (globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper > :first-child`))?.offsetWidth + 24; this.imageWrapper.style.left = `-${this.totalScroll * widthEl}px`; this.imageWrapper.style.transition = '1s'; } } /** * This function adjusts the carousel by removing cloned elements * and resetting the carousel's scroll position and styles. * It is triggered during window resize or when `perView` changes. */ cloneDeleteOnResize() { this.totalScroll = 0; this.imageWrapper.style.transition = '0s'; this.imageWrapper.style.left = '0'; if (this.featuredCategories?.length < this.imageItems?.length) { this.imageLength = this.imageItems?.length - this.tempPerView; const startIndex = this.imageItems?.length - this.tempPerView; const endIndex = this.imageItems?.length; this.activeCard && this.activeCard?.classList && this.activeCard?.classList?.remove('active'); for (let i = startIndex; i < endIndex; i++) { const currentElement = this.imageItems[i]; if (currentElement) { currentElement.parentNode && currentElement.parentNode.removeChild(currentElement); currentElement.innerHTML = ''; } } } } /** * Changes the current active class to "active-out" and the card to be active with "active" and "active-in" class. * @param {HTMLElement} card - The card to be active. */ goToCard(card) { this.activeCard = globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper .card-slider_card.active`); if (this.activeCard) { this.activeCard?.classList && this.activeCard?.classList?.remove('active'); } if (card && this.windowWidth >= 600) { card?.classList && card?.classList.add('active'); this.getActiveCard(); } this.slideOptions(); } /** * Configures the slider to operate in either auto or manual mode based on editor controls. * - Automatically slides to the next card after a specified interval (auto mode). * - Disables navigation arrows when in auto mode. * - Ensures arrows are enabled in manual mode. */ slideOptions() { if (this.categorydetails?.sliderType !== 'manualSlider' && this.featuredCategories?.length > 2) { clearTimeout(this.timer); this.timer = setTimeout(() => { this.goToNextCard(); }, this.categorydetails?.slideSpeed * 1000); } if (this.categorydetails?.sliderType == 'autoSlider' && this.featuredCategories?.length > 2) { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} span.arrow`) && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} span.arrow`).forEach(element => { element?.classList && element?.classList?.add('disable'); }); } else if (this.featuredCategories?.length > 2) { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} span.arrow`) && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} span.arrow`).forEach(element => { element?.classList && element?.classList.remove('disable'); }); } } /** * Retrieves the active card as an HTMLElement and its index as a number. * @returns {HTMLElement | null} The active card element or null if not found. */ getActiveCard() { const activeCard = globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper .card-slider_card.active`); this.activeCard = activeCard; // Assign if `this` is correct. this.activeIndex = Array?.from(globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper .card-slider_card`)).indexOf(activeCard); this.imageItems = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > *`); if (this.activeCard?.previousElementSibling && this.windowWidth > 600) { this.activeCard?.previousElementSibling?.classList && this.activeCard?.previousElementSibling?.classList?.add('inactive-left'); this.activeCard?.previousElementSibling?.classList && this.activeCard?.previousElementSibling?.classList?.remove('inactive-right'); if ((this.activeCard.previousElementSibling)?.previousElementSibling) { (this.activeCard?.previousElementSibling)?.previousElementSibling && (this.activeCard?.previousElementSibling)?.previousElementSibling?.classList?.add('inactive-left'); (this.activeCard?.previousElementSibling)?.previousElementSibling && (this.activeCard?.previousElementSibling)?.previousElementSibling?.classList?.remove('inactive-right'); } else { const previous = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength + 1]; this.setInactive(previous); } } if (this.activeCard?.nextElementSibling && this.windowWidth > 600) { this.activeCard?.nextElementSibling?.classList && activeCard?.nextElementSibling?.classList.remove('inactive-left'); this.activeCard?.nextElementSibling?.classList && activeCard?.nextElementSibling?.classList.add('inactive-right'); if ((this.activeCard?.nextElementSibling)?.nextElementSibling) { (this.activeCard?.nextElementSibling)?.nextElementSibling?.classList && (this.activeCard?.nextElementSibling)?.nextElementSibling?.classList?.add('inactive-right'); (this.activeCard?.nextElementSibling)?.nextElementSibling?.classList && (this.activeCard?.nextElementSibling)?.nextElementSibling?.classList?.remove('inactive-left'); } else { const next = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength + 1]; this.setInactive(next); } } if (this.activeIndex == 1 && this.perView != 1 && this.windowWidth > 600) { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength]?.classList.remove('inactive-right') globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength]?.classList.add('inactive-left') globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength + 1]?.classList.add('active') } if (this.activeIndex == 1 && this.perView != 1 && this.windowWidth > 600 && this.isNext == false) { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength - 1]?.classList?.remove(`inactive-right`) globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength - 1]?.classList?.add(`inactive-left`) } if (this.activeIndex == this.imageLength + 1 && this.featuredCategories && this.featuredCategories?.length > 4 && this.perView != 1 && this.isNext == true) { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[3] && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[3]?.classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[3]?.classList?.remove('inactive-left') globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[3] && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[3]?.classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[3]?.classList?.add('inactive-right') } if (this.activeIndex == this.imageLength + 1 && this.featuredCategories && this.featuredCategories?.length > 2 && this.perView == 2 && this.isNext == true) { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[2] && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[2].classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[2]?.classList?.remove('inactive-left') globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[2] && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[2].classList && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[2]?.classList?.add('inactive-right') } if (this.activeIndex == this.imageLength + 1 && this.perView != 1 && this.windowWidth > 600) { globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[1] && globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[1]?.classList?.add('active') } return this.activeCard; } /** * Set inactive classes to the card-slider_card class * @param {any} card */ setInactive(card) { card?.previousElementSibling?.classList && card?.previousElementSibling?.classList?.add('inactive-left'); card?.previousElementSibling?.classList && card?.previousElementSibling?.classList?.remove('inactive-right'); if (card?.nextElementSibling) { card?.nextElementSibling?.classList && card?.nextElementSibling?.classList?.add('inactive-right'); card?.nextElementSibling?.classList && card?.nextElementSibling?.classList?.remove('inactive-left'); } card = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[1]; card?.previousElementSibling?.classList && card?.previousElementSibling?.classList?.add('inactive-left'); card?.previousElementSibling?.classList && card?.previousElementSibling?.classList?.remove('inactive-right'); if (card.nextElementSibling && this.perView == 3) { card?.nextElementSibling?.classList && card?.nextElementSibling?.classList?.add('inactive-right'); card?.nextElementSibling?.classList && card?.nextElementSibling?.classList?.remove('inactive-left'); } } /** * This function is used to slide from current slide to next slide */ goToNextCard(){ this.isNext = true; if (this.activeIndex >= 0 || this.windowWidth < 600) { const nextCard0 = this.activeCard?.nextElementSibling; if (this.nextCard && this.activeIndex < this.imageLength) { this.nextCard = nextCard0; } else if (this.activeIndex < this.imageLength + 1 && this.perView !== 1) { this.nextCard = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.activeIndex + 1]; } else { this.nextCard = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.activeIndex - this.imageLength + 1]; } ++this.totalScroll; if (this.totalScroll === this.imageLength + 1) { this.totalScroll = 1; this.imageWrapper.style.transition = '0s'; this.imageWrapper.style.left = '0'; } const widthEl = (globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper > :first-child`)) && (globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper > :first-child`)).offsetWidth + 24; if ((this.activeIndex == 2 || this.activeIndex == 1) && this.perView != 1) { const activeCard = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength + 1]; activeCard && activeCard?.classList && activeCard?.classList.remove('active') } if (this.imageWrapper) { this.imageWrapper.style.left = `-${this.totalScroll * widthEl}px`; this.imageWrapper.style.transition = '1s'; this.goToCard(this.nextCard); } } } /** * This function is used to slide from current slide to previous slide */ goToPreviousCard() { this.isNext = false; if (this.activeIndex >= 0 || this.windowWidth < 600) { const prevCard = this.activeCard?.previousElementSibling; if ((prevCard && this.activeIndex !== 1) || (this.perView === 1 && this.activeIndex === 1)) { this.previousCard = prevCard; } else if (this.perView === 1 && prevCard === null) { this.previousCard = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength - 1]; } else { this.previousCard = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength]; } --this.totalScroll; if (this.totalScroll < 0) { this.totalScroll = this.imageLength - 1; const widthEl = (globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper > :first-child`)) && (globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper > :first-child`)).offsetWidth + 24; if (this.imageWrapper) { this.imageWrapper.style.transition = '0s'; this.imageWrapper.style.left = `-${(this.totalScroll + 1) * widthEl}px`; } } const widthEl = (globalThis?.safeDocument?.querySelector(`#zb-section${this.sectionId} .categoryImageWrapper > :first-child`))?.offsetWidth + 24; if ((this.activeIndex == 1 || this.activeIndex == this.imageLength + 1) && this.perView != 1) { const activeCard = globalThis?.safeDocument?.querySelectorAll(`#zb-section${this.sectionId} .categoryImageWrapper > .card-slider_card`)[this.imageLength + 1]; activeCard && activeCard?.classList && activeCard?.classList?.remove('active') } if (this.imageWrapper) { this.imageWrapper.style.left = `-${(this.totalScroll) * widthEl}px`; this.imageWrapper.style.transition = '1s'; } this.goToCard(this.previousCard); } } CAC_CR_PageToNavigate(element) { // const queryParams = new URLSearchParams({categoryId :element})?.toString(); this.routeObject?.navigateToDetails('products', {categoryId :element}); } /** * Creates a debounced version of the provided function. * The function will only execute after the specified delay (wait) has elapsed * since the last time it was invoked. * * @param {Function} func - The function to debounce. * @param {number} wait - The delay in milliseconds. * @returns {Function} A debounced version of the input function. */ debounce(func, wait) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, wait); }; } /** * This function removes event listeners when the component or element is destroyed. */ zbOnDestroy(){ clearTimeout(this.timer); this.subscriptionObject.forEach(element => { element.unsubscribe(); }); this.navigationButton.forEach(element =>{ element?.removeEventListener('click', this.naviagtionHandler); }) globalThis?.safeWindow?.removeEventListener('resize',this.resizeHandler); this.nextButton?.removeEventListener('click', this.nextButtonHandler); this.prevButton?.removeEventListener('click', this.prevButtonHandler); } })

Shop By Category