wishlist-power-inject-css-product-card.js

function applyCSS() {
  const wishlistButtons = document.querySelectorAll('ooo-wl-product-card-button');
  const cssStyles = `
    svg {
      fill: var(--ooo-wl-product-card-button-icon-color, #000);
    }
  `;

  if (wishlistButtons) {
      // Create style element

      wishlistButtons.forEach((wishlistButton) => {
          // Append to shadow root
          const style = document.createElement('style');
          style.textContent = cssStyles;
          wishlistButton.shadowRoot.appendChild(style);
      })
  }
}


if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', applyCSS);
} else {
  applyCSS();
}

wishlist-power-inject-css-wishlist-page.js

// ADD CSS HERE
const cssStyles = `
  .ooo-wl-page-product-card__image-container {
    border-color: rgb(var(--border-color));
    border-style: solid;
    border-width: 1px;
  }
`;

function observeProductCardContainer(element) {
  const container = element.querySelector('#ooo-wl-page-product-card-container');
  
  if (container) {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        applyCSS(cssStyles);
      });
    });

    observer.observe(container, {
      childList: true,
      subtree: true,
      attributes: true
    });

    return observer;
  }
}

function applyCSS(cssStyles) {
  const wishlistContainer = document.querySelector('ooo-wl-page-container');

  if (!wishlistContainer) return;
  
  // Helper function to check if styles already exist and apply if needed
  const applyStyleToElement = (element, isRegularElement = false) => {
    if (!element) return;
    
    const targetElement = isRegularElement ? element : element.shadowRoot;
    if (!targetElement) return;
    
    // Check if style with our CSS already exists
    const existingStyle = targetElement.querySelector('style[data-wishlist-custom]');
    if (existingStyle) {
      // Update existing style if content is different
      if (existingStyle.textContent !== cssStyles) {
        existingStyle.textContent = cssStyles;
      }
      return;
    }
    
    // Create and inject new style
    const style = document.createElement('style');
    style.setAttribute('data-wishlist-custom', 'true');
    style.textContent = cssStyles;
    targetElement.appendChild(style);
  };

  // Apply styles to wishlistContainer shadowRoot
  applyStyleToElement(wishlistContainer);

  const wishlistContent = wishlistContainer.shadowRoot.querySelector('ooo-wl-page-content');

  // Apply styles to wishlistContent (regular element)
  if (wishlistContent) {
    observeProductCardContainer(wishlistContent);
    applyStyleToElement(wishlistContent, true);

    const wishlistPageContentInfo = wishlistContent.querySelector('ooo-wl-page-content-info');

    if (wishlistPageContentInfo) {
      // Apply styles to wishlistPageContentInfo shadowRoot
      applyStyleToElement(wishlistPageContentInfo);

      const wishlistAccessButton = wishlistPageContentInfo.shadowRoot.querySelector('ooo-wl-access-button');

      if (wishlistAccessButton) {
        // Apply styles to wishlistAccessButton (regular element)
        applyStyleToElement(wishlistAccessButton, true);
      }
    }

    const wishlistProductCards = wishlistContent.querySelectorAll('ooo-wl-page-product-card');
    
    if (wishlistProductCards.length > 0) {
      wishlistProductCards.forEach((wishlistButton) => {
        applyStyleToElement(wishlistButton);
      });
    }
  }
}

if (document.readyState === 'loading') {
  document.addEventListener('ooo-wishlist:page-viewed', () => setTimeout(applyCSS(cssStyles), 100));
} else {
  applyCSS(cssStyles);
}