Shopping cart to send out email to me when “purchase button” is clicked. PLS

问题

That is all I have, I managed to create the cart (with online training and help), but it feels impossible to me to be able to send out the list of items in the cart (and price) to my email when clients click on the ORDINA button. Any help?

I've tried mailto but it won't work, I have 0 idea on how to do this, please I would love to understand

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

function ready() {
    var removeCartItemButtons = document.getElementsByClassName('btn-danger')
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        var button = removeCartItemButtons[i]
        button.addEventListener('click', removeCartItem)
    }

    var quantityInputs = document.getElementsByClassName('cart-quantity-input')
    for (var i = 0; i < quantityInputs.length; i++) {
        var input = quantityInputs[i]
        input.addEventListener('change', quantityChanged)
    }

    var addToCartButtons = document.getElementsByClassName('shop-item-button')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
    }

    document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}

function purchaseClicked() {
    alert('Grazie per il tuo ordine')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    while (cartItems.hasChildNodes()) {
        cartItems.removeChild(cartItems.firstChild)
    }
    updateCartTotal()
}

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    updateCartTotal()
}

function quantityChanged(event) {
    var input = event.target
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1
    }
    updateCartTotal()
}

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
    var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
    addItemToCart(title, price, imageSrc)
    updateCartTotal()
}

function addItemToCart(title, price, imageSrc) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            alert('Già inserito, modifica la quantità nella sezione ordine')
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">RIMUOVI</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal() {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')
    var total = 0
    for (var i = 0; i < cartRows.length; i++) {
        var cartRow = cartRows[i]
        var priceElement = cartRow.getElementsByClassName('cart-price')[0]
        var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
        var price = parseFloat(priceElement.innerText.replace('€', ''))
        var quantity = quantityElement.value
        total = total + (price * quantity)
    }
    total = Math.round(total * 100) / 100 + 1.5
    document.getElementsByClassName('cart-total-price')[0].innerText = '€' + total 
}

<body>
  
            <h2 class="band-name band-name-large">ORDER</h2>
       </header>
        <section class="container content-section">
            <h2 class="section-header">Pizze</h2>
            <div class="shop-items">
                <div class="shop-item">
                    <span class="shop-item-title">Margherita</span>
                    <img class="shop-item-image" src="5.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">€3.50</span>
                        <button class="btn btn-primary shop-item-button" type="button">ORDINA</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Viennese</span>
                    <img class="shop-item-image" src="5.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">€4.50</span>
                        <button class="btn btn-primary shop-item-button"type="button">ORDINA</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Contadina</span>
                    <img class="shop-item-image" src="5.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">€4.50</span>
                        <button class="btn btn-primary shop-item-button" type="button">ORDINA</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Norcia e Funghi</span>
                    <img class="shop-item-image" src="5.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">€5.00</span>
                        <button class="btn btn-primary shop-item-button" type="button">ORDINA</button>
                    </div>
                </div>
            </div>
        </section>
        <section class="container content-section">
            <h2 class="section-header">ORDINE</h2>
            <div class="cart-row">
                <span class="cart-item cart-header cart-column">PIZZA</span>
                <span class="cart-price cart-header cart-column">PREZZO</span>
                <span class="cart-quantity cart-header cart-column">QUANTITA'</span>
            </div>
            <div class="cart-items">
            </div>
            <div class="cart-total">
                <strong class="cart-total-title">Totale</strong>
                <span class="cart-total-price">€0</span>
            </div>
            <button class="btn btn-primary btn-purchase" type="button">ORDINA</button>
        </section>
    

        <footer class="main-footer">
            <div class="container main-footer-container">
                <h3 class="band-name">Pizza</h3>
                <ul class="nav footer-nav">
                
                    </li>
                </ul>
            </div>
        </footer>
    </body>
</html>

回答1:

javascipt from the browser cannot send email it self:

they can have 2 scenario for this:

is to call an web-api on a server who can send smtp email
can invoke a link via email-to which needs client-user himself send email with his/her email-client-software

like this:

<a href="mailto:email@example.com?cc=secondemail@example.com, anotheremail@example.com, &bcc=lastemail@example.com&subject=Mail from our Website&body=Some body text here">Send Email</a>

in this scenario you can make the purcache link to have this cart content in its href-body attribute.

because you call The updateTotalFunction each time your cart content has get changed. you need to place these code at the end of the function declaration :

