时间戳

首页 > 解决方案 > 通过 html 和 javascript 发送自动邮件

javascript - 通过 html 和 javascript 发送自动邮件

问题描述

我做了一个网站来处理一个企业的订单。

如何通过电子邮件发送整个最终订单并自动发送而不打开新窗口发送邮件？

邮件的订单模板： 客户姓名：XXX
电话号码：XXX
居住城市：XXX 居住
地址：XXX
想要获取产品的日期：XXX
两列表格：订购产品名称和数量同一产品

代码应该是这样工作的：当有人按下“הוספה לסל”（对不起希伯来语的硬度）时，该商品被添加到购物车中，当客户按下“להזמנה”时，订单被发送到邮件。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Sap Patisserie | חנות</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css" />
        <script src="store.js" async></script>
    </head>
    <body>
        <header class="main-header">
                <nav class="main-nav nav">
                    <ul>
                        <li><a href="about.html">קצת עלי</a></li>
                        <li><a href="store.html">חנות</a></li>
                        <li><a href="index.html">בית</a>
                    </ul>
                </nav>
            <h1 class="sap-name sap-name-large">Sap Patisserie</h1>
        </header>
        <section class="container content-section">
            <h2 class="section-header">עוגות</h2>
            <div class="shop-items">
                <div class="shop-item">
                    <span class="shop-item-title">מארז סינבון</span>
                    <img class="shop-item-image" src="Images/food/cina.png">
                    <div class="shop-item-details">
                        <span class="shop-item-price">35₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title" id="koTitle">עוגת שמרים (קינדר / אוראו)</span>
                    <img class="shop-item-image" id="koImage" src="Images/food/kinder_oreo.jpg">
                    <div class="shop-item-details" id="koDetails">
                        <span class="shop-item-price" id="koPrice">45₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" id="koAdd" type="button">הוספה לסל</button>
                        <select id="koSelect">
                            <option value="kinder">קינדר</option>
                            <option value="oreo">אוראו</option>
                        </select>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">טארט דבש מלוח</span>
                    <img class="shop-item-image" src="Images/food/tart_honey.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">80₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">טארט שוקולד ואגוזי לוז</span>
                    <img class="shop-item-image" src="Images/food/tart_peanut.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">90₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">טארט תפוחים</span>
                    <img class="shop-item-image" src="Images/food/tart_apple.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">100₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
            </div>
        </section>
        </br>
        <section class="container content-section">
            <h2 class="section-header">פחזניות</h2>
            <div class="shop-items">
                <div class="shop-item">
                    <span class="shop-item-title">פחזניות במילוי קצפת</span>
                    <img class="shop-item-image" src="Images/food/pach_katz.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">55₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">פחזניות במילוי קראמבל במילוי קרם פטיסייר</span>
                    <img class="shop-item-image" src="Images/ani.png">
                    <div class="shop-item-details">
                        <span class="shop-item-price">55₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">פחזניות במילוי קרם פטיסייר מצופות בקרמל</span>
                    <img class="shop-item-image" src="Images/food/pach_caramel.png">
                    <div class="shop-item-details">
                        <span class="shop-item-price">55₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
            </div>
        </section>
        </br>
        <section class="container content-section">
            <h2 class="section-header">עוגיות</h2>
            <div class="shop-items">
                <div class="shop-item">
                    <span class="shop-item-title">מיני עוגיות אמסטרדם (18 יחידות)</span>
                    <img class="shop-item-image" src="Images/food/mini_amsterdam.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">30₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">מיני עוגיות שוקולד צ'יפס (18 יחידות)</span>
                    <img class="shop-item-image" src="Images/food/maaraz_chips.png">
                    <div class="shop-item-details">
                        <span class="shop-item-price">30₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">עוגיות ריבה (15 יחידות)</span>
                    <img class="shop-item-image" src="Images/food/maaraz_riba.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">35₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">עוגיות אלפחורס (22 יחידות)</span>
                    <img class="shop-item-image" src="Images/food/maaraz_alfa.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">45₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">מארז לבחירה (7 יחידות)</span>
                    <img class="shop-item-image" src="Images/ani.png">
                    <div class="shop-item-details">
                        <span class="shop-item-price">50₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">מארז עוגיות לבחירה (9 יחידות)</span>
                    <img class="shop-item-image" src="Images/food/maaraz_9.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">60₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">מארז קינדר בוקס</span>
                    <img class="shop-item-image" src="Images/food/kinder_box.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">60₪&lt;/span>
                        <button class="btn btn-primary shop-item-button" type="button">הוספה לסל</button>
                    </div>
                </div>
            </div>
        </section>
    </br>
    <form action="order.php" method="post">
        <section class="container content-section">
            <h2 class="section-header">הסל שלי</h2>
            <div class="cart-row">
                <span class="cart-quantity cart-header cart-column">כמות</span>
                <span class="cart-price cart-header cart-column">מחיר</span>
                <span class="cart-item cart-header cart-column">מוצר</span>
            </div>
            <div class="cart-items">
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td rowspan="2" width="50%">
                            <div class="cart-total">
                                <strong class="cart-total-title">סך הכל</strong>
                                <span class="cart-total-price">0₪&lt;/span>
                            </div>
                        </td>
                        <td align="right" width="25%">
                            <input type="text" id="inpPhone" size="10" required>
                            :טלפון
                        </td>
                        <td align="right" width="25%">
                            <input type="text" id="inpName" size="10" required>
                            :שם מלא
                        </td>
                    </tr>
                    <tr>
                        <td align="right" width="25%">
                            <input type="text" id="inpCity" size="10" required>
                            :עיר
                        </td>
                        <td align="right" width="25%">
                            <input type="text" id="inpAddress" size="10" required>
                            :כתובת
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right">
                            <input type="date" id="inpDate" required>
                            :תאריך אספקה (ניתן להזמין עד יומיים לפני)
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right">
                            </br>
                            אם הוזמנו מארז עוגיות/עוגת שמרים, יווצר עמך קשר בהמשך לגבי בחירת עוגיות/עוגה *
                        </td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-primary btn-purchase" type="submit" name="btnBuy">להזמנה</button>
        </section>
    </form>
        <footer class="main-footer">
            <div class="container main-footer-container">
                <li>
                    <a href="index.html">
                        <img src="Images/logo.png" height="150">
                    </a>
                </li>
                <ul class="nav footer-nav">
                    <li>
                        <a href="https://www.instagram.com/sap_patisserie/" target="_blank">
                            <img src="Images/instagram.png">
                        </a>
                    </li>
                    <li>
                        <a href="https://www.facebook.com/Sap-patisserie-105353121705622" target="_blank">
                            <img src="Images/facebook_c.png">
                        </a>
                    </li>
                    <li>
                        <a href="https://wa.me/972523390519?text=שלום ספיר, אשמח לשמוע קצת פרטים!"  target="_blank">
                            <img src="Images/whatsapp.png">
                        </a>
                    </li>
                </ul>
            </div>
            <div align="right" style="color:#adadad">
                Copyright Ⓒ 2021 Ofek Tzarfati (OTFH). All Right Reserved.
            </div>
        </footer>
    </body>
