Last active
November 27, 2025 18:18
-
-
Save fabiensebban/f55d13cfe881229e4b9745cbddeb0555 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| // ADD CSS HERE | |
| const cssStyles = ` | |
| ooo-wl-copy-button button, | |
| ooo-wl-access-button button { | |
| --initial-gradient: linear-gradient(rgb(var(--button-background)), rgb(var(--button-background))); | |
| --hover-gradient: linear-gradient(transparent, transparent); | |
| --initial-background-position: var(--transform-origin-end); | |
| --hover-background-position: var(--transform-origin-start); | |
| -webkit-appearance: none; | |
| appearance: none; | |
| text-transform: var(--button-text-transform); | |
| font: var(--button-font); | |
| letter-spacing: var(--button-letter-spacing); | |
| text-shadow: none; | |
| text-align: center; | |
| cursor: pointer; | |
| color: rgb(var(--button-text-color)); | |
| border: 1px solid rgb(var(--button-outline-color, var(--button-background))); | |
| border-radius: var(--button-border-radius); | |
| background-color: #0000; | |
| background-image: var(--initial-gradient), var(--hover-gradient); | |
| background-size: 101% 101%, 0 101%; | |
| background-position: var(--initial-background-position); | |
| background-repeat: no-repeat; | |
| justify-content: center; | |
| align-items: center; | |
| column-gap: 1.125rem; | |
| padding: .65rem 1.75rem; | |
| transition: background-size .45s | |
| cubic-bezier(.785, .135, .15, .86), background-position .45s step-end, color .45s | |
| cubic-bezier(.785, .135, .15, .86), border .45s | |
| cubic-bezier(.785, .135, .15, .86); | |
| display: inline-flex; | |
| position: relative; | |
| } | |
| ooo-wl-access-button button:hover, | |
| ooo-wl-copy-button button:hover { | |
| color: rgb(var(--button-background)); | |
| background-position: var(--hover-background-position); | |
| border-color: rgb(var(--button-background)); | |
| background-size: 0 101%, 101% 101%; | |
| } | |
| `; | |
| // Apply custom CSS to content info | |
| document.addEventListener('ooo-wishlist:page-content-info-mounted', (event) => { | |
| applyStyles(event.detail.shadowElement, cssStyles); | |
| }); | |
| // Apply custom CSS to product cards | |
| document.addEventListener('ooo-wishlist:page-product-card-mounted', (event) => { | |
| applyStyles(event.detail.shadowElement, cssStyles); | |
| }); | |
| function applyStyles(element, cssStyle) { | |
| if (element) { | |
| const style = document.createElement('style'); | |
| style.setAttribute('data-wishlist-custom', 'true'); | |
| style.textContent = cssStyle; | |
| element?.appendChild(style); | |
| } | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment