javascript Insider Rec Engine

Posted 2021-05-03

spApi.InsiderRecEngine = function (config) {
    var self = {};
    var options = typeof config === 'object' ? config : '';

    self.initializer = function () {
        self.loadSwiper(function () {
            self.makeRequest(function (responseData) {
                self.initSlider();
                self.buildHtml(responseData, options.selectorType);
            });
        });
    };

    self.loadSwiper = function (callback) {
        spApi.loadScript('https://api.sociaplus.com/edit/actionbuilder/inner_frame/libraries/swiper/swiper.min.js',
            function () {
                sQuery('head').append('<link rel="stylesheet"' +
                    ' href="https://api.sociaplus.com/edit/actionbuilder/inner_frame/libraries/swiper/swiper.css?v=0.1.2">');

                if (typeof callback === 'function') {
                    callback();
                }
            });
    };

    self.initSlider = function () {
        new Swiper('.ins-swiper-container.ins-swiper-rec-engine', {
            slidesPerView: options.slidesPerView,
            loop: options.loop,
            direction: options.direction,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            simulateTouch: false
        });
    };

    self.makeRequest = function (callback) {
        sQuery.get(self.generateEndpoint(), function (response, status) {
            switch (status) {
                case 'success':
                    if (typeof callback === 'function') {
                        var responseData = response.data || [];

                        if (responseData.length > 0) {
                            callback(self.shuffleArray(responseData));
                        }
                    }
                    break;
                case 'error':
                    spApi.conLog('Something is crash: ', status);
                    break;
                case 'timeout':
                    spApi.conLog('Timeout: ', status);
                    break;
                case 'parsererror':
                    spApi.conLog('Parser error: ', status);
            }
        });
    };

    self.shuffleArray = function (array) {
        var index, randomIndex, temp;

        for (index = array.length; index > 0;) {
            randomIndex = Math.floor(Math.random() * index);
            index--;con

            temp = array[index];
            array[index] = array[randomIndex];
            array[randomIndex] = temp;
        }

        return array;
    };

    self.buildHtml = function(products, selectorType) {
        var html = '<div class="ins-recommendation-container">' + 
            '<div class="ins-swiper-rec-engine">Rec Engine</div>' + 
        '</div>'

        sQuery.each(product, function(index, product){
            html += '<div class="swiper-slide ins-swiper-item">' + 
            '<a class="sp-custom-' + options.campıd + '-1" href="' + product.url + '">' +
            '<img class="ins-product-img-rec" src="' + product.image_url + '"/>' +
            '</a>' +
            '</div>';
        });

        switch(selectorType) {
            case 'append':
                sQuery(options.selector).append(html);
                break;
            case 'before': 
                sQuery(options.selector).before(html);
                break;
            case 'after': 
                sQuery(options.selector).after(html);
                break;
            case 'appendTo': 
                sQuery(options.selector).appendTo(html);
                break;
        }
    };

    self.generateEndpoint = function () {
        var result = 'https://recommendation.api.useinsider.com/' + options.partnerId +
            '/' + spApi.getLang() + '/' + options.recommendationType;
        var product = self.getProductDetails();

        if (options.recommendationType.indexOf('user') > -1) {
            result += '/' + spApi.storageData('spUID');
        } else if (options.recommendationType.indexOf('complementary') > -1 ||
            options.recommendationType.indexOf('similar') > -1) {
            result += '/product/' + product.id;
        }

        result += '?';

        if (options.recommendationType.indexOf('complementary') > -1) {
            var categories = (((JSON.parse(JSON.parse(spApi.localStorageGet('prodCats') || '{}').data || '{}')[0] || '{}').cat ||
                'En Yeniler|En Yeniler').split('|') || '') || product.categories;

            result += 'category=' + encodeURIComponent(categories[0]) + '&' +
                'subcategory=' + (encodeURIComponent(categories[0]) || '') + '&';
        }

        return result + '&details=' + true + '&size=' + 100 + '&limit=' + (options.itemLimit || 100);
    };

    self.getProductDetails = function () {
        var id, categories;

        if (spApi.isOnProductPage()) {
            id = spApi.getCurrentProduct().id;
            categories = spApi.getProductCategories();
        }

        if (spApi.isOnCartPage()) {
            var isFound;

            sQuery.each(JSON.parse(spApi.storageData('prodCats') || '{}'), function (index, productCats) {
                isFound = false;

                sQuery.each(spApi.getPaidProducts(), function (iter, product) {
                    if (product.id === productCats.id || product.name === productCats.name) {
                        categories = productCats.cat.split('|');
                        id = product.id;
                        isFound = true;

                        return false;
                    }
                });

                if (isFound) {
                    return false;
                }
            });
        }

        return {
            id: id,
            categories: categories
        };
    };

    self.initializer();
};

new spApi.InsiderRecEngine({
    selector: '.b-infoBox',
    selectType: 'append', 
    maximumSlidesToDisplay: 10,
    recommendationType: 'similar',
    language: spApi.getLang(),
    campId: 44,
    partnerId: 10001634,
    itemLimit: 20,
    title: '',
    slidesPerView: 5,
    loop: false,
    direction: 'horizontal', // vertical or horizontal
    currency: spApi.getCurrency()
});