[FIX] website, *: fix wishlist animation

* = website_sale, website_sale_wishlist

The wishlist animation was not handling the affixed navbar and always
referring to the main one.
Now the animation will target the right navbar if we scroll down.

When the navbar is duplicated, the ids of the tags were kept which is
wrong and was producing bugs such as the wishlist button not showing up
on the floating navbar on the first product added to the wishlist and
the first issue. Now the id is removed from the clone and never used
in JS code. Its only purpose is for the xpath of the wishlist button.

When a product was added to the cart from the wishlist and the affixed
navbar was displayed, the product was hidden before the animation was
completed. This changed the height of the page and the animation went to
the middle of the page instead of the button. This is now fixed too.

task-2002122

closes odoo/odoo#34358

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/js/content/menu.js

@@ -15,7 +15,7 @@ publicWidget.registry.affixMenu = publicWidget.Widget.extend({
         var def = this._super.apply(this, arguments);
 
         var self = this;
-        this.$headerClone = this.$target.clone().addClass('o_header_affix affix').removeClass('o_affix_enabled');
+        this.$headerClone = this.$target.clone().addClass('o_header_affix affix').removeClass('o_affix_enabled').removeAttr('id');
         this.$headerClone.insertAfter(this.$target);
         this.$headers = this.$target.add(this.$headerClone);
         this.$dropdowns = this.$headers.find('.dropdown');

addons/website_sale/views/templates.xml

@@ -72,7 +72,7 @@
         <xpath expr="//header//ul[@id='top_menu']/li" position="before">
             <t t-set="website_sale_order" t-value="website.sale_get_order()" />
             <li class="nav-item divider d-none"/> <!-- Make sure the cart and related menus are not folded (see autohideMenu) -->
-            <li id="my_cart" t-attf-class="nav-item#{'' if website_sale_order and website_sale_order.cart_quantity else ' d-none'}">
+            <li t-attf-class="nav-item o_wsale_my_cart #{'' if website_sale_order and website_sale_order.cart_quantity else 'd-none'}">
                 <a href="/shop/cart" class="nav-link">
                     <i class="fa fa-shopping-cart"></i>
                     My Cart <sup t-attf-class="my_cart_quantity badge badge-primary" t-esc="website_sale_order and website_sale_order.cart_quantity or ''" />

addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js

@@ -11,7 +11,7 @@ var VariantMixin = require('sale.VariantMixin');
 publicWidget.registry.ProductWishlist = publicWidget.Widget.extend(VariantMixin, {
     selector: '.oe_website_sale',
     events: {
-        'click #my_wish': '_onClickMyWish',
+        'click .o_wsale_my_wish': '_onClickMyWish',
         'click .o_add_wishlist, .o_add_wishlist_dyn': '_onClickAddWish',
         'change input.product_id': '_onChangeVariant',
         'change input.js_product_change': '_onChangeProduct',
@@ -68,6 +68,23 @@ publicWidget.registry.ProductWishlist = publicWidget.Widget.extend(VariantMixin,
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * Gets the element in the navbar currently displayed.
+     * Depending on the scroll position, it could either be the one in the main
+     * top bar or the one in the affixed navbar.
+     *
+     * @private
+     * @param {string} selector
+     * @returns {jQuery}
+     */
+    _getNavBarButton: function (selector) {
+        var $affixedHeaderButton = $('header.affixed ' + selector);
+        if ($affixedHeaderButton.length) {
+            return $affixedHeaderButton;
+        } else {
+            return $('header ' + selector).first();
+        }
+    },
     /**
      * @private
      */
@@ -105,9 +122,10 @@ publicWidget.registry.ProductWishlist = publicWidget.Widget.extend(VariantMixin,
                         product_id: productId,
                     },
                 }).then(function () {
+                    var $navButton = self._getNavBarButton('.o_wsale_my_wish');
                     self.wishlistProductIDs.push(productId);
                     self._updateWishlistView();
-                    wSaleUtils.animateClone($('#my_wish'), $el.closest('form'), 25, 40);
+                    wSaleUtils.animateClone($navButton, $el.closest('form'), 25, 40);
                 }).guardedCatch(function () {
                     $el.prop("disabled", false).removeClass('disabled');
                 });
@@ -121,16 +139,16 @@ publicWidget.registry.ProductWishlist = publicWidget.Widget.extend(VariantMixin,
      */
     _updateWishlistView: function () {
         if (this.wishlistProductIDs.length > 0) {
-            $('#my_wish').show();
+            $('.o_wsale_my_wish').show();
             $('.my_wish_quantity').text(this.wishlistProductIDs.length);
         } else {
-            $('#my_wish').hide();
+            $('.o_wsale_my_wish').hide();
         }
     },
     /**
      * @private
      */
-    _removeWish: function (e, deferred_redirect){
+    _removeWish: function (e, deferred_redirect) {
         var tr = $(e.currentTarget).parents('tr');
         var wish = tr.data('wish-id');
         var product = tr.data('product-id');
@@ -156,10 +174,11 @@ publicWidget.registry.ProductWishlist = publicWidget.Widget.extend(VariantMixin,
      * @private
      */
     _addOrMoveWish: function (e) {
+        var $navButton = this._getNavBarButton('.o_wsale_my_cart');
         var tr = $(e.currentTarget).parents('tr');
         var product = tr.data('product-id');
-        $('#my_cart').removeClass('d-none');
-        wSaleUtils.animateClone($('#my_cart'), tr, 25, 40);
+        $('.o_wsale_my_cart').removeClass('d-none');
+        wSaleUtils.animateClone($navButton, tr, 25, 40);
 
         if ($('#b2b_wish').is(':checked')) {
             return this._addToCart(product, tr.find('add_qty').val() || 1);

addons/website_sale_wishlist/views/website_sale_wishlist_template.xml

@@ -33,10 +33,10 @@
     </template>
 
     <template id="header" inherit_id="website.layout" name="Header Shop Wishlist Link">
-        <xpath expr="//header//ul[@id='top_menu']/li[@id='my_cart']" position="after">
+        <xpath expr="//header//ul[@id='top_menu']/li[contains(@t-attf-class, 'o_wsale_my_cart')]" position="after">
             <t t-if="request.website.viewref('website_sale_wishlist.add_to_wishlist').active">
                 <t t-set='wishcount' t-value="len(request.env['product.wishlist'].current())"/>
-                <li id="my_wish" class="nav-item" t-att-style="not wishcount and 'display:none;'">
+                <li class="nav-item o_wsale_my_wish" t-att-style="not wishcount and 'display:none;'">
                     <a href="/shop/wishlist" class="nav-link">
                         <i class="fa fa-heart"/>
                         Wishlist <sup t-attf-class="my_wish_quantity o_animate_blink badge badge-primary"><t t-esc='wishcount'/></sup>