// Create and configure script element const productDetailsEventScript = document.createElement('script'); productDetailsEventScript.defer = true; productDetailsEventScript.src = 'https://storage.alfinder.ai/production/assets/js/widget.js'; productDetailsEventScript.type = 'module'; // Get required IDs and data const productDetailsEventScriptCustomerId = window?.customer?.id || localStorage.getItem('alfinder_session_id'); const productDetailsEventScriptProductId = productViewd.id; const productDetailsEventScriptStoreId = window.store_uuid; const currency = window.store_currency_code; const language = window.store_lang; // Create and append product view component const productView = document.createElement('div'); productView.id = 'productViewContainer'; document.body.appendChild(productView); const productViewHtml = ` `; productView.innerHTML = productViewHtml; const isFptEnabled = localStorage.getItem('alfinder_fpt_enabled'); const fptTitle = localStorage.getItem('alfinder_fpt_title'); const fptTitleEn = localStorage.getItem('alfinder_fpt_title_en'); const isFitNeeds = window.location.hostname === 'fitneeds.sa'; if (isFptEnabled=='true') { // Use unified placement logic let targetDiv = isFitNeeds ? document.querySelector('.product-additions') : document.querySelector('.product-details') || document.querySelector('.product-info') || document.querySelector('.products-details'); // Create the frequently bought together container const frequentlyBoughtTogether = document.createElement("div"); frequentlyBoughtTogether.id = "frequentlyBoughtTogetherContainer"; frequentlyBoughtTogether.style.width = "100%"; frequentlyBoughtTogether.style.marginBlock = "20px"; frequentlyBoughtTogether.classList.add("container"); const frequentlyBoughtTogetherHtml = ``; frequentlyBoughtTogether.innerHTML = frequentlyBoughtTogetherHtml; // Insert after existing div or append to body if not found if (targetDiv) { targetDiv.insertAdjacentElement('afterend', frequentlyBoughtTogether); } } // Fetch and handle recommendations fetch(`https://widget.alfinder.ai/v1/stores/${productDetailsEventScriptStoreId}/recommendations/products/active?pageType=PRODUCT_DETAILS_PAGE&productId=${productDetailsEventScriptProductId}&storeType=zid&customerId=${productDetailsEventScriptCustomerId} `) .then((response) => response.json()) .then((data) => { const recommendationsData = data.results || []; if (recommendationsData.length === 0) { console.log('No recommendations found'); return; } // For specific store (fitneeds.sa), use .product-additions selector for all recommendations if (isFitNeeds) { // Check if FPT container exists const fptContainer = document.getElementById('frequentlyBoughtTogetherContainer'); let targetElement = null; if (fptContainer) { // Place recommendations after FPT container targetElement = fptContainer; } else { // Use .product-additions as fallback targetElement = document.querySelector('.product-additions'); } if (targetElement) { // Create a main container for all recommendations const mainRecommendationsContainer = document.createElement('div'); mainRecommendationsContainer.id = 'recommendationsFallbackContainer'; mainRecommendationsContainer.className = 'alfinder-recommendations-fallback-container'; mainRecommendationsContainer.style.width = '100%'; // Create individual recommendation components for each recommendation recommendationsData.forEach((recommendationWithProducts) => { const recommendation = recommendationWithProducts.recommendation; const products = recommendationWithProducts.products; if (!products || products.length === 0) { console.log( `Skipping recommendation ${recommendation.id} - no products`, ); return; } const recommendationContainer = document.createElement('div'); recommendationContainer.id = `recommendationsContainer-${recommendation.id}`; recommendationContainer.className = 'alfinder-recommendations-container'; recommendationContainer.style.width = '100%'; recommendationContainer.style.marginBlock = window.location.href.includes('forher.com.sa') ? "60px" : "20px"; recommendationContainer.classList.add('container'); const html = ``; recommendationContainer.innerHTML = html; mainRecommendationsContainer.appendChild(recommendationContainer); console.log( `Added recommendation ${recommendation.id} to container for fitneeds store`, ); }); // Place the main container if (fptContainer) { // Place after FPT container fptContainer.insertAdjacentElement('afterend', mainRecommendationsContainer); console.log('Placed recommendations after FPT container for fitneeds store'); } else if (targetElement) { // Place after .product-additions targetElement.insertAdjacentElement('afterend', mainRecommendationsContainer); console.log('Placed recommendations after .product-additions for fitneeds store'); } } else { console.log('Could not find target element (.product-additions) for fitneeds store'); } } else { // Original logic for other stores // Separate recommendations with and without elementSelector const recommendationsWithSelector = []; const recommendationsWithoutSelector = []; recommendationsData.forEach((recommendationWithProducts) => { const recommendation = recommendationWithProducts.recommendation; const products = recommendationWithProducts.products; if (!products || products.length === 0) { console.log( `Skipping recommendation ${recommendation.id} - no products`, ); return; } if ( recommendation.elementSelector && recommendation.elementSelector.length ) { recommendationsWithSelector.push(recommendationWithProducts); } else { recommendationsWithoutSelector.push( recommendationWithProducts, ); } }); // Place recommendations with specific selectors first recommendationsWithSelector.forEach( (recommendationWithProducts) => { const recommendation = recommendationWithProducts.recommendation; const products = recommendationWithProducts.products; const initialElement = document.querySelector( recommendation.elementSelector, ); let element = initialElement; if ( element && !['div', 'section'].includes(element.tagName.toLowerCase()) ) { while ( element.parentElement && !['div', 'section'].includes( element.tagName.toLowerCase(), ) ) { element = element.parentElement; } console.log( `Found parent div/section element for recommendation ${recommendation.id}:`, element, ); } if (element) { const recommendationsContainer = document.createElement('div'); recommendationsContainer.id = `recommendationsContainer-${recommendation.id}`; recommendationsContainer.className = 'alfinder-recommendations-container'; recommendationsContainer.style.width = '100%'; recommendationsContainer.style.marginBlock = window.location.href.includes('forher.com.sa') ? "60px" : "20px"; recommendationsContainer.classList.add('container'); const html = ``; recommendationsContainer.innerHTML = html; element.appendChild(recommendationsContainer); console.log( `Placed recommendation ${recommendation.id} using elementSelector: ${recommendation.elementSelector}`, ); } else { console.log( `Could not find element for selector: ${recommendation.elementSelector}, adding to fallback list`, ); recommendationsWithoutSelector.push( recommendationWithProducts, ); } }, ); // Place remaining recommendations together using fallback logic if (recommendationsWithoutSelector.length > 0) { console.log( `Placing ${recommendationsWithoutSelector.length} recommendations using fallback logic`, ); // Create a main container for all fallback recommendations const mainRecommendationsContainer = document.createElement('div'); mainRecommendationsContainer.id = 'recommendationsFallbackContainer'; mainRecommendationsContainer.className = 'alfinder-recommendations-fallback-container'; mainRecommendationsContainer.style.width = '100%'; // Create individual recommendation components for each recommendation recommendationsWithoutSelector.forEach( (recommendationWithProducts, index) => { const recommendation = recommendationWithProducts.recommendation; const recommendationContainer = document.createElement('div'); recommendationContainer.id = `recommendationsContainer-${recommendation.id}`; recommendationContainer.className = 'alfinder-recommendations-container'; recommendationContainer.style.width = '100%'; recommendationContainer.style.marginBlock = window.location.href.includes('forher.com.sa') ? "60px" : "20px"; recommendationContainer.classList.add('container'); const html = ``; recommendationContainer.innerHTML = html; mainRecommendationsContainer.appendChild( recommendationContainer, ); console.log( `Added recommendation ${recommendation.id} to fallback container`, ); }, ); // Find suitable placement for the main container let placed = false; // For home and cart pages, use footer fallback const footer = findMainFooter(); if (footer) { footer.insertAdjacentElement("beforebegin", mainRecommendationsContainer); placed = true; console.log( 'Placed fallback recommendations using footer fallback', ); } if (!placed) { console.log( 'Could not place fallback recommendations - no suitable container found', ); } } } }) .catch((error) => { console.error("Error fetching recommendations:", error); }); // Helper function to find the main footer function findMainFooter() { const footerSelectors = [ 'footer:not([class*="card-footer"]):not([class*="modal-footer"])', '[class="footer"]', '[class="site-footer"]', '[class="main-footer"]', '[class="page-footer"]', ]; const footers = document.querySelectorAll(footerSelectors.join(", ")); for (const f of footers) { if ( !f.className.includes("modal") && !f.closest('[class*="card"]') && !f.closest('[class*="modal"]') && isLikelyMainFooter(f) ) { return f; } } return null; } // Helper function to determine if an element is likely the main footer function isLikelyMainFooter(element) { const hasTypicalContent = element.querySelector( [ 'a[href*="contact"]', 'a[href*="about"]', 'a[href*="products"]', 'a[href*="products/"]', 'a[href*="product"]', 'a[href*="product/"]', '[class*="social"]', '[class*="copyright"]', "address", ].join(",") ); const rect = element.getBoundingClientRect(); const isNearBottom = rect.top > document.documentElement.clientHeight * 0.7; return hasTypicalContent || isNearBottom; }