javascript Rec Engine

Posted 2021-05-04

.ins-container{
    border-top: 1px solid rgba(123,123,123,.1);
    display: block;
    position: relative;
    overflow: hidden;
    margin-top: 15px;
    margin-left: 10px;
}

.ins-items-container{
    transition: all 0.5s ease;
}

.ins-items{
    float: left;
}

.ins-prev-button{
    position: absolute;
    top: 40%;
    background-color: white;
    text-align: center;
    width:40px;
    height:40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 999999;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.45);
    left: 3px;
}

.ins-prev-button span{
    position: relative;
    font-size: 20px;
    font-weight: thin;
    color: gray;
    left: 0px;
    top: 8px;
}

.ins-next-button{
    position: absolute;
    top: 40%;
    background-color: white;
    text-align: center;
    width:40px;
    height:40px;
    right: 3px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 999999;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.45);
}

.ins-next-button span{
    position: relative;
    font-size: 20px;
    font-weight: thin;
    color: gray;
    left: 1px;
    top: 8px;
}

.ins-product {
    width: 200px;
    display: inline-block;
    padding: 3px;
}

.ins-title {
    font-weight: bold;
    text-align: center;
}

.ins-new-price, .ins-old-price{
    display: inline-block;
    width: 49%;
}

.ins-price{
    color: black;
    font-weight: bold;
    text-align: center;
}

.ins-add-to-cart-button{
    background-color: #f28b00;
    padding: 9px;
    font-weight: bold;
    text-align: center;
    color: white;
    border-radius: 8px;
    width: 100px;
    display: block;
    margin: auto;
    cursor: pointer;
}

.ins-add-to-cart-button a{
    text-decoration: none;
}

/*
    taskId: SD-59999
*/
(function(self) {
    "use strict";

    var campId = 192;
    var partnerId = 10000455;
    var currentProduct = spApi.getCurrentProduct();
    var limit = 12;
    var endPoint = 'https://predictive.api.sociaplus.com/recommendation/product?itemid=' + (currentProduct.id || '') + '&category=' + (((currentProduct || {}).cats || [])[0] || '') + '&subcategory=' + (((currentProduct || {}).cats || [])[1] || '') + '&partnerid=' + partnerId + '&with_item_details=1&lang=tr_TR&size=' + limit;
    var appendSelector = '.ems-prd-detail .inner-row-2-inner';
    var itemCountPerSlide = 3;
    var sliderWith = 600; //600 means 600px
    var itemHeight = 258;

    self.construct = function() {
        self.reset();
        self.removeElements();
        self.getData(self.buildHtml, function() {
            self.slider.init();
        });
    };

    self.reset = function() {
        sQuery('#ins-rec-container-' + campId).remove();
    };

    self.removeElements = function() {
        sQuery('#product-recommend .product').remove();
    };

    self.buildHtml = function(products) {
        var html = '<div class="ins-container" id="ins-rec-container-' + campId + '" style="width:' + sliderWith + 'px" >' +
            '<div class="ins-buttons">' +
            '<div class="ins-prev-button " id="ins-slider-prev"><span>&#10094;</span></div>' +
            '<div class="ins-next-button " id="ins-slider-next"><span>&#10095;</span></div>' +
            '</div>' +
            '<div class="ins-items-container">';

        sQuery.each(products, function(index, product) {
            
            if (index % itemCountPerSlide === 0 && index !== 0) {
                html += '</div>';
            }
            if (index % itemCountPerSlide === 0) {
                html += '<div class="ins-items ' + (index === 0 ? "ins-active-slider" : "") + '">';
            }

            html += self.getProduct(index, product);
        });

        html += '</div>';

        sQuery(appendSelector).append(html);
    };

    self.getProduct = function(index, product) {
        return '<div class="ins-product" style="width:' + ((sliderWith / itemCountPerSlide) - 1) + 'px">' +
            '<div class="ins-thumbnail">' +
            '<div data-equalizer-watch="image" >' +
            '<div class="ins-image"><a href="' + product.item_url + '" class="' + 'sp-custom-' + campId + '-1"><img alt="' + product.item_name + '" width="200" height="' + itemHeight + '" src="' + product.item_image + '"></a></div>' +
            '</div>' +
            '<div class="ins-title-area">' +
            '<p class="ins-title"><a href="' + product.item_url + '" class="product_name ' + 'sp-custom-' + campId + '-1">' + product.item_name + '</a></p>' +
            '</div>' +
            '<div class=ins-label">' +
            '</div>' +
            '<div class="ins-text-left ins-price-box" data-equalizer-watch="info" style="height: 53px;">' +
            '<div class="ins-price">' + (product.item_price) + 'TL</div>' +
            '</div>' +
            '<div class="ins-add-to-cart-button  class="sp-custom-' + campId + '-1"><a href="' + product.item_url + '" class="' + 'sp-custom-' + campId + '-1">Sepete Ekle</a></div>' +
            '</div>' +
            '</div>';

    };

    self.getData = function(fn, cb) {
        sQuery.ajax({
            type: "GET",
            url: endPoint,
            success: function(response) {
                fn(response);
                cb();
            }
        });
    };

    self.slider = {
        init: function() {
            var slideCount = sQuery('.ins-items').length;
            var slideWidth = sQuery('.ins-items').width();
            var sliderLength = slideCount * slideWidth;

            sQuery('.ins-items-container').css('width', sliderLength + 'px');
            sQuery('.ins-items').css('width', sQuery('.ins-items').width() + 'px');
            self.slider.setEvents();
        },

        slidePrev: function() {
            var activeSliderIndex = sQuery('.ins-items.ins-active-slider').index();
            var prev = activeSliderIndex - 1;

            if (prev < 0) {
                prev = sQuery('.ins-items:last').index();
            }

            self.slider.slideTo(prev);
        },

        slideNext: function() {
            var activeSliderIndex = sQuery('.ins-items.ins-active-slider').index();
            var slideCount = sQuery('.ins-items').length - 1;
            var next = activeSliderIndex + 1;

            if (next > slideCount) {
                next = sQuery('.ins-items:first').index();
            }

            self.slider.slideTo(next);
        },

        slideTo: function(index) {
            var slideWidth = sQuery('.ins-items').width();

            sQuery('.ins-items.ins-active-slider').removeClass('ins-active-slider');
            sQuery('.ins-items').eq(index).addClass('ins-active-slider');
            sQuery('.ins-items-container').css({
                'transform': 'translateX(' + slideWidth * index * -1 + 'px)'
            });
        },

        setEvents: function() {
            sQuery('#ins-slider-next').click(function() {
                self.slider.slideNext();
            });
            sQuery('#ins-slider-prev').click(function() {
                self.slider.slidePrev();
            });
        }

    };

    self.construct();

})({});