添加新商品时删除了购物车列表

时间:2019-08-07 10:31:08

标签: javascript html

当您单击“添加到购物车”按钮添加到购物车的总订单金额时,我已经为印刷厂准备了在线付款。问题是,当您单击添加到购物车按钮时,先前添加的项目将被删除。

所有都是用js编写的,但是我是js的新手。如何将所有商品保留在购物车中并添加新商品?

var addToCartButton = document.getElementsByClassName('addToCart')
var grandTotal = new Array;
for (var i = 0; i < addToCartButton.length; i++) {
  var button = addToCartButton[i]
  button.addEventListener('click', function() {
    grandTotal.push(allTotal)
    var cartRowContents = '<table><tr><th>Xidmet adi</th><th>Cemi</th></tr>'
    var buttonClicked = document.getElementById('ulist') // unordered list where list
    var serviceName = document.getElementById('service') // service name from dropdown list
    for (k = 0; k < grandTotal.length; k++) {
      cartRowContents += '<tr><td>' + serviceName.value + '</td><td>' + grandTotal[k] + '</td></tr>'
    }
    buttonClicked.innerHTML = cartRowContents;
    cartRowContents += '</table>'
  })
}
<!-- seperator -->

<!-- Modal 1 -->
<div class="modal fade right" id="fullHeightModalRight" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">Sifarişlərin siyahısı</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
      </div>
      <div class="modal-body">
        <h2>SİFARİŞLƏRİNİZ</h2>
        <ul id="ulist"></ul>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Bağla</button>
        <button type="button" class="btn btn-primary" id="odenis">Ödəniş et</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2-->

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <h4 class="modal-title">Onlayn ödəmə</h4>
</div>
<div class="modal-body">


  <form class="form-payment" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" id="payment">
    <fieldset>

      <p class="warning" id="warning">Hörmətli müştəri, istəyinizə uyğun sifarişinizi qeyd edin və yekun məbləğin doğruluğundan əmin olduqdan sonra "Təsdiq et" düyməsini sıxın</p>


      <input type="hidden" name="id" />



      <label for="service">Xidmət növü:</label>
      <select class="form-select" id="service" name="service" onchange="calculateTotal()">
        <option value="none" selected disabled>Xidmət növünü seçin</option>
        <option value='Çap'>Çap</option>
        <option value='Kserokopiya'>Kserokopiya</option>
        <option value='Kitab çapı'>Kitab çapı</option>
        <option value='Diplom və sertifikat çapı'>Diplom və sertifikat çapı</option>
        <option value='Poster çapı'>Poster çapı</option>
        <option value='Skan'>Skan </option>
        <option value='Laminasiya'>Laminasiya</option>
        <option value='Cildləmə'>Cildləmə</option>


      </select>

      <label id="papertypeL" for="papertype">Kağız növü:</label>
      <select class="form-select" id="papertype" name="papertype" onchange="calculateTotal()">
        <option value="none" selected disabled>Kağız növünü seçin</option>
        <option value='Standart kağız (A4-parlaq)-0.50 AZN'>Standart kağız(A4-parlaq)-0.50 AZN</option>
        <option value='Premium kağız (A4-parlaq)-1 AZN'>Premium kağız (A4-parlaq)-1 AZN</option>
        <option value='VİP kağız (A4-Mat)-1.50 AZN'>VİP kağız (A4-Mat)-1.50 AZN</option>


      </select>



      <label id="scansizeL" for="scansize">Kağız ölçüsü:</label>
      <select class="form-select" id="scansize" name="scansize" onchange="calculateTotal()">
        <option value="none" selected disabled>Ölçünü seçin</option>
        <option value='A4'>A4</option>
        <option value='A3'>A3</option>


      </select>
      <label id="bookprintL" for="bookprint">Kağız ölçüsü:</label>
      <select class="form-select" id="bookprint" name="bookprint" onchange="calculateTotal()">
        <option value="none" selected disabled>Ölçünü seçin</option>
        <option value='A4'>A4</option>
        <option value='A5'>A5</option>


      </select>

      <label id="postersizeL" for="postersize">Poster ölçüsü:</label>
      <select class="form-select" id="postersize" name="postersize" onchange="calculateTotal()">
        <option value="none" selected disabled>Ölçünü seçin</option>

        <option value='A3'>A3</option>
        <option value='A3+'>A3+</option>


      </select>
      <label id="posterpaperL" for="posterpaper">Kağız növü:</label>
      <select class="form-select" id="posterpaper" name="posterpaper" onchange="calculateTotal()">
        <option value="none" selected disabled>Kağız növünü seçin</option>
        <option value='Standart kağız'>Standart kağız</option>
        <option value='Premium kağız'>Premium kağız</option>
        <option value='VİP kağız'>VİP kağız</option>


      </select>
      <label id="printL" for='print'>Çap növü:</label>

      <label id="radio" class="container-radio">Ağ-qara
          <input type="radio" checked="checked" name="capnovu" value="Ağ-qara" onclick="calculateTotal()">
          <span class="checkmark"></span>
        </label>
      <label id="radio" class="container-radio">Rəngli
          <input type="radio" name="capnovu" value="Rəngli" onclick="calculateTotal()">
          <span class="checkmark"></span>
        </label>

      <label id="sideL" for='side'>Üz sayı:</label>
      <label id="side" class="container-radio">Təküzlü
          <input type="radio" checked="checked" name="uzsayi" value="Təküzlü" onclick="calculateTotal()">
          <span class="checkmark"></span>
        </label>
      <label id="side" class="container-radio">İkiüzlü
          <input type="radio"  name="uzsayi" value="İkiüzlü" onclick="calculateTotal()">
          <span class="checkmark"></span>
        </label>


      <label id="kitab-cildL" class="container-radio" for="kitab-cild">Cildləmə<input id="kitab-cild" type="checkbox" onclick="calculateTotal()" /><span class="checkmark-box"></span></label>
      <label id="cildL" for="cild">Cildləmə növü:</label>
      <select class="form-select" id="cild" name="cild" onchange="calculateTotal()">
        <option value="none" selected disabled>Cildləmə növünü seçin</option>
        <option value='Plasmas spiral cildləmə'>Plasmas spiral cildləmə</option>
        <option value='Dəmir spiral cildləmə'>Dəmir spiral cildləmə</option>
        <option value='Kleylə cildləmə'>Kleylə cildləmə</option>


      </select>

      <label id="cildA4L" for="cildA4">Cildləmə növü:</label>
      <select class="form-select" id="cildA4" name="cildA4" onchange="calculateTotal()">
        <option value="none" selected disabled>Cildləmə növünü seçin</option>

        <option value='Dəmir spiral cildləmə'>Dəmir spiral cildləmə</option>
        <option value='Plasmas spiral cildləmə'>Plasmas spiral cildləmə</option>
        <option value='Kleylə cildləmə'>Kleylə cildləmə</option>
        <option value='Kitab bərpa'>Kitab bərpa</option>
        <option value='Çubuqla cildləmə'>Çubuqla cildləmə</option>


      </select>


      <label id="cildA3L" for="cildA3">Cildləmə növü:</label>
      <select class="form-select" id="cildA3" name="cildA3" onchange="calculateTotal()">
        <option value="none" selected disabled>Cildləmə növünü seçin</option>
        <option value='Dəmir spiral cildləmə'>Dəmir spiral cildləmə</option>
        <option value='Plasmas spiral cildləmə'>Plasmas spiral cildləmə</option>
        <option value='Çubuqla cildləmə'>Çubuqla cildləmə</option>


      </select>







      <label id="sayL" for="say">Səhifə Sayı:</label><input id="say" name="say" class="form-input" type="text" value="" onclick="calculateTotal()" />
      <label id="nusxeSayL" for="nusxeSay">Nüsxə Sayı:</label><input id="nusxeSay" name="nusxeSay" class="form-input" type="text" value="" onclick="calculateTotal()" />
      <label id="laminasiyaL" class="container-radio">Laminasiya olacaq?
          <input type="checkbox" id="laminasiya"  name="checkbox"  onclick="calculateTotal()">
          <span class="checkmark-box"></span>
        </label>
      <label id="deliveryL" class="container-radio">Çatdırılma olacaq?
          <input type="checkbox" id="delivery"  name="checkbox"  onclick="calculateTotal()">
          <span class="checkmark-box"></span>
        </label>

      <label id="deliveryRadio" class="container-radio">Bakıdaxili kuryer ilə (3 AZN)
          <input type="radio" checked="checked" name="radio" value="kuryer" id="kuryer" onclick="calculateTotal()">
          <span class="checkmark"></span>
        </label>
      <label id="deliveryRadio" class="container-radio">Bakıdaxili taksi ilə (5 AZN)
          <input type="radio"  name="radio" value="taksi" id="taksi" onclick="calculateTotal()">
          <span class="checkmark"></span>
        </label>
      <label id="deliveryRadio" class="container-radio">Bölgələrə poçtla (3 AZN)
          <input type="radio"  name="radio" value="poct" id="poct" onclick="calculateTotal()">
          <span class="checkmark"></span>
        </label>
    </fieldset>

</div>

<div id="totalPrice" style="padding:10px;
            font-weight:bold;
            background-color:#ff0;
            ">
</div>


<div class="modal-footer">


  <button type="submit" name="submit" data-dismiss="modal" class="btn btn-default">Təsdiq et</button>
  <button class="btn btn-default addToCart" id="addToCart" type="button" href="#fullHeightModalRight" data-toggle="modal">Add to Cart</button>
  </form>
</div>

我添加了用于添加到购物车中的js代码,省略了计算代码。 附言“添加到购物车”按钮处于另一模式。任何帮助表示赞赏。

0 个答案:

没有答案
相关问题