globalThis['zbThemes']['phaseIiCommonSlider'] = ( class phaseIiCommonSlider { /** * Variable used to set zen-button */ zenButton; /** * Variable used to store dom element */ domElement; /** * Variable which is used to hold the active subscription. * @type {Subscription} */ subscriptionObj = []; /** * Variable used to store the api data */ copyOfDisplayData; /** * Variable used to hold scroll container reference * @type {ElementRef} */ scrollContainer; /** * Variable used to hold slider container reference * @type {ElementRef} */ sliderContainer; /** * Variable used to store inner html template */ template; /** * Variable used to store sanitize html content */ sanitizeContent; /** * Variable used to store api data */ apiData; /** * Variable used to store the style to replace the element in html template */ dummyJson; /** * Variable used to store html templte from assets */ styleTemplate; /** * Variable used to store cardDisplayStyle */ cardDisplayStyle; /** * Variable used to identify whether the pointer is over the slider container * @type {boolean} */ onHover; /** * variable used to store Card Width. * @type {number} */ cardWidth; /** * variable used to SliderContainerWidth. * @type {any} */ SliderContainerWidth; /** * variable used to Offset Value. * @type {any} */ slideOffset = 0; /** * variable used to View Card. * @type {any} */ viewedCards; /** * Variable used to set animator for withoutseconds * @type {boolean} */ startAnimation = false; id = 0; interval; /** * Variable used to set animator for withoutseconds * @type {boolean} */ slideRequired = false; /** * Variable that used to store the width of the scroll container * @type {any} */ scrollContainerWidth; /** * Variable that used to store the width of the slider objects * @type {any} */ arrayCardsLength; /** * Variable used to identify whether the slider requires the slider functions or not * @type {boolean} */ isArrows; /** * Variable used to specify whether the slider requires the arrow icons or not * @type {boolean} */ displayIcons; /** * Variable used to store how many cards can be displayed in the current screen * @type {any} */ responsiveWidthGap = 0; /** * Variable used to store the dynamic width value between the cards based on the screen size * @type {any} */ cardMarginWidth; /** * Variable used to store how many slide function have to be done in the "withSeconds" feature based on the screen * @type {any} */ noOfClicks = 0; /** * Variable used to monitor how many slide function had been done in the "withSeconds" feature based on the screen * @type {any} */ noOfClicksExecuted = 0; /** * Variable which is used to store the type of the slider * @type{Array} */ sliderType = [ { name: 'Left', className: 'image-slide-right', condition: -1 }, { name: 'Right', className: 'image-slide-left', condition: 1 }]; /** * These are the variable used to compate the ribbon position */ topLeftText = 'topLeft'; topRightText = 'topRight'; bottomLeftText = 'bottomLeft'; bottomRightText = 'bottomRight'; /** * Variable which is used to store the type of the direction to slide. * @type{Array} */ directionType = { left: 'Left', right: 'Right' }; /** * language to store selected language code. * @type {string} */ language = globalThis?.safelocalStorage?.getItem('language') ?? 'en'; /** * Variable used to get data from bundlebaseService */ zbService = zbBundle.service; /** * Variable can hold the image url for displaying the images. * @type {string} */ awsImage = zbBundle?.environment?.awsImageUrl; /** * Variable used to hold website settings details * @type {any} */ websiteSettings = this.zbService.WebsiteSettings; /** * Variable which is used to store event listener details for later removal. * @type {Array<{element: EventTarget, type: string, listener: EventListener}>} */ eventListeners = []; /** * Variable used as a reference for wrapperCard pet theme * @type {ElementRef} */ wrapperCardRef; /** * Variable used as a reference for outerSliderContainerRef pet theme * @type {ElementRef} */ outerSliderContainerRef; commonButton; /** * Variable used to hold the timeout value * @type {any} */ resizeTimeout; /** * constructor which sets up section id and section details . * @param {sectionId:string,details:json} */ constructor(sectionId, sectionDetails) { this.sectionId = sectionId; this.sectionDetails = sectionDetails; // console.log("sectionId", this.sectionId, sectionDetails); } async phaseIiCommonSlider(element) { if (this.sectionDetails.templateSettings?.buttonDetails?.buttonEnabled) { this.commonButton = `

${element?.sharedThemeCommonButton?.(this.sectionDetails.templateSettings?.buttonDetails)}

`; } else if(this.sectionDetails.buttonProperties?.buttonEnabled && this.sectionDetails.templateSettings?.sliderType === 'petslider') { this.commonButton = `

${element?.sharedThemeCommonButton?.(this.sectionDetails?.buttonProperties)}

`; }else{ this.commonButton = ''; } try { return ` ` } catch (error) { return '' } } /** * Method act as Angular life hooks cycle ngOnInit * @param {*} element get all the html element for this section */ zbOnInit(element) { this.domElement = element; if (!this.sectionDetails.isEditor) { this.domElement.addEventListener('click', () => this.onClick(event)); } if (this.sectionDetails?.templateSettings?.sliderType === 'slider') { this.isArrows = true; if (this.sectionDetails?.templateSettings?.navigationType === 'normal') { this.isArrows = true; } else if (this.sectionDetails?.templateSettings?.navigationType === 'scrollbar' || this.sectionDetails?.templateSettings?.isAutomatic === 'withoutSeconds' || this.sectionDetails?.templateSettings?.navigationType === 'none' ) { this.isArrows = false; } } else { this.isArrows = false; } this.checkLocation(); globalThis?.safeDocument?.addEventListener('mousemove', e => { this.sliderContainer && this.sliderContainer.contains(globalThis?.safeDocument?.elementFromPoint(e.clientX, e.clientY)) ? this.onHover = true : this.onHover = false; }, { passive: true }); if (typeof window !== 'undefined') { let intervalForRender = setInterval(() => { if (globalThis?.safeDocument?.getElementById(`setColor-${this.sectionId}`)) { this.onResize(true); //navigation for pet slider icons if (this.sectionDetails?.templateSettings?.sliderType === 'petslider') { this.showNextAndPreviousIcons(); this.petSliderNavigation(); } clearInterval(intervalForRender); } }, 300); } } /** * Method used for navigation in html template * @param {MouseEvent} event */ onClick(event) { let target = event.target; const srcElement = target.closest('[routerlink]'); if (srcElement) { const routerlink = srcElement.getAttribute('routerlink'); if (!!routerlink) { let parse = JSON.parse(routerlink); zbBundle.routerObject.navigateToDetails(parse.page, parse.queryParam) } } } /** * Method used to listen location changes */ checkLocation() { // console.log('Check location'); let locationId = -1; this.subscriptionObj.push(this.zbService.changedLocation.subscribe(res => { if (res && res.id && (locationId !== res.id)) { locationId = res.id; this.copyOfDisplayData = this.apiData = []; let noProductText = '' switch (this.sectionDetails.templateSettings?.displayProduct) { case 'featuredCategory': { this.zbService.getFeaturedCategories({ input: { locationId: res.id, langCode: this.language, storeId: this.zbService.storeId } }).then((response) => { this.copyOfDisplayData = { data: response?.featuredCategories?.getCategories }; if (this.copyOfDisplayData?.data?.length > 0) { if (this.sectionDetails?.templateSettings?.cardDisplayStyle != 'petSlider') { this.setApiData(); if (this.styleTemplate) { this.apiDataReplacement(); } else { this.getTemplate(this.sectionDetails?.templateSettings?.cardDisplayStyle); } this.setIntervalOnInit(); } else { // console.log('Pet slider case'); this.renderHtmlContent(); } } else { // console.log('no product else'); let noTextContent = [`"Currently you have not added any featured category,`, ` if you wish to see this template please add featured category"`] this.noProductTemplate(noTextContent); } }); break; } case 'getBrands': { this.subscriptionObj.push(this.zbService.getAllBrands({ input: { storeId: this.zbService.storeId, limit: 10, langCode: this.language } }).subscribe((response) => { this.copyOfDisplayData = { data: response?.storeFrontBrand?.result?.rows }; if (this.copyOfDisplayData?.data?.length > 0) { this.setApiData(); if (this.styleTemplate) { this.apiDataReplacement(); } else { this.getTemplate(this.sectionDetails?.templateSettings?.cardDisplayStyle); } this.setIntervalOnInit(); } else { // console.log('no product else'); let noTextContent = [`"Currently you have not added any brands,`, ` if you wish to see this template please add brands"`] this.noProductTemplate(noTextContent); } })); break; } case 'featuredProducts': { this.zbService.getAllFeaturedProducts({ input: { offset: 0, limit: 10, isFeatured: true, langCode: this.language, storeId: this.zbService.storeId, locationId: res.id, } }).then(async (response) => { this.copyOfDisplayData = { data: response?.getFeaturedProducts?.getProducts } if (this.copyOfDisplayData?.data?.length > 0) { this.setApiData(); if (this.sectionDetails?.templateSettings?.cardDisplayStyle === 'metalTheme') { this.apiData = await Promise.all( this.apiData.map(async ({ imageUrl, optimizeImageUrl, ...rest }) => { const bgImage = await this.checkImageUrls([ optimizeImageUrl, imageUrl, './assets/image-not-available.png' ]); return { bgImage, // bgImage will be a string here ...rest }; }) ); } if (this.styleTemplate) { this.apiDataReplacement(); } else { this.getTemplate(this.sectionDetails?.templateSettings?.cardDisplayStyle); } this.setIntervalOnInit(); } else { // console.log('no product else'); let noTextContent = [`"Currently you have not added any featured products,`, ` if you wish to see this template please add featured products"`] this.noProductTemplate(noTextContent); } }); break; } case 'specificCategory': { this.zbService.getProductsByCategory({ input: { offset: 0, limit: 10, langCode: this.language, storeId: this.zbService.storeId, locationId: res.id, categoryId: this.sectionDetails?.templateSettings?.displaySpecificProduct?.id } }).then((response) => { if (this.sectionDetails?.templateSettings?.displaySpecificProduct?.id) { this.copyOfDisplayData = { data: response?.getCategoryProducts?.products } if (this.copyOfDisplayData?.data?.length > 0) { this.setApiData(); if (this.styleTemplate) { this.apiDataReplacement(); } else { this.getTemplate(this.sectionDetails?.templateSettings?.cardDisplayStyle); } this.setIntervalOnInit(); } else { // console.log('no product else'); let noTextContent = [`"Currently you have not added any products to a Specific Product category,`, ` if you wish to see this template please add products"`] this.noProductTemplate(noTextContent); } } else { // console.log('no product else'); let noTextContent = [`"Currently you have not added any products to a Specific Product category,`, ` if you wish to see this template please add products"`] this.noProductTemplate(noTextContent); } }); break; } case 'topProducts': { this.zbService.getTopRatedProducts({ input: { langCode: this.language, storeId: this.zbService.storeId, locationId: res.id } }).then((response) => { this.copyOfDisplayData = { data: response?.getTopRatedProducts?.getProducts } // static limit for topRatedProducts if (this.copyOfDisplayData?.data?.length > 10) { this.copyOfDisplayData.data.splice(10); } if (this.copyOfDisplayData?.data?.length > 0) { this.setApiData(); if (this.styleTemplate) { this.apiDataReplacement(); } else { this.getTemplate(this.sectionDetails?.templateSettings?.cardDisplayStyle); } this.setIntervalOnInit(); } else { // console.log('no product else'); let noTextContent = [`"Currently you don't have any Top Rated Products,`, ` If you wish to see this template, please add the maximum rating to some of the products."`] this.noProductTemplate(noTextContent); } }); break; } } } })); } /** * Method used to display no product text */ noProductTemplate(textContent) { if (this.sectionDetails.isEditor) { this.domElement.innerHTML = `

${textContent[0]} ${textContent[1]}

`} else { this.domElement.innerHTML = '' } } /** * Methos used to find the valid url * @param urls to get the all image url to find * @returns String of the valid url */ checkImageUrls(urls) { return new Promise((resolve) => { let index = 0; function checkUrl() { if (typeof window === 'undefined') resolve(urls[urls.length - 1]?.replace(/\.\w+$/, '.webp')); const img = new Image(); img.src = urls[index]; img.onload = () => resolve(urls[index]); // Resolves if the image loads successfully img.onerror = () => { index++; if (index < urls.length) { checkUrl(); // Move to the next URL if there's an error } else { resolve(urls[urls.length - 1]); // Fallback to the last URL if all fail } }; } checkUrl(); }); } /** * Function with set interval to set the responsiveness initially. */ setIntervalOnInit() { if (typeof window !== 'undefined') { let intervalId = setInterval(() => { this.scrollContainer = globalThis?.safeDocument?.getElementById('scrollContainer' + this.sectionId); this.sliderContainer = globalThis?.safeDocument?.getElementById('sliderContainer' + this.sectionId); if (this.scrollContainer) { this.onResize(true); clearInterval(intervalId); this.setJson(); intervalId = null } }, 200); } } /** * Method which is used to resize image based on screen size. * @param isInitial which indicates inital screen or not */ onResize(isInitial) { this.scrollContainer = globalThis?.safeDocument?.getElementById('scrollContainer' + this.sectionId); this.sliderContainer = globalThis?.safeDocument?.getElementById('sliderContainer' + this.sectionId); if (this.sectionDetails && this.copyOfDisplayData?.data?.length > 1 && this.sectionDetails?.templateSettings?.isAutomatic && this.sectionDetails?.templateSettings?.timeInterval) { this.repeat(isInitial ? this.sectionDetails && this.sectionDetails?.templateSettings?.timeInterval * 1000 : null, true); } else { this.onSelectionChange(); } if (this.sectionDetails?.templateSettings?.sliderType === 'petslider') { this.initializeValue(); } this.scrollWithoutSeconds(); this.iconsDisplay(); } /** * Method which is used to move to next image on arrow click. * @param type To define the direction of the image to change. * @param isInitial which is used to know whether the call is inital one or not. */ onSelectionChange(type, isInitial) { if (type) { for (let item of this.sliderType) { if (item && item.name === type) { if (!isInitial) { const contentArray = this.copyOfDisplayData && this.copyOfDisplayData.data && this.copyOfDisplayData?.data?.length && this.copyOfDisplayData.data.splice((type === this.directionType.left) ? (this.copyOfDisplayData?.data?.length - 1) : 0, 1); if (type === this.directionType.left) { this.copyOfDisplayData && this.copyOfDisplayData.data && this.copyOfDisplayData?.data?.length && this.copyOfDisplayData.data.splice(0, 0, contentArray && contentArray.length && contentArray[0]); } else { this.copyOfDisplayData && this.copyOfDisplayData.data && this.copyOfDisplayData?.data?.length && this.copyOfDisplayData.data.push(contentArray && contentArray.length && contentArray[0]); } } break; } } } } /** * Method used to get the screen width and cardwidth ,then calculate how many card to load the page. */ initializeValue() { const screenSize = globalThis?.safeWindow?.innerWidth this.wrapperCardRef = screenSize > 604 ? 150 : 125; this.outerSliderContainerRef = globalThis?.safeDocument?.documentElement.clientWidth - 44; if (this.wrapperCardRef && this.outerSliderContainerRef) { this.cardWidth = this.wrapperCardRef; this.viewedCards = Math.floor(this.outerSliderContainerRef / this.cardWidth); this.SliderContainerWidth = this.viewedCards <= this.copyOfDisplayData?.data?.length ? this.viewedCards * this.cardWidth : this.copyOfDisplayData?.data?.length * this.cardWidth; //set the width for the slider container dynamically this.domElement.querySelector('.pet-slider-container').style.width = this.SliderContainerWidth + 'px'; } } /** * Method used to move to next image on arrow click. */ showNextAndPreviousIcons() { if (this.sectionDetails?.templateSettings?.sliderType === 'petslider') { const showNextCard = this.domElement.querySelector(`#showNextCard${this.sectionId}`); const showPreviousCard = this.domElement.querySelector(`#showPreviousCard${this.sectionId}`); const updateNavigationStyles = () => { if(this.copyOfDisplayData?.data?.length - this.viewedCards > 0) { showPreviousCard.classList.remove('pet-slider-btn-hide'); showNextCard.classList.remove('pet-slider-btn-hide'); if (showPreviousCard) { if (this.slideOffset === 0) { showPreviousCard.classList.add('pet-sliderEnd'); } else { showPreviousCard.classList.remove('pet-sliderEnd'); } } if (showNextCard) { const maxOffset = -(this.copyOfDisplayData?.data?.length - this.viewedCards) * this.cardWidth; if (this.slideOffset <= maxOffset) { showNextCard.classList.add('pet-sliderEnd'); } else { showNextCard.classList.remove('pet-sliderEnd'); } } } else{ showPreviousCard.classList.add('pet-slider-btn-hide'); showNextCard.classList.add('pet-slider-btn-hide'); } }; if (showNextCard) { showNextCard.addEventListener('click', () => { if (this.copyOfDisplayData && this.copyOfDisplayData.data) { const maxOffset = -(this.copyOfDisplayData.data.length - this.viewedCards) * this.cardWidth; if (this.slideOffset > maxOffset) { this.slideOffset -= this.cardWidth; this.domElement.querySelector('.pet-slider').style.transform = `translateX(${this.slideOffset}px)`; } } updateNavigationStyles(); }); } if (showPreviousCard) { showPreviousCard.addEventListener('click', () => { if (this.slideOffset < 0) { this.slideOffset += this.cardWidth; this.domElement.querySelector('.pet-slider').style.transform = `translateX(${this.slideOffset}px)`; } updateNavigationStyles(); }); } // Initialize styles on load updateNavigationStyles(); } } /** * Method used to navigate. * @param data holds the category data. */ petSliderNavigation() { const featuredCategory = this.copyOfDisplayData?.data; featuredCategory.forEach((item, i) => { const categoryelement = globalThis?.safeDocument?.querySelector(`#sliderNavigate${this.sectionId}${i}`); if (categoryelement) { const navigateListener = this.navigateCategory.bind(this, item); categoryelement.addEventListener('click', navigateListener); this.eventListeners.push({ document, type: 'click', navigateListener }); } }) } /** * Method used to navigate to products. */ navigateCategory(data) { if (data && data.id) { zbBundle.routerObject?.navigateToDetails('products', { categoryId: data?.id }); } else { zbBundle.routerObject?.navigateToDetails('products'); } }; /** * Method used to set animation. */ scrollWithoutSeconds() { if (globalThis?.safeWindow?.innerWidth <= globalThis?.safeDocument?.getElementById('scroll-withoutSeconds' + this.sectionId)?.offsetWidth) { this.slideRequired = true; } else { this.slideRequired = false; } return '' } /** * Function for specifying whether the arrow icons are needed or not. * And to calculate the width between card objects dynamically. */ iconsDisplay() { if (this.scrollContainer) { this.scrollContainerWidth = this.scrollContainer.offsetWidth; let sliderArray = globalThis?.safeDocument?.getElementById(`scrollFunction_${this.sectionId}`); if (sliderArray) { const cardRef = globalThis?.safeDocument?.querySelector(`.sliderSection${this.sectionId} .singleCard`); this.arrayCardsLength = cardRef?.clientWidth * this.copyOfDisplayData?.data?.length; if (this.scrollContainerWidth >= this.arrayCardsLength) { this.repeat(0, false); this.displayIcons = false } else { this.displayIcons = true } const noOfCards = this.scrollContainerWidth / cardRef?.clientWidth; this.responsiveWidthGap = Math.floor(noOfCards); if (this.responsiveWidthGap === 0) { this.responsiveWidthGap = 1; } const gapWidth = this.scrollContainerWidth - cardRef?.clientWidth * this.responsiveWidthGap; this.cardMarginWidth = gapWidth / (this.responsiveWidthGap + 1); } } if (this.sectionDetails?.templateSettings?.cardDisplayStyle != this.cardDisplayStyle && this.cardDisplayStyle != undefined) { this.getTemplate(this.sectionDetails?.templateSettings?.cardDisplayStyle); } else { this.setJson(); } } changeArrayData() { this.copyOfDisplayData.data = this.copyOfDisplayData.data.slice(0, this.sectionDetails?.templateSettings?.dataDisplayCount); } /** * Method which is used for the auto change of the image. * @param time To define the time of the image to change. */ repeat(time, sliderShow) { this.noOfClicks = this.copyOfDisplayData?.data?.length / this.responsiveWidthGap; clearTimeout(this.resizeTimeout); if (sliderShow && this.copyOfDisplayData?.data?.length > 1) { this.resizeTimeout = setTimeout(() => { if (!this.onHover) this.onSelectionChange(this.directionType.right, time ? true : false); this.repeat(false, sliderShow); }, (time ? time : (this.sectionDetails && this.sectionDetails?.templateSettings?.timeInterval * 1000))); } clearTimeout(this.resizeTimeout); if (sliderShow && this.copyOfDisplayData?.data?.length > 1) { this.resizeTimeout = setTimeout(() => { if (!this.onHover) this.scrollRight(); this.noOfClicksExecuted += 1; const scroll = globalThis?.safeDocument?.getElementById('scrollFunction_' + this.sectionId); if (this.noOfClicksExecuted >= this.noOfClicks && !this.onHover) { this.scrollContainer.scrollLeft = 0; scroll.scrollLeft = 0; this.noOfClicksExecuted = 0; } this.repeat(false, sliderShow); }, (time ? time : (this.sectionDetails && this.sectionDetails?.templateSettings?.timeInterval * 1000))); } } /** * Method used to get template from html file */ getTemplate(template) { this.styleTemplate = ''; this.cardDisplayStyle = template; fetch(`../zb-bundles/html-templates/slider/${template}.html`) .then(response => { if (!response.ok) { throw new Error(`Failed to fetch:`); } return response.text(); }) .then(data => { this.styleTemplate = data; this.apiDataReplacement(); }) .catch(error => { let template = `

No Template found

` this.template = template; this.sanitizeContent = this.sectionDetails?.isEditor ? template : ''; this.domElement.innerHTML = this.sanitizeContent; }); } /** * Method used to set api data */ setApiData() { if (this.copyOfDisplayData?.data?.length && this.sectionDetails?.templateSettings?.dataDisplayCount) { this.changeArrayData(); } if ((this.sectionDetails?.templateSettings && !this.sectionDetails?.templateSettings?.timeInterval) || this.copyOfDisplayData?.data?.length <= 1) { this.repeat(0, false); } switch (this.sectionDetails.templateSettings?.displayProduct) { case 'getBrands': { this.apiData = this.copyOfDisplayData?.data.map(({ id, brandName, imageUrl, ribbon, ...rest }, index) => ({ id: id, ...rest, price: '', ribbonBottom: '', name: brandName, imageUrl: this.awsImage + imageUrl, optimizeImageUrl: zbGetOptimizedImageUrl(this.awsImage + imageUrl, IMAGE_EXTENSION.WEPB_FORMAT), ribbon: ribbon ? this.ribbonSetUp(ribbon, index) : '', url: `{ "page": "products", "queryParam": { "brandId": ${id}, "categoryId": 0 } }`, })); break; }; case 'featuredCategory': { this.apiData = this.copyOfDisplayData?.data.map(({ id, categoryName, categoryImageUrl, count, ...rest }, index) => ({ id: id, price: '', ribbon: '', product: '', ribbonBottom: '', name: categoryName, category: 'category', even: index % 2 === 0 ? 'even' : 'odd', imageUrl: this.awsImage + categoryImageUrl, optimizeImageUrl: zbGetOptimizedImageUrl(this.awsImage + categoryImageUrl, IMAGE_EXTENSION.WEPB_FORMAT), url: `{ "page": "products", "queryParam": { "categoryId": ${id} } }`, count: count + (count === 0 || count === 1 ? translationObj.COMMON_SLIDER.PRODUCT ?? ' product' : translationObj.COMMON_SLIDER.PRODUCTS ?? ' products'), countItem: count + (count === 0 || count === 1 ? translationObj.COMMON_SLIDER.CATEGORY_ITEM ?? ' item' : translationObj.COMMON_SLIDER.CATEGORY_ITEMS ?? ' items'), ...rest })); break; }; case 'topProducts': case 'featuredProducts': case 'specificCategory': { this.apiData = this.copyOfDisplayData?.data.map(({ id, featuredImage, price, ribbon, badges, ratings, multiLocationVariantStocks, variantCombinationDetails, ...rest }, index) => ({ id: id, product: 'product', ratings: this.checkStarRating(ratings), imageUrl: this.awsImage + featuredImage, optimizeImageUrl: zbGetOptimizedImageUrl(this.awsImage + featuredImage, IMAGE_EXTENSION.WEPB_FORMAT), stockText: multiLocationVariantStocks && multiLocationVariantStocks.length && (multiLocationVariantStocks[0].stock > 0 || multiLocationVariantStocks[0].stock === -1) ? this.sectionDetails?.templateSettings?.stockAvailableText : this.sectionDetails?.templateSettings?.lowStockAvailableText ?? '', url: `{ "page": "productdetails", "queryParam": { "productId": ${id} }}`, price: price ? this.websiteSettings?.currency.currencySymbol + parseFloat(price).toFixed(2) : '', ribbon: badges && badges?.length ? this.badge(badges) : (ribbon?.productRibbons?.overlayRibbonPosition === this.topLeftText || ribbon?.productRibbons?.overlayRibbonPosition === this.topRightText) && !ribbon?.productRibbons?.isOverlayHeader ? this.ribbonSetUp(ribbon, index) : '', ribbonBottom: badges && badges?.length ? '' : (ribbon?.productRibbons?.overlayRibbonPosition === this.bottomLeftText || ribbon?.productRibbons?.overlayRibbonPosition === this.bottomRightText) && !ribbon?.productRibbons?.isOverlayHeader ? this.ribbonSetUp(ribbon, index) : '', varientPrice: variantCombinationDetails && variantCombinationDetails?.length ? variantCombinationDetails[0]?.costComparePrice ? this.websiteSettings?.currency.currencySymbol + parseFloat(variantCombinationDetails[0]?.costComparePrice).toFixed(2) : '' : '', offer: variantCombinationDetails && variantCombinationDetails?.length ? variantCombinationDetails[0]?.costComparePrice ? this.offerPrice(price, variantCombinationDetails[0]?.costComparePrice) : '' : '', ...rest })); break; }; } } /** * Method used to set api data in html template */ apiDataReplacement() { this.template = ''; let [htmlElement, styleTag] = this.styleTemplate.split(/( ` this.domElement.innerHTML = sliderContent + dynamicStyle; if (this.sectionDetails?.templateSettings?.displayProduct === 'featuredProducts' && (this.sectionDetails?.templateSettings?.sliderType === 'slider' ? this.sectionDetails?.templateSettings?.isAutomatic !== 'withoutSeconds' : true)) { this.zbService.getOtherAngleImage(this.copyOfDisplayData?.data, this.domElement, this.sectionDetails?.templateSettings, true); } const scrollRight = globalThis?.safeDocument?.querySelector(`#scrollRight${this.sectionId}`); const scrollSlideLeft = globalThis?.safeDocument?.querySelector(`#scrollSlideLeft${this.sectionId}`); if (scrollSlideLeft && scrollRight) { scrollRight.addEventListener('click', this.scrollRight.bind(this)); scrollSlideLeft.addEventListener('click', this.scrollSlideLeft.bind(this)); } } /** * Method used to get badge design */ badge(badge) { let badgeDetails = badge[0]; const badgeDiv = globalThis?.safeDocument?.createElement('div'); badgeDiv.classList.add('badgeClass', 'badge' + badgeDetails.badgePosition); if (badgeDetails && badgeDetails.isTextTemplate && badgeDetails.template) { badgeDiv.innerHTML = badgeDetails.template; badgeDiv.querySelector("p").textContent = badgeDetails?.badgeName; } else if (badgeDetails && (badgeDetails.isImageTemplate || badgeDetails.isImageUpload) && badgeDetails.imageUrl) { const imgElement = globalThis?.safeDocument?.createElement('img'); imgElement.alt = 'image template'; if (badgeDetails.class && badgeDetails.class.badgeUnitType && badgeDetails.class.badgeUnitType == 'percentage') { imgElement.style.height = `${badgeDetails.height ? badgeDetails.height : 30}%`; imgElement.style.width = `${badgeDetails.width ? badgeDetails.width : 30}%`; } else { imgElement.style.height = `${badgeDetails.height ? badgeDetails.height : 70}px`; imgElement.style.width = `${badgeDetails.width ? badgeDetails.width : 70}px`; } imgElement.style.opacity = `${badgeDetails.transparancy ? badgeDetails.transparancy : 1}`; imgElement.src = this.awsImage + badgeDetails.imageUrl; imgElement.id = 'default-template-item-id' + badgeDetails.id; badgeDiv.appendChild(imgElement); } if (badgeDetails && badgeDetails.templateRawCss) { const styleElement = globalThis?.safeDocument?.createElement('style'); styleElement.id = 'default-template-item-id' + badgeDetails.id; styleElement.appendChild(globalThis?.safeDocument?.createTextNode(badgeDetails.templateRawCss)); badgeDiv.appendChild(styleElement); } return badgeDiv.outerHTML; } /** * Method used to set html template * @param ribbon holds information about ribbon. * @param productIndex holds product index value. * @returns true */ ribbonSetUp(ribbon, productIndex) { const ribbonDiv = Object.assign(globalThis?.safeDocument?.createElement('div'), { className: 'active-ribbon' }); if (ribbon?.productRibbons?.overlayRibbonPosition === this.bottomLeftText || ribbon?.productRibbons?.overlayRibbonPosition === this.bottomRightText) { ribbonDiv.classList.add(ribbon.className.ribbonName + ribbon.productRibbons.overlayRibbonPosition); } if (ribbon.className.ribbonName == 'foldable' || ribbon.className.ribbonName == 'v-shapeRibbon') { ribbonDiv.style.setProperty('--new-ribbon-color', ribbon.ribbonColor); } ribbonDiv.innerHTML = this.zbService.sharedService.ribbonSetUp(ribbon, productIndex).changingThisBreaksApplicationSecurity; return ribbonDiv.outerHTML; } /** * Method which used to check rating of products. */ checkStarRating(rating) { let starRating = ''; if (rating) { for (let i = 0; i < 5; i++) { if (i >= rating) { starRating = starRating.concat(''); } else { let starDesign = this.zbService.sharedService.checkStarRating(i, rating) ? 'star_rate' : 'star_half'; starRating = starRating.concat(``); } } } else { return starRating.concat('').repeat(5); } return starRating; } /** * Method used to set offerPrice string */ offerPrice(price, compareprice) { let val = (((compareprice - price) / compareprice) * 100).toFixed(0) + `% ${translationObj.COMMON_SLIDER.OFF ?? 'OFF'}`; return val; } /** * Method used to move category/product list to left side. */ scrollSlideLeft() { const scroll = globalThis?.safeDocument?.getElementById(`scrollFunction_${this.sectionId}`); this.scrollContainer = globalThis?.safeDocument?.getElementById('scrollContainer' + this.sectionId); if (this.scrollContainer && scroll) { if (this.isArrows) { scroll.scrollLeft -= (scroll.offsetWidth ? (scroll.offsetWidth) : 450); } else if (!this.isArrows) { this.scrollContainer.scrollLeft -= (this.scrollContainer?.offsetWidth ? (this.scrollContainer?.offsetWidth) : 450); } } } /** * Method used to move category/product list to right side. */ scrollRight() { const scroll = globalThis?.safeDocument?.getElementById(`scrollFunction_${this.sectionId}`); this.scrollContainer = globalThis?.safeDocument?.getElementById('scrollContainer' + this.sectionId); if (this.scrollContainer && scroll) { if (this.isArrows) { scroll.scrollLeft += (scroll.offsetWidth ? (scroll.offsetWidth) : 450); } else if (!this.isArrows) { this.scrollContainer.scrollLeft += (this.scrollContainer?.offsetWidth ? (this.scrollContainer?.offsetWidth) : 450); } } } /** * Method which is used to cleans up resources. */ zbOnDestroy() { clearTimeout(this.resizeTimeout); this.subscriptionObj.forEach(element => { element.unsubscribe(); }); if (this.eventListeners?.length) { this.eventListeners.forEach(({ element, type, listener }) => { element?.removeEventListener(type, listener); }); this.eventListeners = []; } } } )

error No Template found

No Template found