Shopify需求：仅在产品页面完全加载后加载Add to Cart按钮

Hey Marco, let's tackle this compatibility issue head-on. The core problem is your Add to Cart button loads before the Secomapp Free Gifts app finishes initializing, creating a small window where users can bypass the promo popup. Below are two practical solutions matching the directions you outlined:

Option 1: Hide the Button Until the App is Ready (Quickest Fix) #

This approach keeps your existing button markup but hides it until the Secomapp app is fully loaded.

Step 1: Add Initial CSS to Hide the Button #

First, add this CSS to your theme (either in the theme editor's custom CSS section or your stylesheet):

/* Hide Add to Cart button by default */
.product-form__submit.add-to-cart-btn {
    display: none !important;
}

(Adjust the selector to match your actual Add to Cart button's class—inspect the button element on your product page to get the right class names.)

Step 2: Show the Button Once Secomapp Loads #

Add this JavaScript snippet to your product page (via theme editor or a custom script app):

function revealAddToCart() {
    // Check if Secomapp's popup or global object exists
    const isSecomappReady = window.SecomappFreeGifts || document.querySelector('.secomapp-freegifts-container');
    
    if (isSecomappReady) {
        // Show the button
        document.querySelector('.product-form__submit.add-to-cart-btn').style.display = 'block';
    } else {
        // Retry every 100ms if the app isn't ready yet
        setTimeout(revealAddToCart, 100);
    }
}

// Start checking once the page finishes loading
window.addEventListener('load', revealAddToCart);

// Add a fallback: show the button after 5 seconds if the app fails to load
setTimeout(() => {
    document.querySelector('.product-form__submit.add-to-cart-btn').style.display = 'block';
}, 5000);

Option 2: Dynamically Load the Button After App Initialization #

If you prefer not to have the button in the DOM at all until the app is ready, this approach creates the button dynamically.

Step 1: Remove the Existing Button Markup #

First, remove your current Add to Cart button from the product page template (keep the container where it should go).

Step 2: Dynamically Create and Insert the Button #

Add this JavaScript to your product page:

function createAddToCartButton() {
    // Build the button element (match your site's button HTML/style)
    const addToCartBtn = document.createElement('button');
    addToCartBtn.className = 'product-form__submit add-to-cart-btn';
    addToCartBtn.textContent = 'Add to Cart';
    
    // Attach your existing Add to Cart click logic
    addToCartBtn.addEventListener('click', () => {
        // Replace this with your actual add-to-cart function
        document.querySelector('.product-form').submit();
    });

    // Insert the button into its container
    const buttonContainer = document.querySelector('.product-form__buttons');
    if (buttonContainer) buttonContainer.appendChild(addToCartBtn);
}

function waitForSecomapp() {
    const isSecomappReady = window.SecomappFreeGifts || document.querySelector('.secomapp-freegifts-container');
    
    if (isSecomappReady) {
        createAddToCartButton();
    } else {
        setTimeout(waitForSecomapp, 100);
    }
}

window.addEventListener('load', waitForSecomapp);

// Fallback: create the button after 5 seconds if needed
setTimeout(createAddToCartButton, 5000);

Pro Tips #

• Check Secomapp's Docs: Some apps fire a custom event when they're ready (like secomapp-freegifts-ready). If available, use that instead of polling for smoother performance:

  window.addEventListener('secomapp-freegifts-ready', () => {
      // Show or create your button here
  });
  

• Test Edge Cases: Make sure to test scenarios where the app loads slowly or fails to load entirely—your fallback timeout ensures users can still add items to cart.

内容的提问来源于stack exchange，提问作者Marco Mattiello