</html>

JavaScript：

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('תודה רבה שקנית :)')
    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('הוספת כבר את המוצר הזה לסל')
            return
        }
    }
    var cartRowContents = `
        
        <div class="cart-quantity cart-column">
            <button class="btn btn-danger" type="button">הסר</button>
            <input class="cart-quantity-input" type="number" value="1" id="quan_final">        
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-item cart-column">
            <span class="cart-item-title" name="title_final">${title}</span>
            <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
        </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
    document.getElementsByClassName('cart-total-price')[0].innerText = total + '₪'
}

标签： javascripthtml

解决方案

仅客户端 JavaScript 无法发送电子邮件。它在浏览器环境中高度锁定，不允许将电子邮件传递到电子邮件服务器所需的传出连接类型。

您可以使用外部服务从您的服务器端代码发送电子邮件（您使用 POST 请求将所需的电子邮件发送到服务的 API，并且该服务代表您发送电子邮件），但推荐这样的服务不是 Stack Overflow 的主题。

有些人可能还建议直接从 PHP 发送邮件，如果您的主机允许您发送邮件到您朋友的一个地址（如果您发送到外部地址，您会希望使用邮件服务以获得更好的交付率），这很好。

最后，正如评论中提到的 NoName 一样，最简单的选择可能是使用表单发送服务。该服务将让您将表单直接发布到他们的服务器，并通过电子邮件通知您其内容。

推荐阅读