From 46b818db1eed798dbae2121eeae7266d256cab94 Mon Sep 17 00:00:00 2001 From: fja-odoo Date: Tue, 24 Sep 2019 13:28:12 +0000 Subject: [PATCH] [FIX] website_sale: fix behaviors for loading recently viewed products If there is no product in the recently viewed product snippet, it will simply not be shown. It appears only if there are products (with some flickering we may decide to improve in future versions). Also fix the behavior when the last product of the snippet is moved to the cart. task-2076271 closes odoo/odoo#38438 X-original-commit: 02037bc20c6d3f5f2bad70a1a30b424ec432eb6b Signed-off-by: Quentin Smetz (qsm) Co-authored-by: qsm-odoo --- .../static/src/js/website_sale.editor.js | 46 --------- .../src/js/website_sale_recently_viewed.js | 99 +++++++++++++------ .../static/src/js/website_sale_utils.js | 63 +++++++----- .../static/src/scss/website_sale.editor.scss | 4 + addons/website_sale/views/snippets.xml | 21 ++-- 5 files changed, 116 insertions(+), 117 deletions(-) diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js index 84acbbc1008..e4f271604b5 100644 --- a/addons/website_sale/static/src/js/website_sale.editor.js +++ b/addons/website_sale/static/src/js/website_sale.editor.js @@ -392,50 +392,4 @@ options.registry.ProductsSearchBar = options.Class.extend({ }).open(); }, }); - -/** - * Handles the edition of products search bar snippet. - */ -options.registry.ProductsRecentlyViewed = options.Class.extend({ - xmlDependencies: ['/website_sale/static/src/xml/website_sale_recently_viewed.xml'], - - /** - * @override - */ - start: function () { - var carouselOptions = { - productsGroups: [[{ - id: 0, - website_url: '#', - display_name: 'Product 1', - price: '$ 750.00', - }, { - id: 0, - website_url: '#', - display_name: 'Product 2', - price: '$ 750.00', - }, { - id: 0, - website_url: '#', - display_name: 'Product 3', - price: '$ 750.00', - }, { - id: 0, - website_url: '#', - display_name: 'Product 4', - price: '$ 750.00', - }]], - uniqueId: 1, - productFrame: 4 - }; - this.$target.find('.slider').html($(qweb.render('website_sale.productsRecentlyViewed', carouselOptions))).fadeIn(); - return this._super.apply(this, arguments); - }, - /** - * @override - */ - cleanForSave: function () { - this.$target.find('.slider').html('').css('display', 'none'); - }, -}); }); diff --git a/addons/website_sale/static/src/js/website_sale_recently_viewed.js b/addons/website_sale/static/src/js/website_sale_recently_viewed.js index f0c0b9353c2..b27ba243aa4 100644 --- a/addons/website_sale/static/src/js/website_sale_recently_viewed.js +++ b/addons/website_sale/static/src/js/website_sale_recently_viewed.js @@ -12,6 +12,7 @@ var qweb = core.qweb; publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend({ selector: '.s_wsale_products_recently_viewed', xmlDependencies: ['/website_sale/static/src/xml/website_sale_recently_viewed.xml'], + disabledInEditableMode: false, events: { 'click .js_add_cart': '_onAddToCart', 'click .js_remove': '_onRemove', @@ -36,6 +37,14 @@ publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend }); return this._super.apply(this, arguments); }, + /** + * @override + */ + destroy: function () { + this._super(...arguments); + this.$el.addClass('d-none'); + this.$el.find('.slider').html(''); + }, //-------------------------------------------------------------------------- // Private @@ -47,42 +56,70 @@ publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend _fetch: function () { return this._rpc({ route: '/shop/products/recently_viewed', + }).then(res => { + var products = res['products']; + + // In edit mode, if the current visitor has no recently viewed + // products, use demo data. + if (this.editableMode && (!products || !products.length)) { + return { + 'products': [{ + id: 0, + website_url: '#', + display_name: 'Product 1', + price: '$ 750.00', + }, { + id: 0, + website_url: '#', + display_name: 'Product 2', + price: '$ 750.00', + }, { + id: 0, + website_url: '#', + display_name: 'Product 3', + price: '$ 750.00', + }, { + id: 0, + website_url: '#', + display_name: 'Product 4', + price: '$ 750.00', + }], + }; + } + + return res; }); }, /** * @private */ _render: function (res) { - if (!res) { - return; - } var products = res['products']; - if (products && products.length) { - var mobileProducts = [], webProducts = [], productsTemp = []; - _.each(products, function (product) { - if (productsTemp.length === 4) { - webProducts.push(productsTemp); - productsTemp = []; - } - productsTemp.push(product); - mobileProducts.push([product]); - }); - if (productsTemp.length) { + var mobileProducts = [], webProducts = [], productsTemp = []; + _.each(products, function (product) { + if (productsTemp.length === 4) { webProducts.push(productsTemp); + productsTemp = []; } - - this.mobileCarousel = $(qweb.render('website_sale.productsRecentlyViewed', { - uniqueId: this.uniqueId, - productFrame: 1, - productsGroups: mobileProducts, - })); - this.webCarousel = $(qweb.render('website_sale.productsRecentlyViewed', { - uniqueId: this.uniqueId, - productFrame: 4, - productsGroups: webProducts, - })); - this._addCarousel(); + productsTemp.push(product); + mobileProducts.push([product]); + }); + if (productsTemp.length) { + webProducts.push(productsTemp); } + + this.mobileCarousel = $(qweb.render('website_sale.productsRecentlyViewed', { + uniqueId: this.uniqueId, + productFrame: 1, + productsGroups: mobileProducts, + })); + this.webCarousel = $(qweb.render('website_sale.productsRecentlyViewed', { + uniqueId: this.uniqueId, + productFrame: 4, + productsGroups: webProducts, + })); + this._addCarousel(); + this.$el.toggleClass('d-none', !(products && products.length)); }, /** * Add the right carousel depending on screen size. @@ -90,7 +127,7 @@ publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend */ _addCarousel: function () { var carousel = config.device.size_class <= config.device.SIZES.SM ? this.mobileCarousel : this.webCarousel; - this.$('.slider').html(carousel).fadeIn(1000); + this.$('.slider').html(carousel).css('display', ''); // Removing display is kept for compatibility (it was hidden before) }, //-------------------------------------------------------------------------- @@ -114,9 +151,11 @@ publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend }).then(function (data) { wSaleUtils.updateCartNavBar(data); var $navButton = wSaleUtils.getNavBarButton('.o_wsale_my_cart'); - wSaleUtils.animateClone($navButton, $(ev.currentTarget).parents('.o_carousel_product_card'), 25, 40); - - self._dp.add(self._fetch()).then(self._render.bind(self)); + var fetch = self._fetch(); + var animation = wSaleUtils.animateClone($navButton, $(ev.currentTarget).parents('.o_carousel_product_card'), 25, 40); + Promise.all([fetch, animation]).then(function (values) { + self._render(values[0]); + }); }); }, diff --git a/addons/website_sale/static/src/js/website_sale_utils.js b/addons/website_sale/static/src/js/website_sale_utils.js index 3b672063551..2c30cd8b3b6 100644 --- a/addons/website_sale/static/src/js/website_sale_utils.js +++ b/addons/website_sale/static/src/js/website_sale_utils.js @@ -20,43 +20,52 @@ function getNavBarButton(selector) { } function animateClone($cart, $elem, offsetTop, offsetLeft) { - $cart.find('.o_animate_blink').addClass('o_red_highlight o_shadow_animation').delay(500).queue(function(){ + $cart.find('.o_animate_blink').addClass('o_red_highlight o_shadow_animation').delay(500).queue(function () { $(this).removeClass("o_shadow_animation").dequeue(); - }).delay(2000).queue(function(){ + }).delay(2000).queue(function () { $(this).removeClass("o_red_highlight").dequeue(); }); - var $imgtodrag = $elem.find('img').eq(0); - if ($imgtodrag.length) { - var $imgclone = $imgtodrag.clone() - .offset({ - top: $imgtodrag.offset().top, - left: $imgtodrag.offset().left - }) - .addClass('o_website_sale_animate') - .appendTo(document.body) - .animate({ - top: $cart.offset().top + offsetTop, - left: $cart.offset().left + offsetLeft, - width: 75, - height: 75, - }, 1000, 'easeInOutExpo'); + return new Promise(function (resolve, reject) { + var $imgtodrag = $elem.find('img').eq(0); + if ($imgtodrag.length) { + var $imgclone = $imgtodrag.clone() + .offset({ + top: $imgtodrag.offset().top, + left: $imgtodrag.offset().left + }) + .addClass('o_website_sale_animate') + .appendTo(document.body) + .animate({ + top: $cart.offset().top + offsetTop, + left: $cart.offset().left + offsetLeft, + width: 75, + height: 75, + }, 1000, 'easeInOutExpo'); - $imgclone.animate({ - width: 0, - height: 0, - }, function () { - $(this).detach(); - }); - } + $imgclone.animate({ + width: 0, + height: 0, + }, function () { + resolve(); + $(this).detach(); + }); + } else { + resolve(); + } + }); } /** + * Updates both navbar cart * @param {Object} data */ function updateCartNavBar(data) { - var $q = $(".my_cart_quantity"); - $q.parents('li:first').removeClass('d-none'); - $q.html(data.cart_quantity).hide().fadeIn(600); + var $qtyNavBar = $(".my_cart_quantity"); + _.each($qtyNavBar, function (qty) { + var $qty = $(qty); + $qty.parents('li:first').removeClass('d-none'); + $qty.html(data.cart_quantity).hide().fadeIn(600); + }); $(".js_cart_lines").first().before(data['website_sale.cart_lines']).end().remove(); $(".js_cart_summary").first().before(data['website_sale.short_cart_summary']).end().remove(); } diff --git a/addons/website_sale/static/src/scss/website_sale.editor.scss b/addons/website_sale/static/src/scss/website_sale.editor.scss index 9a4f59d52f0..729bde03af2 100644 --- a/addons/website_sale/static/src/scss/website_sale.editor.scss +++ b/addons/website_sale/static/src/scss/website_sale.editor.scss @@ -25,3 +25,7 @@ } } } + +.oe_drop_zone + .s_wsale_products_recently_viewed { + display: block !important; +} diff --git a/addons/website_sale/views/snippets.xml b/addons/website_sale/views/snippets.xml index 17fc75eb0d6..31d40dd882e 100644 --- a/addons/website_sale/views/snippets.xml +++ b/addons/website_sale/views/snippets.xml @@ -25,19 +25,16 @@ @@ -121,10 +118,6 @@ Products Search Bar - -
-