Оформить заказ покупательской корзины - отправьте товар на электронную почту - PullRequest
Новая
       9

Оформить заказ покупательской корзины - отправьте товар на электронную почту

0 голосов
/ 13 июня 2019

Я использую simplecartjs, чтобы сделать корзину покупок на моем веб-сайте, где вы можете выбрать элемент и отправить его в корзину ... следующим шагом будет процесс оформления заказа, и я хочу отправить на свой рабочий адрес электронную почту.

Вопрос: как отправить содержимое корзины в тело письма или в качестве вложения?

Скрипт для simplecartjs: 


    cartColumns: [
    { attr: "name" , label: "Nome" } ,
    { view: "option", attr:'size', label: "Tamanho" },
    { view: "option", attr:'color', label: "Cor" },     
    { attr: "price" , label: "Preço", view: 'currency' } ,
    { view: "decrement" , label: false , text: "-" } ,
    { attr: "quantity" , label: "Qnt" } ,
    { view: "increment" , label: false , text: "+" } ,
    { attr: "total" , label: "Valor", view: 'currency' } ,
    { view: "remove" , text: "Remover" , label: false },


    ],
    cartStyle: "table", 


    currency: "EUR",
    data: {},
    language: "english-us",
    excludeFromCheckout: [],
    shippingCustom: null,
    shippingFlatRate: 0,
    shippingQuantityRate: 0,
    shippingTotalRate: 0,
    taxRate: 0.06,
    taxShipping: false,

    // event callbacks 
    beforeAdd           : null,
    afterAdd            : null,
    load                : null,
    beforeSave      : null,
    afterSave           : null,
    update          : null,
    ready           : null,
    checkoutSuccess : null,
    checkoutFail        : null,
    beforeCheckout      : null,
  beforeRemove           : null
});


function passForm(){
simpleCart({
    checkout: {
        type: "SendForm" ,
        url: "checkout.html",
        method: "GET",
        currency: "EUR"
    }
});
}

checkout.html: (я использовал phpmailer изагрузчик) 

    <section class="bg-dark" style="padding: 50px">
        <div class="container">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="simpleCart_items"></div>
                        <div class="left"><strong>Items: </strong><span class="simpleCart_quantity"></span></div>
                        <div class="right"><strong>Valor: </strong><span class="simpleCart_total"></span></div>
                        <div class="right"><strong>IVA: </strong><span class="simpleCart_tax"></span></div>
                        <div class="right"><strong>ENVIO: </strong>GRÁTIS</div>
                        <div class="right"><strong>Valor Total: </strong><span class="simpleCart_grandTotal"></span></div>
                    </div>
                </div>
            </div>
            <p></p>
            <div class="card">
                <div class="card-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="tab-content pt-4">
                                    <div class="tab-pane fade in show active" id="tabCheckoutBilling123" role="tabpanel">
                                        <form id="contactForm" name="sentMessage" novalidate>
                                            <div class="row">
                                                <div class="col-md-6 mb-4">
                                                    <label for="firstName" class="">Nome</label>
                                                    <input type="text" id="firstName" class="form-control" placeholder="Nome" required>
                                                </div>
                                                <div class="col-md-6 mb-2">
                                                    <label for="lastName" class="">Apelido</label>
                                                    <input type="text" id="lastName" class="form-control" placeholder="Apelido" required>
                                                </div>
                                            </div>
                                            <label for="email" class="">Email (opcional)</label>
                                            <input type="text" id="email" class="form-control mb-4" placeholder="o_teu_mail@exemplo.pt">
                                            <label for="address" class="">Morada</label>
                                            <input type="text" id="address" class="form-control mb-4" placeholder="Rua..." required>
                                            <label for="address-2" class="">Morada 2 (opcional)</label>
                                            <input type="text" id="address-2" class="form-control mb-4" placeholder="Ex: Local de Trabalho">
                                            <div class="row">
                                                <div class="col-lg-4 col-md-4 mb-4">
                                                    <label for="state">Distrito</label>
                                                    <select class="custom-select d-block w-100" id="state" required>
                                                        <option value="">Escolher...</option>
                                                        <option>Aveiro</option>
                                                        <option>Beja</option>
                                                        <option>Braga</option>
                                                        <option>Bragança</option>
                                                        <option>Castelo Branco</option>
                                                        <option>Coimbra</option>
                                                        <option>Évora</option>
                                                        <option>Faro</option>
                                                        <option>Guarda</option>
                                                        <option>Leiria</option>
                                                        <option>Lisboa</option>
                                                        <option>Portalegre</option>
                                                        <option>Porto</option>
                                                        <option>Santarém</option>
                                                        <option>Setúbal</option>
                                                        <option>Viana do Castelo</option>
                                                        <option>Vila Real</option>
                                                        <option>Viseu</option>
                                                        <option>Madeira</option>
                                                        <option>Açores</option>
                                                    </select>
                                                    <div class="invalid-feedback">
                                                        Seleciona um distrito
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-4 mb-4">
                                                    <label for="city">Localidade</label>
                                                    <input type="text" class="form-control" id="city" required>
                                                    <div class="invalid-feedback">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-4 mb-4">
                                                    <label for="zip">Código-Postal</label>
                                                    <input type="text" class="form-control" id="zip" placeholder="0000-000" pattern="\d{4}-\d{3}" required>
                                                    <div class="invalid-feedback">
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="mb-1">
                                                <input type="checkbox" class="form-check-input filled-in" id="chekboxRules" required>
                                                <label class="form-check-label" for="chekboxRules">Eu aceito os termos e condições</label>
                                            </div>
                                            <hr>
                                            <div id="success"></div>
                                            <button id="sendMessageButton" class="btn btn-primary btn-lg btn-block" type="submit">Enviar</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

1 Ответ

0 голосов
/ 13 июня 2019

Используйте Smtpjs , который является бесплатным сервисом, позволяющим отправлять почту с помощью javascript. Я рекомендую вам увидеть на их веб-сайте, как настроить ключ безопасности, чтобы не отображать вашу электронную почту ипароль.

Тогда вам просто нужно добавить это в свой HTML-заголовок: 

<script src="https://smtpjs.com/v3/smtp.js"></script>

И затем вы можете отправить письмо, используя закрытый ключ и данные, которые у вас есть в кассе дляпример: 

    Email.send({
        SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
        To : 'them@website.com',
        From : "you@isp.com",
        Subject : "Your cart",
        Body : `Your cart: ${data.map(item => item.name + ": " + item.price)}`
    }).then(
      message => alert(message)
    );
...