Code Snipped:

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

function ready() {
    var removeCartItemButtons = document.getElementsByClassName('btn-danger')
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        var button = removeCartItemButtons[i]
        button.addEventListener('click', removeCartItem)
    }

    var quantityInputs = document.getElementsByClassName('cart-quantity-input')
    for (var i = 0; i < quantityInputs.length; i++) {
        var input = quantityInputs[i]
        input.addEventListener('change', quantityChanged)
    }

    var addToCartButtons = document.getElementsByClassName('shop-item-button')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
    }

//    document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}

function purchaseClicked() {
    alert('Grazie per il tuo ordine')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    while (cartItems.hasChildNodes()) {
        cartItems.removeChild(cartItems.firstChild)
    }
    updateCartTotal()
}

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    updateCartTotal()
}

function quantityChanged(event) {
    var input = event.target
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1
    }
    updateCartTotal()
}

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
    var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
    addItemToCart(title, price, imageSrc)
    updateCartTotal()
}

function addItemToCart(title, price, imageSrc) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            alert('Già inserito, modifica la quantità nella sezione ordine')
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">RIMUOVI</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal() {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')
    var total = 0
    for (var i = 0; i < cartRows.length; i++) {
        var cartRow = cartRows[i]
        var priceElement = cartRow.getElementsByClassName('cart-price')[0]
        var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
        var price = parseFloat(priceElement.innerText.replace('€', ''))
        var quantity = quantityElement.value
        total = total + (price * quantity)
    }
    total = Math.round(total * 100) / 100 + 1.5
    document.getElementsByClassName('cart-total-price')[0].innerText = '€' + total;
    
    let cartContentElements =document.getElementsByClassName('cart-column');
    let cartContent = "";
    for(let i=0;i< cartContentElements.length; i++){
        cartContent += cartContentElements[i].innerHTML;
    }
    cartContent = cartContent.replace(/(<([^>]+)>)/ig,'').replace(/ /g,'');
    cartContent = encodeURI(cartContent);
    //console.log(cartContent);
    
    document.getElementById("purcache-link").href = "mailto:shopmanager@shop.com?&subject=Cart Items for Purcache&body=" + cartContent ;
}

<body>
  
            <h2 class="band-name band-name-large">ORDER</h2>
       </header>
        <section class="container content-section">
            <h2 class="section-header">Pizze</h2>
            <div class="shop-items">
                <div class="shop-item">
                    <span class="shop-item-title">Margherita</span>
                    <img class="shop-item-image" src="5.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">€3.50</span>
                        <button class="btn btn-primary shop-item-button" type="button">ORDINA</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Viennese</span>
                    <img class="shop-item-image" src="5.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">€4.50</span>
                        <button class="btn btn-primary shop-item-button"type="button">ORDINA</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Contadina</span>
                    <img class="shop-item-image" src="5.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">€4.50</span>
                        <button class="btn btn-primary shop-item-button" type="button">ORDINA</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Norcia e Funghi</span>
                    <img class="shop-item-image" src="5.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">€5.00</span>
                        <button class="btn btn-primary shop-item-button" type="button">ORDINA</button>
                    </div>
                </div>
            </div>
        </section>
        <section class="container content-section">
            <h2 class="section-header">ORDINE</h2>
            <div class="cart-row">
                <span class="cart-item cart-header cart-column">PIZZA</span>
                <span class="cart-price cart-header cart-column">PREZZO</span>
                <span class="cart-quantity cart-header cart-column">QUANTITA'</span>
            </div>
            <div class="cart-items cart-content">
            </div>
            <div class="cart-total cart-content">
                <strong class="cart-total-title">Totale</strong>
                <span class="cart-total-price">€0</span>
            </div>
            <!--<button class="btn btn-primary btn-purchase" type="button">ORDINA</button>-->
            <a  id='purcache-link'>ORDINA</a>
        </section>
    

        <footer class="main-footer">
            <div class="container main-footer-container">
                <h3 class="band-name">Pizza</h3>
                <ul class="nav footer-nav">
                
                    </li>
                </ul>
            </div>
        </footer>
    </body>

your receiving email contained URIEncoded Cart which you have to decode it by yourself.

good luck.

来源：https://stackoverflow.com/questions/65036771/shopping-cart-to-send-out-email-to-me-when-purchase-button-is-clicked-pls

标签

javascript

html

jquery