index.html

/* source: <cosmo.checkout-ui-settings> */
    // WARNING: THE USAGE OF CUSTOM SCRIPTS IS NOT SUPPORTED. VTEX IS NOT LIABLE FOR ANY DAMAGES THIS MAY CAUSE. THIS MAY BREAK YOUR STORE AND STOP SALES. IN CASE OF ERRORS, PLEASE DELETE THE CONTENT OF THIS SCRIPT.
    window.onload = () => {
    
      const addElements = () => {
        const items = window?.API?.orderForm?.items
        if (document) {
    
          // Add header title
          const heading = document.createElement('h1')
          heading.classList.add('heading');
          heading.textContent = 'Your Cart'
          const headingHtml = document.getElementsByClassName('checkout-container')[0]
          headingHtml.prepend(heading)
    
         // Add unit price heading
         const unitTh = document.createElement('th')
         unitTh.innerHTML = 'Unit Price'
         unitTh.classList.add('unit-price')
    
          const quantityTh = document.querySelector('th.quantity')
          quantityTh?.parentNode.insertBefore(unitTh, quantityTh)
    
          // CHECKOUT BUTTON AREA
    
          // Create Order Summary title
          const orderSummary = document.createElement('h2')
          orderSummary.classList.add('order-summary')
          orderSummary.textContent = 'Order Summary'
          document.querySelector('.accordion-inner').prepend(orderSummary)
    
          // Move coupon field
          const discountRow = document.createElement('tr')
          const couponFieldTd = document.createElement('td')
          const discountTd =  document.createElement('td')
          discountTd.innerText = 'Discount'
          discountTd.classList.add('discount')
          const couponForm = document.querySelector('.coupon.summary-coupon.pull-right')
          couponFieldTd.appendChild(couponForm)
          discountRow.classList.add('discount-row')
          discountRow.appendChild(discountTd)
          discountRow.appendChild(couponFieldTd)
    
          // Create tax row
          const taxRow = document.createElement('tr')
          const taxTextTd = document.createElement('td')
          const taxNumberTd =  document.createElement('td')
          taxTextTd.innerText = 'Tax'
          taxTextTd.classList.add('tax')
          taxNumberTd.innerText = '-'
          taxNumberTd.classList.add('tax-number')
          taxRow.appendChild(taxTextTd)
          taxRow.appendChild(taxNumberTd)
    
          document.querySelector('.totalizers-list').appendChild(discountRow)
          document.querySelector('.totalizers-list').appendChild(taxRow)
    
          // Make accordion
    
          const accordionBox = document.createElement('div')
          accordionBox.classList.add('accordion-box')
    
          const accordionButtonBox = document.createElement('div')
          accordionButtonBox.classList.add('accordion-button-box')
    
          const accordionButton = document.createElement('button')
          accordionButton.classList.add('accordion')
          const accordionText = document.createElement('p')
          accordionText.textContent = 'Show order summary'
    
          const toggleDiv = document.createElement('div')
          const toggleImage = document.createElement('span')
          toggleImage.classList.add('arrow')
          toggleImage.classList.add('up')
          toggleDiv.appendChild(toggleImage)
    
          accordionButton.appendChild(accordionText)
          accordionButton.appendChild(toggleDiv)
    
          const totalAmount = document.querySelector('.new-product-price').innerText
          const totalAmountText = document.createElement('div')
          totalAmountText.textContent = totalAmount
          totalAmountText.classList.add('total-amount-text')
    
          accordionButtonBox.appendChild(accordionButton)
          accordionButtonBox.appendChild(totalAmountText)
    
          const accordionPanel = document.querySelector('.accordion-inner')
          accordionPanel.classList.add('panel')
    
          accordionBox.appendChild(accordionButtonBox)
          accordionBox.appendChild(accordionPanel)
    
          document.querySelector('.summary-template-holder').prepend(accordionBox)
    
          accordionButton.addEventListener('click', function() {
    
              accordionButton.classList.toggle('active')
              toggleImage.classList.toggle('down')
    
              if (accordionButton.classList.contains('active')) {
                accordionPanel.style.display = 'block'
                totalAmountText.style.display = 'none'
                accordionText.textContent = 'Hide order summary'
              } else {
                accordionPanel.style.display = 'none'
                totalAmountText.style.display = 'block'
                accordionText.textContent = 'Show order summary'
              }
            });
    
          // Create modal
    
          const quoteButton = document.createElement('button')
          quoteButton.textContent = 'Need a quote?'
          quoteButton.classList.add('quote-button')
    
          const modal = document.createElement('div')
          modal.classList.add('quote-modal')
    
          const modalContent = document.createElement('div')
          modalContent.classList.add('modal-content')
    
          modal.appendChild(modalContent)
    
          const closeIcon = document.createElement('span')
          closeIcon.classList.add('close-icon')
    
          const modalText = document.createElement('p')
          modalText.classList.add('modal-text')
          modalText.innerHTML = 'To request a quote, simply add the desired items to your cart and continue to checkout. Once at the final payment screen, you will have the option to <b>“REQUEST AN OFFICIAL QUOTE"</b> (if required) or select a payment method and <b>“PLACE ORDER”</b>.'
    
          modalContent.appendChild(closeIcon)
          modalContent.appendChild(modalText)
    
          document.querySelector('.cart-links-bottom').appendChild(quoteButton)
          document.querySelector('body').prepend(modal)
    
          // Modal functionality
    
          quoteButton.onclick = function() {
            modal.style.display = 'flex'
          }
    
          closeIcon.onclick = function() {
            modal.style.display = 'none'
          }
    
          window.onclick = function(event) {
            if (event.target == modal) {
              modal.style.display = 'none'
            }
          }
        }
      }
      // Timeout ensures that data is loaded before DOM manipulation
      setTimeout(addElements, 500);
    };
    
    
    /* source: <vtex.email-checkout-conflict> */
    window.checkEmailAuthConflictMessages = {
    
        en: {
            title:"Emails conflict",
            button:"Login",
            message:"We have identified that you probably used a different login email than the one you entered previously. Please log in again by clicking the button below."
        },
        es: {
            title:"Conflicto de correos electrónicos",
            button:"Ingressar",
            message:"Hemos identificado que probablemente utilizó una dirección de correo electrónico de inicio de sesión diferente a la que ingresó anteriormente. Vuelva a iniciar sesión haciendo clic en el botón de abajo."
        },
        ro: {
            title:"Conflict adresa email",
            button:"Loghează-te",
            message:"Am identificat că probabil ați folosit un alt e-mail de conectare decât cel introdus anterior. Vă rugăm să vă conectați din nou făcând clic pe butonul de mai jos."
        }
    }
    
    
    class checkEmailAuthConflict {
        constructor({} = {}) {
            this.orderForm = "";
        this.lang = "";
        }
    
        removeModal() {
            $(".checkEmailAuthConflict__modal").fadeOut("normal", function() {
                $(".checkEmailAuthConflict__modal").remove();
            });
        } 
    
        showModal() {
    
            const _this = this;
    
            $(".checkEmailAuthConflict__modal").remove();
    
            if(!_this.lang) return false;
            if(!checkEmailAuthConflictMessages[this.lang]) this.lang = "en";
            let modal = `
                <div class="checkEmailAuthConflict__modal">
                    <div class="checkEmailAuthConflict__modal--bg"></div>
                    <div class="checkEmailAuthConflict__modal--wrap">
                        <h4 class="checkEmailAuthConflict__modal--title">${checkEmailAuthConflictMessages[this.lang].title}</h4>
                        <p class="checkEmailAuthConflict__modal--text">${checkEmailAuthConflictMessages[this.lang].message}</p>
                        <button class="checkEmailAuthConflict__modal--button js-checkEmailAuthConflict__modal--button">${checkEmailAuthConflictMessages[this.lang].button}</button>
                    </div>
                </div>
            `;
    
            $("body").append(modal);
    
        }
    
        bind() {
            const _this = this;
    
            $("body").on("click", ".js-checkEmailAuthConflict__modal--button", function(e) {
                e.preventDefault();
                $(this).addClass("js-loading");
                _this.changeUser();
            })
    
        }
    
        changeUser() {
            const _this = this;
    
            $.ajax(`/checkout/changeToAnonymousUser/${_this.orderForm.orderFormId}`)
            .done(function() {
                _this.removeModal();
                vtexid.start();
            });
        }
    
        validate() {
            const _this = this;
            try {
                if( 
                    _this.orderForm && 
                    _this.orderForm.clientProfileData && 
                    _this.orderForm.clientProfileData.email 
                ) {
                    fetch('/api/vtexid/pub/authenticated/user', {credentials: 'include'})
                    .then(response => response.json())
                    .then(function(response) {
                        if(!response) return false;
                        let user = response.user;
                        if(_this.orderForm.clientProfileData.email != user) {
                            _this.showModal();
                        }
                    })
                }
            } catch(e) {
                console.error(e)
            } 
        }
    
        init() {
            const _this = this;
            $(window).one('orderFormUpdated.vtex', function(_, orderForm) {
                if (orderForm.userType === 'callCenterOperator') return
                _this.orderForm = orderForm;
                _this.lang = vtex ? vtex.i18n.locale : "en";
                try {
                    _this.validate();
                    _this.bind();
                } catch(e) {
                    console.error(e)
                } 
            });
    
            $(window).on('authenticatedUser.vtexid closed.vtexid', function() {
                _this.orderForm = vtexjs.checkout.orderForm;
                if (_this.orderForm.userType === 'callCenterOperator') return
                try {
                    _this.validate();
                } catch(e) {
                    console.error(e)
                } 
            });
        }
    }