DEV Community: Saliou Tine

Updating shopping cart

Saliou Tine — Thu, 18 Aug 2022 10:56:25 +0000

HI There guys
I just started project for someone and I stuck here in this section.
I am trying to add the contents of A&B element selected as shown on the picture, to cart once I click [ADD TO CART BUTTON 👉(C)] to be added to the VALUE (9.50 + 0.10 = 9.60).Please help me.!!!
Thank you very much guys.
Kind Regards Sal 🙏🤦‍♂️😍

So this is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Shopping Cart Course Discoveryvip.com</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
      integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
      crossorigin="anonymous"
    />
    <style>
      #output {
        clear: both;
      }

      #checkoutdiv {
        display: none;
      }
s
      .footer {
        background-color: darkgrey;
        color: white;
      }
      .htop{width:70%; background-color: rgb(231, 180, 113); margin: auto;}
.text-muted {
   color: #2a4d68!important;
}
      .memories{width: 80%; margin: 30px;}
.card-flex{display: flex;  width: 70%; margin:60px auto ;}

.container-ctn{position: relative; bottom: 0; background-color: rgb(68, 155, 94); height: 200px;}
      #formId{width:100%; background-color: rgb(240, 238, 241);}
    </style>
  </head>

  <body>
    <header class="header">
      <div class="htop">
        <div id="checkoutdiv " class="container">
          <div class="row">
            <div class="col-md-6 text-xs-right">
              (<span class="items text-muted"></span> <small>items</small>)
              <span class="total"></span>
            </div>
            <div class="col-md-6 text-xs-right">
              <span
                class="btn btn-success"
                data-toggle="modal"
                data-target="#cart"
                >Open Shopping Cart</span
              ><a href="checkitout.html" class="btn btn-primary"
                >Proceed to checkout</a
              >
            </div>
          </div>
        </div>
      </div>


        </header>




        <div class="roller">
             <div class="card-flex">
               <div class="memories"> <img src="fj1.jpeg" class="img-fluid" /></div>



               <form class="myform" id="formId" method="dialog"> 
               <h3 class="card-title"> Ribeye Steaks</h3>
               <p>
The timeless classic and historically the most popular of the top 4 steaks. With such fantastic
 flavour, you can never be disappointed with this choice</p>
                <h6 class="card-subtitle text-muted">28 days Ribeye Steaks Only at £7.00</h6>
               <div class="optwheight">wheight-options</div>
               <select id="mySelect" onchange="myFunction()">
               <option value="0" selected>select
               <option value="£9.50" >226.79g
               <option value="£8.20">220g
               <option value="£9.50">280g
                <option value="£8.20">220g

                </select>
                <p data-price="" 
                data-id="1"  class="productItem" id="demo"></p>


              <a href="#" 
               class="card-link productItem btn btn-primary" data-name="Beef"
               data-s="Ribeye Steaks"  data-price="" 
                data-id="1">Add to Cart</a> 
               <div><input id="res" type="reset" /></div>

              </div>

             </form>



      </div>




    <!-- Modals -->
    <div class="modal fade" id="cart" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Shopping Cart</h4>
          </div>
          <div class="modal-body">
            <table class="table table-hover">
              <thead class="thead-inverse">
                <tr>
                  <th>Qty</th>
                  <th>Item Name</th>
                  <th>Weight</th>
                  <th>Cost</th>
                  <th class="text-xs-right">Subtotal</th>
                  <th>Remove</th>
                </tr>
              </thead>
              <tbody id="output"></tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-warning" data-dismiss="modal">
              Continue Shopping</button>
            <a href="checkitout.html" ><button class="btn btn-primary">Proceed to checkout</button>
              </a
            >
          </div>
        </div>
      </div>
    </div>
<footer class="footer">
      <div class="container-ctn">
        <p class="text-xs-center">© Copyright info blah blah</p>
      </div>
    </footer>
    <script>
        function myFunction() {
          var x = document.getElementById("mySelect").value;
          document.getElementById("demo").innerHTML = " " + x;
        }
      </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"
      integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
      integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
      crossorigin="anonymous"
    ></script>
    <script>
// $(".productItem").click(function (e)
//  { e.preventDefault();
//    var iteminfo = $(this.dataset)[0]; 
//    let selectedItem = $('#mySelect option:selected')

   //add. selected option selector iteminfo.qty = 1; 
  //  iteminfo.price = selectedItem.val().replace('£','') //add. 
   //value of selected option. 
   //You'd better find a better way to use the formatMoney function with the numeric calculation instead of using .replace() iteminfo.weight = selectedItem.text() //add. text of selected option var itemincart = false; $.each(shopcart, function (index, value) { //console.log(index + ' ' + value.id); if (value.id == iteminfo.id) { value.qty = parseInt(value.qty) + parseInt(iteminfo.qty); itemincart = true; } }); if (!itemincart) { shopcart.push(iteminfo); } sessionStorage["sca"] = JSON.stringify(shopcart); outputCart(); /// });


