if (!window.Giftify) { window.Giftify = { checkoutButton: false, validationErrors: {}, init: function() { this.reset(); this.insertStyle(); this.initiateButton(); }, reset: function() { var xhr = new XMLHttpRequest; xhr.open('POST', window.Shopify.routes.root + 'cart/update.js'); xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); xhr.send(JSON.stringify({ attributes: { 'Giftify • To': '', 'Giftify • From': '', 'Giftify • Message': '' } })); }, insertStyle: function() { var head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; var validationCSS = '.giftify-popup__field--error input, .giftify-popup__field--error textarea { border-color: #dc3545; } .giftify-popup__error { color: #dc3545; font-size: 12px; margin-top: 4px; display: none; } .giftify-popup__field--error .giftify-popup__error { display: block; }'; style.appendChild(document.createTextNode(' .giftify-wrapper { width: 100% } .giftify-button { margin: 25px 0px 5px 0px; display: inline-block; transition: all .2s ease; text-decoration: none!important; } .giftify-button span { background: #ffffff; color: #000000; border-radius: 50px; border: 2px solid #ffffff; padding: 5px 5px 5px 5px; display: flex; white-space: nowrap; transition: all .2s ease; align-items: center; justify-content: center; } .giftify-button svg { fill: #000000; display: inline-block; margin-right: 5px; width: 24px; height: 24px; transition: all .2s ease; } .giftify-button:hover span { background: #ffffff; color: #000000; border-color: #000000; } .giftify-button:hover svg { fill: #000000; } .giftify-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; opacity: 0; visibility: hidden; pointer-events: none; transition: all .5s ease; } .giftify-popup.giftify-popup--loading { pointer-events: none; } .giftify-popup.giftify-popup--active { opacity: 1; visibility: visible; pointer-events: all; } .giftify-popup.giftify-popup--active .giftify-popup__inside { transition-delay: .3s; opacity: 1; margin-top: 0; } .giftify-popup__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 1; display: block!important; } .giftify-popup__inside { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 90%; max-width: 460px; display: flex; align-items: stretch; z-index: 2; transition: margin .5s Cubic-bezier(0.3, 0, 0.3, 1), opacity .3s ease; margin-top: 50px; opacity: 0; } .giftify-popup__close { position: absolute; top: 0; right: 0; width: 48px; height: 48px; z-index: 3; display: flex; align-items: center; justify-content: center; } .giftify-popup__close svg { fill: #191919; width: 24px; } .giftify-popup__grid { display: flex; width: 100%; } .giftify-popup__right { width: 50%; display: block!important; background-size: cover; background-position: center; background-repeat: no-repeat; } .giftify-popup__left { width: 100%; padding: 50px 50px 75px; position: relative; } .giftify-popup__header { text-align: center; } .giftify-popup__header img { max-height: 50px; } .giftify-popup__title { color: #191919; font-size: 32px; margin: 20px 0; } .giftify-popup__steps + div { font-size: 13px; position: absolute; left: 0; width: 100%; bottom: 10px; text-align: center; } .giftify-popup__steps + div a { color: #191919; border-bottom: 1px solid transparent; } .giftify-popup__steps + div a:hover { border-bottom-color: #191919; } .giftify-popup__step { display: none; } .giftify-popup__step--active { display: block; } .giftify-popup__action { margin-top: 20px; display: flex; align-items: center; justify-content: center; } .giftify-popup__button { margin: 5px; display: inline-block; transition: all .2s ease; padding: 0; border: 0; border-radius: 0!important; background: none!important; cursor: pointer; } .giftify-popup__button span { border-radius: 50px; padding: 15px 20px 15px 20px; display: flex; white-space: nowrap; transition: all .2s ease; position: relative; } .giftify-popup__next span { background: #000000; color: #ffffff; border: 2px solid #000000; position: relative; } .giftify-popup__next:hover span { background: #ffffff; color: #000000; border-color: #000000; } .giftify-popup__prev span { background: #000000; color: #ffffff; border: 2px solid #000000; } .giftify-popup__prev:hover span { background: #ffffff; color: #000000; border-color: #000000; } .giftify-popup__next span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border: 3px solid #ffffff; border-top: 3px solid transparent!important; border-radius: 50%; margin-left: -10px; margin-top: -10px; opacity: 0; -webkit-animation: giftify_spin .7s linear infinite; animation: giftify_spin .7s linear infinite; } @-webkit-keyframes giftify_spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes giftify_spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } .giftify-popup__step ol { counter-reset: giftify; list-style: none; padding: 0; } .giftify-popup__step li { color: #191919; font-size: 16px; counter-increment: giftify; position: relative; padding-left: 30px; display: block; } .giftify-popup__step li + li { margin-top: 5px; } .giftify-popup__step li::before { content: counter(giftify)"."; font-weight: bold; top: 0; left: 0; position: absolute; } .giftify-popup__label { font-weight: bold; text-align: center; } .giftify-popup__field { margin: 5px 0 10px; } .giftify-popup__grid > .giftify-popup__field { width: 50%; padding-right: 2px; } .giftify-popup__grid > .giftify-popup__field + .giftify-popup__field { padding-left: 2px; } .giftify-popup__field > * { width: 100%; } .giftify-popup__field input, .giftify-popup__field textarea { padding: 10px; border: 1px solid #d2d2d2; } .giftify-popup--loading .giftify-popup__next span { color: transparent!important; } .giftify-popup--loading .giftify-popup__next span::after { opacity: 1; } ' + validationCSS)); head.appendChild(style); }, validateEmail: function(email) { const trimmedEmail = email.trim(); const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/; if (!emailRegex.test(trimmedEmail)) { return false; } if (trimmedEmail.endsWith('.')) { return false; } const parts = trimmedEmail.split('@'); if (parts.length !== 2) { return false; } const domain = parts[1]; const domainParts = domain.split('.'); if (domainParts.length < 2) { return false; } const tld = domainParts[domainParts.length - 1]; if (tld.length < 2 || !/^[a-zA-Z]+$/.test(tld)) { return false; } if (domainParts.some(part => part.length === 0)) { return false; } return true; }, validateField: function(field) { const fieldWrapper = field.closest('.giftify-popup__field'); const fieldName = field.name; const fieldValue = field.value.trim(); let isValid = true; let errorMessage = ''; fieldWrapper.classList.remove('giftify-popup__field--error'); this.validationErrors[fieldName] = null; if (!fieldValue && field.hasAttribute('required')) { isValid = false; errorMessage = 'This field is required'; } else if (field.type === 'email' && fieldValue && !this.validateEmail(fieldValue)) { isValid = false; errorMessage = 'Please enter a valid email address'; } if (!isValid) { fieldWrapper.classList.add('giftify-popup__field--error'); this.validationErrors[fieldName] = errorMessage; this.showFieldError(fieldWrapper, errorMessage); } else { this.hideFieldError(fieldWrapper); } return isValid; }, showFieldError: function(fieldWrapper, message) { let errorEl = fieldWrapper.querySelector('.giftify-popup__error'); if (!errorEl) { errorEl = document.createElement('div'); errorEl.className = 'giftify-popup__error'; fieldWrapper.appendChild(errorEl); } errorEl.textContent = message; }, hideFieldError: function(fieldWrapper) { const errorEl = fieldWrapper.querySelector('.giftify-popup__error'); if (errorEl) { errorEl.remove(); } }, validateForm: function(form) { const fields = form.querySelectorAll('input[required], input[type="email"], textarea[required]'); let isFormValid = true; fields.forEach(field => { if (!this.validateField(field)) { isFormValid = false; } }); return isFormValid; }, initiateButton: function() { var wrappers = document.querySelectorAll('.giftify-wrapper'), checkoutButtons = document.querySelectorAll('[name="checkout"]'); if (wrappers.length) { this.renderButton(); } else if (checkoutButtons.length) { this.checkoutButton = checkoutButtons[0]; checkoutButtons.forEach(function(checkoutButton) { var el = document.createElement('div'); el.classList.add('giftify-wrapper'); checkoutButton.parentNode.insertAfter(el, checkoutButton); }); this.renderButton(); } }, renderButton: function(wrappers = null) { if (!wrappers) { wrappers = document.querySelectorAll('.giftify-wrapper'); } if (wrappers && wrappers.length) { wrappers.forEach(function(wrapper) { if (!wrapper.querySelector('a')) { buttonEl = document.createElement('a'); buttonEl.href = '#'; buttonEl.innerHTML = `<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 9 2 C 7.3545455 2 6 3.3545455 6 5 C 6 5.3884621 6.2790206 5.6579606 6.4160156 6 L 2 6 L 2 7 L 2 12 L 3 12 L 3 19.099609 C 3 20.132943 3.8670573 21 4.9003906 21 L 19.099609 21 C 20.132943 21 21 20.132943 21 19.099609 L 21 12 L 22 12 L 22 6 L 17.583984 6 C 17.720979 5.6579606 18 5.3884621 18 5 C 18 3.3545455 16.645455 2 15 2 C 14.084324 2 13.268996 2.4283349 12.716797 3.0839844 L 12 3.8007812 L 11.283203 3.0839844 C 10.731004 2.4283349 9.9156763 2 9 2 z M 9 4 C 9.5545455 4 10 4.4454545 10 5 C 10 5.5545455 9.5545455 6 9 6 C 8.4454545 6 8 5.5545455 8 5 C 8 4.4454545 8.4454545 4 9 4 z M 15 4 C 15.554545 4 16 4.4454545 16 5 C 16 5.5545455 15.554545 6 15 6 C 14.445455 6 14 5.5545455 14 5 C 14 4.4454545 14.445455 4 15 4 z M 4 8 L 9 8 L 15 8 L 20 8 L 20 10 L 4 10 L 4 8 z M 5 12 L 11 12 L 11 19 L 5 19 L 5 12 z M 13 12 L 19 12 L 19 19 L 13 19 L 13 12 z"/></svg> I want to send this as a gift</span>`; buttonEl.classList.add('giftify-button'); buttonEl.addEventListener('click', window.Giftify.openPopup); wrapper.appendChild(buttonEl); } }); if (!document.querySelector('.giftify-popup')) { var saved = { to: { name: '', email: '' }, from: { name: '', email: '' }, message: '' }; if (localStorage.getItem('giftify')) { saved = JSON.parse(localStorage.getItem('giftify')); } var popupHTML = ' <div class="giftify-popup__bg"></div> <div class="giftify-popup__inside"> <a href="#" class="giftify-popup__close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M 38.982422 6.9707031 A 2.0002 2.0002 0 0 0 37.585938 7.5859375 L 24 21.171875 L 10.414062 7.5859375 A 2.0002 2.0002 0 0 0 8.9785156 6.9804688 A 2.0002 2.0002 0 0 0 7.5859375 10.414062 L 21.171875 24 L 7.5859375 37.585938 A 2.0002 2.0002 0 1 0 10.414062 40.414062 L 24 26.828125 L 37.585938 40.414062 A 2.0002 2.0002 0 1 0 40.414062 37.585938 L 26.828125 24 L 40.414062 10.414062 A 2.0002 2.0002 0 0 0 38.982422 6.9707031 z"/></svg></a> <div class="giftify-popup__grid"> <div class="giftify-popup__left"> <div class="giftify-popup__header"> <img src="https://cdn.shopify.com/s/files/1/0537/4532/0126/files/Aleeza_Paris_Logo_Gold_2_NEW.jpg?v=1738000831" /> <div class="giftify-popup__title">SENDING A GIFT IS EASY!</div> </div> <div class="giftify-popup__steps"> <div class="giftify-popup__step giftify-popup__step--active" data-step="1"> <ol> <li>First, add your recipient’s information.</li> <li>Then complete purchase using the recipient’s address.</li> <li>Within 24 hours, they will receive an email with your gift message.</li> <li>And you'll receive order confirmation email for your files.</li> </ol> <div class="giftify-popup__action"> <button class="giftify-popup__button giftify-popup__next" > <span>SEND YOUR GIFT</span> </button> </div> </div> <div class="giftify-popup__step" data-step="2"> <form id="giftify-popup__form" autocomplete="off"> <div class="giftify-popup__label">To</div> <div class="giftify-popup__grid"> <div class="giftify-popup__field"> <input type="text" name="rname" placeholder="Recipient Full Name" value="{saved.to.name}" required /> </div> <div class="giftify-popup__field"> <input type="email" name="remail" placeholder="Recipient Email" value="{saved.to.email}" required /> </div> </div> <div class="giftify-popup__label">From</div> <div class="giftify-popup__grid"> <div class="giftify-popup__field"> <input type="text" name="yname" placeholder="Your Full Name" value="{saved.from.name}" required /> </div> <div class="giftify-popup__field"> <input type="email" name="yemail" placeholder="Your Email" value="{saved.from.email}" required /> </div> </div> <div class="giftify-popup__label">Message</div> <div class="giftify-popup__field"> <textarea name="ymessage" placeholder="Your Message">{saved.message}</textarea> </div> <div class="giftify-popup__action"> <button class="giftify-popup__button giftify-popup__prev"> <span>BACK</span> </button> <button class="giftify-popup__button giftify-popup__next" type="submit"> <span>CHECKOUT</span> </button> </div> </form> </div> </div> <div>Powered by <a href="https://minionmade.com/shopify-apps/giftify" target="_blank">Giftify</a></div> </div> </div> </div> '; popupHTML = popupHTML.replace('{saved.to.name}', saved.to.name); popupHTML = popupHTML.replace('{saved.to.email}', saved.to.email); popupHTML = popupHTML.replace('{saved.from.name}', saved.from.name); popupHTML = popupHTML.replace('{saved.from.email}', saved.from.email); popupHTML = popupHTML.replace('{saved.message}', saved.message); var popupEl = document.createElement('div'); popupEl.classList.add('giftify-popup'); popupEl.innerHTML = popupHTML; document.body.appendChild(popupEl); this.initiatePopupListeners(); } } }, initiatePopupListeners: function() { document.querySelector('.giftify-popup__bg').addEventListener('click', this.closePopup); document.querySelector('.giftify-popup__close').addEventListener('click', this.closePopup); document.querySelector('.giftify-popup__step[data-step="1"] .giftify-popup__next').addEventListener('click', this.buttonNext); document.querySelector('.giftify-popup__step[data-step="2"] .giftify-popup__prev').addEventListener('click', this.buttonPrev); document.querySelector('.giftify-popup__step[data-step="2"] form').addEventListener('submit', this.submitGift); const form = document.querySelector('.giftify-popup__step[data-step="2"] form'); const fields = form.querySelectorAll('input[required], input[type="email"], textarea[required]'); fields.forEach(field => { field.addEventListener('blur', () => { this.validateField(field); }); field.addEventListener('input', () => { const fieldWrapper = field.closest('.giftify-popup__field'); if (fieldWrapper.classList.contains('giftify-popup__field--error')) { fieldWrapper.classList.remove('giftify-popup__field--error'); this.hideFieldError(fieldWrapper); this.validationErrors[field.name] = null; } }); }); }, openPopup: function(e) { e.preventDefault(); var popup = document.querySelector('.giftify-popup'); if (popup) { popup.classList.add('giftify-popup--active'); } }, closePopup: function(e) { e.preventDefault(); var popup = document.querySelector('.giftify-popup'); if (popup) { popup.classList.remove('giftify-popup--active'); window.Giftify.validationErrors = {}; popup.querySelectorAll('.giftify-popup__field--error').forEach(field => { field.classList.remove('giftify-popup__field--error'); }); popup.querySelectorAll('.giftify-popup__error').forEach(error => { error.remove(); }); } }, buttonNext: function(e) { e.preventDefault(); var step = document.querySelector('.giftify-popup__step[data-step="1"]'); step.classList.remove('giftify-popup__step--active'); step.nextElementSibling.classList.add('giftify-popup__step--active'); }, buttonPrev: function(e) { e.preventDefault(); var step = document.querySelector('.giftify-popup__step[data-step="2"]'); step.classList.remove('giftify-popup__step--active'); step.previousElementSibling.classList.add('giftify-popup__step--active'); }, submitGift: function(e) { e.preventDefault(); var form = e.target; if (!window.Giftify..(form)) { const firstError = form.querySelector('.giftify-popup__field--error input, .giftify-popup__field--error textarea'); if (firstError) { firstError.focus(); } return; } var attrs = { to: { name: form.rname.value.trim(), email: form.remail.value.trim() }, from: { name: form.yname.value.trim(), email: form.yemail.value.trim() }, message: form.ymessage.value.trim() }; localStorage.setItem('giftify', JSON.stringify(attrs)); document.querySelector('.giftify-popup').classList.add('giftify-popup--loading'); var xhr = new XMLHttpRequest; xhr.open('POST', window.Shopify.routes.root + 'cart/update.js'); xhr.onload = function() { if (window.Giftify.checkoutButton) { window.Giftify.checkoutButton.click(); } else { location.href = '/checkout'; } }; xhr.onerror = function() { document.querySelector('.giftify-popup').classList.remove('giftify-popup--loading'); alert('An error occurred. Please try again.'); }; xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); xhr.send(JSON.stringify({ attributes: { 'Giftify • To': attrs.to.name + ' (' + attrs.to.email + ')', 'Giftify • From': attrs.from.name + ' (' + attrs.from.email + ')', 'Giftify • Message': (attrs.message ? attrs.message : '-') } })); } }; window.Giftify.init(); }