UpSell with UpCart

<script>
 function modifyCheckoutButton() {
    const upCartElement = document.getElementById('upCart');

    if (!upCartElement) {
        console.warn('upCart element not found.');
        return;
    }

    if (!upCartElement.shadowRoot) {
        console.warn('upCart shadowRoot not found.');
        // Continue even if shadowRoot is not found, as we've hidden the main element
        return;
    }


    const shadowRoot = upCartElement.shadowRoot;
    const checkoutButtons = shadowRoot.querySelectorAll(".upcart-checkout-button");

    if (checkoutButtons.length === 0) {
        console.log('No checkout buttons found within upCart shadowRoot.');
        return;
    }

    let modifiedCount = 0;
    checkoutButtons.forEach(button => {
        if (button instanceof HTMLAnchorElement) {
            // Create a new button element
            const newButton = document.createElement('button');

            // Copy classes from the anchor to the new button
            newButton.className = button.className;

            // Set the type attribute
            newButton.type = "button";

            // Copy inner text/content
            newButton.textContent = button.textContent;

            // Add the magic class (using class instead of ID for multiple elements)
            newButton.id = ("magic-checkout-button");

            // Set the width to 100%
            newButton.style.width = "100%";

            // Add the onclick event handler
            newButton.onclick = () => {
                window.upcartCloseCart();
                TRIGGER_QUICK_CHECKOUT();
            };

            // Copy other relevant attributes if needed (e.g., data attributes)
            // Example: for (const attr of button.attributes) { if (attr.name.startsWith('data-')) newButton.setAttribute(attr.name, attr.value); }

            // Replace the anchor tag with the new button tag in the DOM
            button.parentNode.replaceChild(newButton, button);
            modifiedCount++;
        } else if (button instanceof HTMLButtonElement) {
             // If it's already a button, just ensure type and add class
             button.type = "button";
             button.id = ("magic-checkout-button");
             // Set the width to 100%
             button.style.width = "100%";
             // Add the onclick event handler
             button.onclick = () => {
                window.upcartCloseCart();
                TRIGGER_QUICK_CHECKOUT();
            };
             // Avoid adding the same ID multiple times
             // button.id = "magic-checkout-button"; // Use class instead
             modifiedCount++;
        } else {
            // Optionally handle other element types or log a warning
            console.warn('Found an element with class .upcart-checkout-button that is not an anchor or button:', button.tagName);
            // Add the class anyway if desired for other types
            button.id = ("magic-checkout-button");
            // Set the width to 100%
            button.style.width = "100%";
            // Add the onclick event handler
            button.onclick = () => {
                window.upcartCloseCart();
                TRIGGER_QUICK_CHECKOUT();
            };
        }
    });

    if (modifiedCount > 0) {
        console.log(`Converted or modified ${modifiedCount} checkout button(s).`);
    }
}

setInterval(() => {
  
  // Call the function to modify the buttons
  modifyCheckoutButton();
  
}, 1000); // Runs every 1 second
</script>