// let addItem = $('#demo option:selected')
//  iteminfo.price = addItem.val().replace('£','')

      var shopcart = [];
      $(document).ready(function () {
        outputCart();
        $(".productItem").click(function (e) {
          e.preventDefault();
          var iteminfo = $(this.dataset)[0];
          let selectedItem = $('#mySelect option:selected') //add. selected option selector
          let addItem = $('#demo option:selected')

          iteminfo.qty = 1;
          iteminfo.price = selectedItem.val().replace('£','') //add. value of selected option.
            // iteminfo.price = addItem.val().replace('£','')
//You'd better find a better way to use the formatMoney function with the numeric calculation instead of using .replace()
          iteminfo.weight = selectedItem.text() //add. text of selected option
          var itemincart = false;
          $.each(shopcart, function (index, value) {
            //console.log(index + '  ' + value.id);
            if (value.id == iteminfo.id) {
              value.qty = parseInt(value.qty) + parseInt(iteminfo.qty);
              itemincart = true;
            }
          });
          if (!itemincart) {
            shopcart.push(iteminfo);
          }
          sessionStorage["sca"] = JSON.stringify(shopcart);
          outputCart();
          ///
        });

        function outputCart() {
          if (sessionStorage["sca"] != null) {
            shopcart = JSON.parse(sessionStorage["sca"].toString());
            console.log(sessionStorage["sca"]);
            $("#checkoutdiv").show();
          }
          var holderHTML = "";
          var total = 0;
          var itemCnt = 0;
          $.each(shopcart, function (index, value) {
            console.log(value);


            var stotal = value.qty * value.price;
            total += stotal;
            itemCnt += parseInt(value.qty);
            holderHTML +="<tr><td>" +value.qty +"</td><td>#" + value.id + " " +value.name +
              "(" +
              value.s +
              ")</td><td> " + //add
              value.weight + //add
              "</td><td> " +
              formatMoney(value.price) +
              ' </td><td class="text-xs-right"> ' +
              formatMoney(stotal) +
              '</td><td><span class="remove-item btn btn-danger">x</span></td></tr>';

          });



          holderHTML +=
            '<tr><td colspan="3" class="text-xs-right">Total</td><td class="text-xs-right">' +
            formatMoney(total) +
            "</td></tr>";
          $("#output").html(holderHTML);
          $(".total").html(formatMoney(total));
          $(".items").html(itemCnt);
        }

        function formatMoney(n) {
          return "£" + (n / 100).toFixed(2);
        }
        $("#output").on("click", ".remove-item", function () {
          var itemInfo = $(this.dataset)[0];
          var itemToDelete = $(".remove-item").index(this);
          shopcart.splice(itemToDelete, 1);
          sessionStorage["sca"] = JSON.stringify(shopcart);
          outputCart();
        });









      });
    </script>
  </body>
</html>

how can I Add options weight and value when user click add to cart button

