How to solve Products are duplicating in the recently viewed product slider.

When viewed 2 products, those products are duplicating in the recently viewed slider.There is no navigation buttons present for the recently viewed products slider.

Blank spaces are appearing when scrolled after the last product in the slider.

For this issue we need to customize the bx-slider for our requirement. Here I modified the slider For above requirement.

Modules: “ItemRelations.Related.View” (ItemRelationsRelatedView)

_.extend(RecentlyViewedItemsView.prototype, {
                        loadRecentlyViewedItem: function loadRecentlyViewedItem() {
                            const self = this;
                            RecentlyViewedItemsCollection.getInstance().turnOnTracking();
                            this.collection.promise &&
                                this.collection.promise.done(function () {
                                    const application = self.options;
                                    const number_of_items_displayed = SC.CONFIGURATION.recentlyViewedItems.numberOfItemsDisplayed;
                                    self.collection = self.collection.first(parseInt(number_of_items_displayed));
                                    self.render();
                                    const carousel = self.$el.find('[data-type="carousel-items"]');
                                    if (Utils.isPhoneDevice() === false && SC.CONFIGURATION.siteSettings.imagesizes) {
                                        const thumbnail = _.where(
                                            SC.CONFIGURATION.siteSettings.imagesizes, {
                                                name: SC.CONFIGURATION.imageSizeMapping.thumbnail
                                            }
                                        )[0];
                                        const img_min_height = thumbnail.maxheight;
                                        carousel
                                            .find('.item-relations-related-item-thumbnail')
                                            .css('minHeight', img_min_height);
                                    }
                                    var sliderNewProperty = SC.CONFIGURATION.bxSliderDefaults;
                                    sliderNewProperty.minSlides = 2;
                                    sliderNewProperty.infiniteLoop = false;
                                    if (productLength >= 5) {
                                        sliderNewProperty.controls = true;
                                        if (window.innerWidth > 768) {
                                            sliderNewProperty.oneToOneTouch = true;
                                        } else {
                                            sliderNewProperty.oneToOneTouch = false;
                                        }
                                    } else {
                                        sliderNewProperty.controls = false;
                                        if (window.innerWidth > 768) {
                                            sliderNewProperty.oneToOneTouch = false;
                                        } else {
                                            sliderNewProperty.oneToOneTouch = true;
                                        }
                                    }
                                    Utils.initBxSlider(carousel, sliderNewProperty);
                                });
                        },
                        getContext: _.wrap(RecentlyViewedItemsView.prototype.getContext, function (fn) {
                            var originalRet = fn.apply(this, _.toArray(arguments).slice(1));
                            productLength = originalRet.collection.length;
                            return originalRet;
                        })
                    });

Leave a comment

Your email address will not be published. Required fields are marked *