Move and style wishlist button in product card

move-and-style-wishlist-button-in-product-card.js

// Note : this works great on Impact

function oooWishlistButtonMoveAndStyle(target) {
    let wishlistButtonElement = document.querySelector("ooo-wl-access-button");
    let variantPicker = document.querySelector(target);

    if (wishlistButtonElement && variantPicker) {
      let wishlistButtonElementDuplicate = wishlistButtonElement.cloneNode(true);

      wishlistButtonElement.style.display = 'none';
      variantPicker.appendChild(wishlistButtonElementDuplicate);
      variantPicker.style.display = "flex";

      wishlistButtonElementDuplicate.style.display = "flex";
      wishlistButtonElementDuplicate.style.alignItems = "end";
      wishlistButtonElementDuplicate.style.marginLeft = "auto";

      let wishlistProductPageButton = wishlistButtonElementDuplicate.querySelector("ooo-wl-product-page-button");
      if (wishlistProductPageButton){
        wishlistProductPageButton.shadowRoot.querySelector('[data-action="variant-warning"]').style.display = 'none';

        // Ajuster la hauteur ici
        wishlistProductPageButton.shadowRoot.querySelector('button').style.height = "48px";
        // Ajuster la largeur ici
        wishlistProductPageButton.shadowRoot.querySelector('button').style.width = "84px";
      }
    }
  }

  document.querySelector('.product-info__buy-buttons form').addEventListener('variant:change', (event ) => {
    oooWishlistButtonMoveAndStyle(".product-info__variant-picker");
  });

  document.addEventListener('DOMContentLoaded', () => {
    oooWishlistButtonMoveAndStyle(".product-info__variant-picker");
  });