From 59d05d599efa4d46ca5c60a49365c2777e6c4a0e Mon Sep 17 00:00:00 2001 From: andreishichko Date: Thu, 3 Oct 2024 13:02:26 +0300 Subject: [PATCH] MAGE-7-recommend-js-loader --- view/frontend/web/js/recommend.js | 368 +++++++++++++++--------------- 1 file changed, 189 insertions(+), 179 deletions(-) diff --git a/view/frontend/web/js/recommend.js b/view/frontend/web/js/recommend.js index 7f87b23dd..ddebb47a7 100644 --- a/view/frontend/web/js/recommend.js +++ b/view/frontend/web/js/recommend.js @@ -8,35 +8,123 @@ define([ ], function ($, algoliaBundle, recommend, recommendJs, recommendProductsHtml) { 'use strict'; - if (typeof algoliaConfig === 'undefined') { - return; + let exec = () => {} + + function checkerConfigLoading() { + if (typeof algoliaConfig === 'undefined') + setTimeout(checkerConfigLoading, '500') + else + exec() } + checkerConfigLoading() + return function (config, element) { - $(function ($) { - this.defaultIndexName = algoliaConfig.indexName + '_products'; - const appId = algoliaConfig.applicationId; - const apiKey = algoliaConfig.apiKey; - const recommendClient = recommend(appId, apiKey); - const indexName = this.defaultIndexName; - const objectIDs = config.objectIDs; - if ( - $('body').hasClass('catalog-product-view') || - $('body').hasClass('checkout-cart-index') - ) { - // --- Add the current product objectID here --- + + exec = function () { + $(function ($) { + this.defaultIndexName = algoliaConfig.indexName + '_products'; + const appId = algoliaConfig.applicationId; + const apiKey = algoliaConfig.apiKey; + const recommendClient = recommend(appId, apiKey); + const indexName = this.defaultIndexName; + const objectIDs = config.objectIDs; if ( - (algoliaConfig.recommend.enabledFBT && + $('body').hasClass('catalog-product-view') || + $('body').hasClass('checkout-cart-index') + ) { + // --- Add the current product objectID here --- + if ( + (algoliaConfig.recommend.enabledFBT && + $('body').hasClass('catalog-product-view')) || + (algoliaConfig.recommend.enabledFBTInCart && + $('body').hasClass('checkout-cart-index')) + ) { + recommendJs.frequentlyBoughtTogether({ + container : '#frequentlyBoughtTogether', + recommendClient, + indexName, + objectIDs, + maxRecommendations: algoliaConfig.recommend.limitFBTProducts, + transformItems : function (items) { + return items.map((item, index) => ({ + ...item, + position: index + 1, + })); + }, + headerComponent({html, recommendations}) { + if (!recommendations.length) { + return ''; + } + return recommendProductsHtml.getHeaderHtml( + html, + algoliaConfig.recommend.FBTTitle + ); + }, + itemComponent({item, html}) { + return recommendProductsHtml.getItemHtml( + item, + html, + algoliaConfig.recommend.isAddToCartEnabledInFBT + ); + }, + }); + } + if ( + (algoliaConfig.recommend.enabledRelated && + $('body').hasClass('catalog-product-view')) || + (algoliaConfig.recommend.enabledRelatedInCart && + $('body').hasClass('checkout-cart-index')) + ) { + recommendJs.relatedProducts({ + container : '#relatedProducts', + recommendClient, + indexName, + objectIDs, + maxRecommendations: algoliaConfig.recommend.limitRelatedProducts, + transformItems : function (items) { + return items.map((item, index) => ({ + ...item, + position: index + 1, + })); + }, + headerComponent({html, recommendations}) { + if (!recommendations.length) { + return ''; + } + return recommendProductsHtml.getHeaderHtml( + html, + algoliaConfig.recommend.relatedProductsTitle + ); + }, + itemComponent({item, html}) { + return recommendProductsHtml.getItemHtml( + item, + html, + algoliaConfig.recommend.isAddToCartEnabledInRelatedProduct + ); + }, + }); + } + } + + if ( + (algoliaConfig.recommend.isTrendItemsEnabledInPDP && $('body').hasClass('catalog-product-view')) || - (algoliaConfig.recommend.enabledFBTInCart && + (algoliaConfig.recommend.isTrendItemsEnabledInCartPage && $('body').hasClass('checkout-cart-index')) ) { - recommendJs.frequentlyBoughtTogether({ - container : '#frequentlyBoughtTogether', + recommendJs.trendingItems({ + container : '#trendItems', + facetName : algoliaConfig.recommend.trendItemFacetName + ? algoliaConfig.recommend.trendItemFacetName + : '', + facetValue : algoliaConfig.recommend.trendItemFacetValue + ? algoliaConfig.recommend.trendItemFacetValue + : '', recommendClient, indexName, - objectIDs, - maxRecommendations: algoliaConfig.recommend.limitFBTProducts, + maxRecommendations: algoliaConfig.recommend.limitTrendingItems, transformItems : function (items) { return items.map((item, index) => ({ ...item, @@ -49,199 +137,121 @@ define([ } return recommendProductsHtml.getHeaderHtml( html, - algoliaConfig.recommend.FBTTitle + algoliaConfig.recommend.trendingItemsTitle + ); + }, + itemComponent({item, html}) { + return recommendProductsHtml.getItemHtml( + item, + html, + algoliaConfig.recommend.isAddToCartEnabledInTrendsItem + ); + }, + }); + } else if ( + algoliaConfig.recommend.enabledTrendItems && + typeof config.recommendTrendContainer !== 'undefined' + ) { + let containerValue = '#' + config.recommendTrendContainer; + recommendJs.trendingItems({ + container : containerValue, + facetName : config.facetName ? config.facetName : '', + facetValue : config.facetValue ? config.facetValue : '', + recommendClient, + indexName, + maxRecommendations: config.numOfTrendsItem + ? parseInt(config.numOfTrendsItem) + : algoliaConfig.recommend.limitTrendingItems, + transformItems : function (items) { + return items.map((item, index) => ({ + ...item, + position: index + 1, + })); + }, + headerComponent({html}) { + return recommendProductsHtml.getHeaderHtml( + html, + algoliaConfig.recommend.trendingItemsTitle ); }, itemComponent({item, html}) { return recommendProductsHtml.getItemHtml( item, html, - algoliaConfig.recommend.isAddToCartEnabledInFBT + algoliaConfig.recommend.isAddToCartEnabledInTrendsItem ); }, }); } + if ( - (algoliaConfig.recommend.enabledRelated && + (algoliaConfig.recommend.isLookingSimilarEnabledInPDP && $('body').hasClass('catalog-product-view')) || - (algoliaConfig.recommend.enabledRelatedInCart && + (algoliaConfig.recommend.isLookingSimilarEnabledInCartPage && $('body').hasClass('checkout-cart-index')) ) { - recommendJs.relatedProducts({ - container : '#relatedProducts', + recommendJs.lookingSimilar({ + container: '#lookingSimilar', recommendClient, indexName, objectIDs, - maxRecommendations: algoliaConfig.recommend.limitRelatedProducts, + maxRecommendations: algoliaConfig.recommend.limitLookingSimilar, + transformItems: function (items) { + return items.map((item, index) => ({ + ...item, + position: index + 1, + })); + }, + headerComponent({html}) { + return recommendProductsHtml.getHeaderHtml( + html, + algoliaConfig.recommend.lookingSimilarTitle + ); + }, + itemComponent({item, html}) { + return recommendProductsHtml.getItemHtml( + item, + html, + algoliaConfig.recommend.isAddToCartEnabledInLookingSimilar + ); + } + }); + } else if ( + algoliaConfig.recommend.enabledLookingSimilar && + objectIDs && + typeof config.recommendLSContainer !== 'undefined' + ){ + let containerValue = '#' + config.recommendLSContainer; + recommendJs.lookingSimilar({ + container: containerValue, + recommendClient, + indexName, + objectIDs, + maxRecommendations: config.numOfLookingSimilarItem + ? parseInt(config.numOfLookingSimilarItem) + : algoliaConfig.recommend.limitLookingSimilar, transformItems : function (items) { return items.map((item, index) => ({ ...item, position: index + 1, })); }, - headerComponent({html, recommendations}) { - if (!recommendations.length) { - return ''; - } + headerComponent({html}) { return recommendProductsHtml.getHeaderHtml( html, - algoliaConfig.recommend.relatedProductsTitle + algoliaConfig.recommend.lookingSimilarTitle ); }, itemComponent({item, html}) { return recommendProductsHtml.getItemHtml( item, html, - algoliaConfig.recommend.isAddToCartEnabledInRelatedProduct + algoliaConfig.recommend.isAddToCartEnabledInLookingSimilar ); }, }); } - } - - if ( - (algoliaConfig.recommend.isTrendItemsEnabledInPDP && - $('body').hasClass('catalog-product-view')) || - (algoliaConfig.recommend.isTrendItemsEnabledInCartPage && - $('body').hasClass('checkout-cart-index')) - ) { - recommendJs.trendingItems({ - container : '#trendItems', - facetName : algoliaConfig.recommend.trendItemFacetName - ? algoliaConfig.recommend.trendItemFacetName - : '', - facetValue : algoliaConfig.recommend.trendItemFacetValue - ? algoliaConfig.recommend.trendItemFacetValue - : '', - recommendClient, - indexName, - maxRecommendations: algoliaConfig.recommend.limitTrendingItems, - transformItems : function (items) { - return items.map((item, index) => ({ - ...item, - position: index + 1, - })); - }, - headerComponent({html, recommendations}) { - if (!recommendations.length) { - return ''; - } - return recommendProductsHtml.getHeaderHtml( - html, - algoliaConfig.recommend.trendingItemsTitle - ); - }, - itemComponent({item, html}) { - return recommendProductsHtml.getItemHtml( - item, - html, - algoliaConfig.recommend.isAddToCartEnabledInTrendsItem - ); - }, - }); - } else if ( - algoliaConfig.recommend.enabledTrendItems && - typeof config.recommendTrendContainer !== 'undefined' - ) { - let containerValue = '#' + config.recommendTrendContainer; - recommendJs.trendingItems({ - container : containerValue, - facetName : config.facetName ? config.facetName : '', - facetValue : config.facetValue ? config.facetValue : '', - recommendClient, - indexName, - maxRecommendations: config.numOfTrendsItem - ? parseInt(config.numOfTrendsItem) - : algoliaConfig.recommend.limitTrendingItems, - transformItems : function (items) { - return items.map((item, index) => ({ - ...item, - position: index + 1, - })); - }, - headerComponent({html}) { - return recommendProductsHtml.getHeaderHtml( - html, - algoliaConfig.recommend.trendingItemsTitle - ); - }, - itemComponent({item, html}) { - return recommendProductsHtml.getItemHtml( - item, - html, - algoliaConfig.recommend.isAddToCartEnabledInTrendsItem - ); - }, - }); - } - - if ( - (algoliaConfig.recommend.isLookingSimilarEnabledInPDP && - $('body').hasClass('catalog-product-view')) || - (algoliaConfig.recommend.isLookingSimilarEnabledInCartPage && - $('body').hasClass('checkout-cart-index')) - ) { - recommendJs.lookingSimilar({ - container: '#lookingSimilar', - recommendClient, - indexName, - objectIDs, - maxRecommendations: algoliaConfig.recommend.limitLookingSimilar, - transformItems: function (items) { - return items.map((item, index) => ({ - ...item, - position: index + 1, - })); - }, - headerComponent({html}) { - return recommendProductsHtml.getHeaderHtml( - html, - algoliaConfig.recommend.lookingSimilarTitle - ); - }, - itemComponent({item, html}) { - return recommendProductsHtml.getItemHtml( - item, - html, - algoliaConfig.recommend.isAddToCartEnabledInLookingSimilar - ); - } - }); - } else if ( - algoliaConfig.recommend.enabledLookingSimilar && - objectIDs && - typeof config.recommendLSContainer !== 'undefined' - ){ - let containerValue = '#' + config.recommendLSContainer; - recommendJs.lookingSimilar({ - container: containerValue, - recommendClient, - indexName, - objectIDs, - maxRecommendations: config.numOfLookingSimilarItem - ? parseInt(config.numOfLookingSimilarItem) - : algoliaConfig.recommend.limitLookingSimilar, - transformItems : function (items) { - return items.map((item, index) => ({ - ...item, - position: index + 1, - })); - }, - headerComponent({html}) { - return recommendProductsHtml.getHeaderHtml( - html, - algoliaConfig.recommend.lookingSimilarTitle - ); - }, - itemComponent({item, html}) { - return recommendProductsHtml.getItemHtml( - item, - html, - algoliaConfig.recommend.isAddToCartEnabledInLookingSimilar - ); - }, - }); - } - }); + }); + } }; });