Saliou Tine — Wed, 10 Aug 2022 16:41:45 +0000

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Shopping Cart Course Discoveryvip.com</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
      integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
      crossorigin="anonymous"
    />
    <style>
      #output {
        clear: both;
      }

      #checkoutdiv {
        display: none;
      }

      .footer {
        background-color: darkgrey;
        color: white;
      }
    </style>
  </head>

  <body>
    <header class="header">
      <div class="htop">
        <div id="checkoutdiv " class="container">
          <div class="row">
            <div class="col-md-6 text-xs-right">
              (<span class="items text-muted"></span> <small>items</small>)
              <span class="total"></span>
            </div>
            <div class="col-md-6 text-xs-right">
              <span
                class="btn btn-success"
                data-toggle="modal"
                data-target="#cart"
                >Open Shopping Cart</span
              ><a href="checkout.html" class="btn btn-primary"
                >Proceed to checkout</a
              >
            </div>
          </div>
        </div>
      </div>
      <div class="hbot">
        <div class="container">
          <nav class="navbar navbar-full navbar-dark bg-inverse">
            <button
              class="navbar-toggler light float-xs-right hidden-sm-up"
              type="button"
              data-toggle="collapse"
              data-target="#nvbar"
            ></button>
            <div id="nvbar" class="collapse navbar-toggleable-xs">
              <ul class="nav navbar-nav float-sm-right">
                <li class="nav-item">
                  <a class="nav-link" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="about.html">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="products.html">Products</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </header>

    <div class="content">
      <!-- content changes on each page -->
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <div class="card">
              <div class="card-block">
                <h3 class="card-title">iPhone</h3>
                <h6 class="card-subtitle text-muted">$500.00</h6>
                <img src="lamb.jpg" class="img-fluid" />


                        <form class="myform" action="" method="dialog">
                          <div class="optwheight">wheight-options</div>
                         <!-- <wheight  -->


          <select id="mySelect" onchange="myFunction()">
            <option value="0">select
            <option value="£9.50">226.79g=80z
            <option value="£8.20">220g
              <option value="£9.50">280g
                <option value="£8.20">220g

          </select>
          <p id="demo"></p>
          <div class="card-block">
            <div class="card-text"><h4> 28 days Ribeye Steaks</h4>
               <a href="#" 

              class="card-link productItem btn btn-primary" data-name="Beef" data-s="Ribeye Steaks" data-price="50000" data-id="1">Add to Cart</a> </div>

          </div>


              <!-- <wheight/end  -->
              <div><input id="res" type="reset" /></div>



                        </form>

              </div>

            </div>
        </div>


    </div>
    <footer class="footer">
      <div class="container">
        <p class="text-xs-center">© Copyright info blah blah</p>
      </div>
    </footer>
    <!-- Modals -->
    <div class="modal fade" id="cart" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Shopping Cart</h4>
          </div>
          <div class="modal-body">
            <table class="table table-hover">
              <thead class="thead-inverse">
                <tr>
                  <th>Qty</th>
                  <th>Item Name</th>
                  <th>Weight</th>
                  <th>Cost</th>
                  <th class="text-xs-right">Subtotal</th>
                  <th>Remove</th>
                </tr>
              </thead>
              <tbody id="output"></tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-warning" data-dismiss="modal">
              Continue Shopping</button
            ><a href="checkitout.html" class="btn btn-primary"
              >Proceed to checkout</a
            >
          </div>
        </div>
      </div>
    </div>
    <script>
        function myFunction() {
          var x = document.getElementById("mySelect").value;
          document.getElementById("demo").innerHTML = " " + x;
        }
      </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"
      integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
      integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
      crossorigin="anonymous"
    ></script>
    <script>
      var shopcart = [];
      $(document).ready(function () {
        outputCart();
        $(".productItem").click(function (e) {
          e.preventDefault();
          var iteminfo = $(this.dataset)[0];
          iteminfo.qty = 1;
          var itemincart = false;
          $.each(shopcart, function (index, value) {
            //console.log(index + '  ' + value.id);
            if (value.id == iteminfo.id) {
              value.qty = parseInt(value.qty) + parseInt(iteminfo.qty);
              itemincart = true;
            }
          });
          if (!itemincart) {
            shopcart.push(iteminfo);
          }
          sessionStorage["sca"] = JSON.stringify(shopcart);
          outputCart();
          ///
        });

        function outputCart() {
          if (sessionStorage["sca"] != null) {
            shopcart = JSON.parse(sessionStorage["sca"].toString());
            console.log(sessionStorage["sca"]);
            $("#checkoutdiv").show();
          }
          var holderHTML = "";
          var total = 0;
          var itemCnt = 0;
          $.each(shopcart, function (index, value) {
            console.log(value);
            var stotal = value.qty * value.price;
            total += stotal;
            itemCnt += parseInt(value.qty);
            holderHTML +="<tr><td>" +value.qty +"</td><td>#" + value.id + " " +value.name +
              "(" +
              value.s +
              ")</td><td> " +
              formatMoney(value.price) +
              ' </td><td class="text-xs-right"> ' +
              formatMoney(stotal) +
              '</td><td><span class="remove-item btn btn-danger">x</span></td></tr>';





          });



          holderHTML 
          holderHTML +=
            '<tr><td colspan="3" class="text-xs-right">Total</td><td class="text-xs-right">' +
            formatMoney(total) +
            "</td></tr>";
          $("#output").html(holderHTML);
          $(".total").html(formatMoney(total));
          $(".items").html(itemCnt);
        }

        function formatMoney(n) {
          return "$" + (n / 100).toFixed(2);
        }
        $("#output").on("click", ".remove-item", function () {
          var itemInfo = $(this.dataset)[0];
          var itemToDelete = $(".remove-item").index(this);
          shopcart.splice(itemToDelete, 1);
          sessionStorage["sca"] = JSON.stringify(shopcart);
          outputCart();
        });









      });
    </script>
  </body>
</html>
javascript
jquery