// Script to add to cart, display popup then redirect to custom checkout URL document.addEventListener('DOMContentLoaded', function () { // Add the Montserrat font from Google Fonts const fontLink = document.createElement('link'); fontLink.rel = 'stylesheet'; fontLink.href = 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'; document.head.appendChild(fontLink); // Create the popup and add it to the document function createPopup() { const popupOverlay = document.createElement('div'); popupOverlay.id = 'checkout-popup-overlay'; popupOverlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; `; // Create the popup content that exactly matches the image const popupContent = document.createElement('div'); popupContent.style.cssText = ` width: 450px; max-width: 90%; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); `; popupContent.innerHTML = `

Important information

YOU BENEFIT FROM THE SPECIAL OFFER:

1 PRODUCT PURCHASED = 1 FREE

Order now to enjoy 2 products for the price of 1! Limited quantity

Redirecting to the payment page in 5 seconds...

`; popupOverlay.appendChild(popupContent); document.body.appendChild(popupOverlay); return popupOverlay; } // Create the popup const popup = createPopup(); // Function to open the popup and start the countdown function openPopup() { popup.style.opacity = '1'; popup.style.visibility = 'visible'; // Retrieve the checkout URL from the product metadata const checkoutUrlMeta = document.querySelector('meta[property="product:checkout_url"]'); const checkoutUrl = checkoutUrlMeta ? checkoutUrlMeta.content: null; if (checkoutUrl) { // Initialize the counter let secondsLeft = 5; const countdownElement = document.getElementById('countdown-timer'); // Update the counter every second const countdownInterval = setInterval(function() { secondsLeft--; countdownElement.textContent = secondsLeft; // When the countdown reaches 0, redirect if (secondsLeft <= 0) { clearInterval(countdownInterval); window.location.href = checkoutUrl; } }, 1000); } else { console.error('Checkout URL not found for this product.'); // If the URL is not found, close the popup after 5 seconds setTimeout(function() { closePopup(); }, 5000); } } // Function to close the popup function closePopup() { popup.style.opacity = '0'; popup.style.visibility = 'hidden'; } // Intercept clicks on the document to close the popup if clicked outside popup.addEventListener('click', function (event) { if (event.target === popup) { closePopup(); } }); // Function to check if an element contains a certain text function elementContainsText(element, text) { return element.textContent.toLowerCase().indexOf(text.toLowerCase()) !== -1; } // Function to intercept add-to-cart forms function setupAddToCartInterception() { // List of selectors for add-to-cart forms const formSelectors = [ 'form[action*="/cart/add"]', '.product-form' ]; // Select all matching forms let forms = []; formSelectors.forEach(selector => { const elements = document.querySelectorAll(selector); if (elements.length) { forms = [...forms, ...Array.from(elements)]; } }); // For each form, add a submit event listener forms.forEach(form => { form.addEventListener('submit', function(event) { // Important: DO NOT prevent form submission // Allow the form to run normally to add the item to the cart // After a short period to allow time for the item to be added to the cart // and for the TikTok pixel to detect the event, we display the popup setTimeout(function() { openPopup(); }, 500); // 500ms should be enough for the add to cart to complete }); }); // If no form is found, we can look for the express purchase buttons if (forms.length === 0) { // List of selectors for quick buy buttons const buttonSelectors = [ 'button[name="add"]', 'input[name="add"]', '.shopify-payment-button__button', '.product-form__cart-submit' ]; let buttons = []; buttonSelectors.forEach(selector => { const elements = document.querySelectorAll(selector); if (elements.length) { buttons = [...buttons, ...Array.from(elements)]; } }); // Also look for buttons with the text "Order" document.querySelectorAll('button, a.btn, .pf-btn, [role="button"]').forEach(el => { if (elementContainsText(el, 'Order') || elementContainsText(el, 'order') || elementContainsText(el, 'Buy') || elementContainsText(el, 'buy')) { // Check if the button is not already in a form we are processing let isInForm = false; let parent = el.parentElement; while (parent) { if (forms.includes(parent)) { isInForm = true; break; } parent = parent.parentElement; } if (!isInForm) { buttons.push(el); } } }); // Add listeners to the found buttons buttons.forEach(button => { button.addEventListener('click', function(event) { // For non-form buttons, we might have to leave the event //propagate so that Shopify's JS takes over // Show the popup after a delay to allow adding to cart setTimeout(function() { openPopup(); }, 1000); // A longer timeout to ensure the AJAX has time to execute }); }); } // Detect the end of adding to cart via Shopify's AJAX API // This works for themes that use Shopify's AJAX API document.addEventListener('cart:build', function() { // The cart:build event indicates that the cart has been modified // Open popup after adding to cart setTimeout(function() { openPopup(); }, 200); }); // For older themes that use the jQuery API if (typeof jQuery !== 'undefined') { jQuery(document).on('cart.requestComplete', function() { // Open popup after adding to cart setTimeout(function() { openPopup(); }, 200); }); } console.log('Add to cart interception configuration completed'); } // Run the setup after a short delay to ensure all items are loaded setTimeout(setupAddToCartInterception, 500); });

1 PRODUIT ACHETÉ = 2 OFFERTS

Contact Form

Contact form

Sign up for our newsletter for beauty tips.