Блог

Главная - Вопросы по программированию - Корзина для покупок, чтобы отправлять мне электронное письмо при нажатии кнопки «Купить». ПОЖАЛУЙСТА

Корзина для покупок, чтобы отправлять мне электронное письмо при нажатии кнопки «Купить». ПОЖАЛУЙСТА

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Это все, что у меня есть, мне удалось создать корзину (с помощью онлайн-обучения и справки), но мне кажется невозможным отправлять список товаров в корзине (и цену) на мою электронную почту, когда клиенты нажимают на кнопку ORDINA. Любая помощь?

Я пробовал mailto, но это не сработает, у меня 0 идей о том, как это сделать, пожалуйста, я хотел бы понять

 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. Клиентский JS не может отправлять электронные письма сам по себе. Вам нужен доступ к почтовому серверу. Вы можете либо отправить AJAX-запрос на свой локальный сервер (и написать код PHP / ASP / Python и т. Д., Чтобы самостоятельно отправлять электронные письма), либо вы можете заплатить за стороннюю услугу, которая сделает это за вас (например, SendGrid)

Ответ №1:

javascipt из браузера не может отправить электронное письмо самостоятельно:

у них может быть 2 сценария для этого:

  • это вызвать веб-api на сервере, который может отправлять электронную почту smtp
  • можно вызвать ссылку по электронной почте, на которую требуется, чтобы клиент-пользователь сам отправлял электронное письмо со своим почтовым клиентским программным обеспечением

вот так:

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

в этом сценарии вы можете создать ссылку purcache, чтобы содержимое корзины было указано в атрибуте href-body.

потому что вы вызываете функцию updateTotalFunction каждый раз, когда меняется содержимое вашей корзины. вам нужно поместить этот код в конец объявления функции :

Обрезанный код:

 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?amp;subject=Cart Items for Purcacheamp;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>

полученное вами электронное письмо содержало корзину с URIEncoded, которую вы должны расшифровать самостоятельно.

удачи.

Комментарии:

1. допустим, я хочу добавить ссылку href mailto, как мне сделать так, чтобы она уже была заполнена информацией, вставленной в корзину? это моя главная проблема

2. я привожу пример в ответе.

3. можете ли вы предоставить фрагмент кода? это не работает для меня, но мне нравится идея ://

4. я работаю над этим, у него есть недостаток, я исправлю его через несколько минут

5. Мне очень жаль, я пытаюсь понять, но я не понимаю, что вы имеете в виду именно? не могли бы вы помочь мне немного больше?

Метки: ,