当您单击“添加到购物车”按钮添加到购物车的总订单金额时,我已经为印刷厂准备了在线付款。问题是,当您单击添加到购物车按钮时,先前添加的项目将被删除。
所有都是用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">×</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">×</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代码,省略了计算代码。 附言“添加到购物车”按钮处于另一模式。任何帮助表示赞赏。