javascript 购物车电子邮件结帐

Question

感谢您的帮助。 我刚开始学习 HTML/JAVASCRIPT/CSS。

我有一个小任务/项目要完成。需要有几件物品（3 或 4 件）的前店。必须创建一个 javascript 购物车。单击购买按钮时，将项目添加到购物车。然后可以查看购物车。必须有一个结帐选项，但是没有付款处理。订单需要通过电子邮件发送给我自己和用户以进行人工付款。

如何让购物车中的商品通过电子邮件发送？

感谢您的帮助

Javascript 归功于 Burlaka Dmytro

这里是链接，这是我用来工作的。 https://codepen.io/Dimasion/pen/oBoqBM

<!-- Nav -->
<nav class="navbar navbar-inverse bg-inverse fixed-top bg-faded">
 <div class="row">
     <div class="col">
       <button type="button" class="btn btn-primary" data-toggle="modal" 
        data-target="#cart">Cart (<span class="total-count"></span>) 
       </button><button class="clear-cart btn btn-danger">Clear 
                Cart</button></div>
     </div>
</nav>


<!-- Main -->
<div class="container">
 <div class="row">
  <div class="col">
    <div class="card" style="width: 20rem;">
      <img class="card-img-top" 
      src="http://www.azspagirls.com/files/2010/09/orange.jpg" alt="Card 
      image cap">
      <div class="card-block">
      <h4 class="card-title">Orange</h4>
      <p class="card-text">Price: $0.5</p>
      <a href="#" data-name="Orange" data-price="0.5" class="add-to-cart 
      btn btn-primary">Add to cart</a>
    </div>
  </div>
  </div>
  <div class="col">
    <div class="card" style="width: 20rem;">
    <img class="card-img-top" src="http://images.all-free- 
    download.com/images/graphicthumb/vector_illustration_of_ripe_
    bananas_567893.jpg" alt="Card image cap">
   <div class="card-block">
    <h4 class="card-title">Banana</h4>
     <p class="card-text">Price: $1.22</p>
     <a href="#" data-name="Banana" data-price="1.22" class="add-to-cart 
     btn btn-primary">Add to cart</a>
   </div>
 </div>
  </div>
  <div class="col">
    <div class="card" style="width: 20rem;">
  <img class="card-img-top" src="https://3.imimg.com/data3/IC/JO/MY- 
   9839190/organic-lemon-250x250.jpg" alt="Card image cap">
  <div class="card-block">
  <h4 class="card-title">Lemon</h4>
  <p class="card-text">Price: $5</p>
  <a href="#" data-name="Lemon" data-price="5" class="add-to-cart btn 
 btn-primary">Add to cart</a>
 </div>
 </div>
  </div>
  </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria- 
   labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg" role="document">
   <div class="modal-content">
    <div class="modal-header">
     <h5 class="modal-title" id="exampleModalLabel">Cart</h5>
    <button type="button" class="close" data-dismiss="modal" aria- 
   label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <table class="show-cart table">

    </table>
    <div>Total price: $<span class="total-cart"></span></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data- 
dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Order now</button>
  </div>
  </div>
 </div>
 </div> 

我无法通过电子邮件发送购物车内容。

***********************************************
This is my PHP
*********************************************
<?php
    $to      = 'my email address is here';
    $subject = 'SolarPlexus Website';
    $txt = $_POST['content'];

    $headers = 'From: admin@solarplexus.co.za' . "\r\n" .
               'Reply-To: info@solarplexus.co.za' . "\r\n" .
               'X-Mailer: PHP/' . phpversion();
    mail($to, $subject, $txt,  $headers);
    Header('Location: thankyou.html');
?>


*******************************
This is html part for the cart, the cart is hidden until cart button is 
clicked. making use of bootstrap modal.
*******************************

 <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria- 
  labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Cart</h5>
       <button type="button" class="close" data-dismiss="modal" aria- 
        label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
    </div>
     <form name="contactform" method="post" action="sendjs.php">    
     <div class="modal-body">

     <input type="text" required="required" placeholder="Enter Name" 
     name="name1"> 
     <input type="email" required="required" placeholder="Enter Email 
     address" name="email1">
     <input type="tel" required="required" placeholder="Enter Telephone 
     number" name="tel1">


     <table id="cartents" class="show-cart table">

     </table>
    <div>Total price: R<span class="total-cart"></span></div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data- 
    dismiss="modal">Close</button>
        <button onClick="SendMail()" type="button submit" class="btn btn- 
     primary">Order now</button>

    </div>
  </div>
  </div>
 </div>
</form> 


*************
 the Javascript file remains unchanged from the codepen link provided

Answer 1

您需要在表格内容中添加一个 id： HTML

<div>Total price: $<span class="total-cart" id="cartContent"></span></div>

为按钮创建一个函数：

<button onclick="SendMail()"type="button" class="btn btn-primary">Order now</button>

然后创建函数 SendMail();在脚本中

<script>
 function SendMail()    
     {    
       var tableContent = document.getElementById("cartContent").innerHTML;    
       $.post('mail.php',{content:tablecontent},function(data) {
    });
     }
</script>

您需要创建一个 mail.php 文件

<?php
$to = "somebody@example.com";
$subject = "ur subject";
$txt = $_POST['content'];
$headers = "From: webmaster@example.com" . "\r\n" .
"CC: somebodyelse@example.com";

mail($to,$subject,$txt,$headers);
?>