電商網站購物車頁面計算及HTMl更新

Question

我正在嘗試為電子商務網站構建購物車頁面。 我無法弄清楚用於計算的 JS .. 下面我通過 AJAX 調用獲得一個名為 products.json 的文件，其中包含產品信息，如 id、名稱、imp、價格等，以及一個名為 productsArray 的數組，其中保存了產品 id我點擊了他們各自的購物車圖標的產品。 現在的邏輯是，如果 products.json 文件包含我希望它顯示在購物車頁面上的數組中的產品 ID。 因此，當我單擊產品添加到購物車按鈕時，對於我單擊的任何產品，它都會被添加到本地存儲中，然后我會從那里得到它並將其與 JSON 文件中存在的每個產品進行比較。 現在這是用所有提供的信息打印我的產品。 現在我想在更改產品數量時更改價格。 我還在下面添加了一個代碼，這也有效。 當我點擊 2 時，價格乘以 2 並顯示在 HTML 中。 其他值也類似。 問題是這只適用於第一個產品。 即使 ID 都相同，我也無法使所有產品的功能都正常工作。我該如何解決這個問題？ 此外，我需要能夠訪問所有產品價格，如下面的第二張圖片所示，將它們總結起來，然后更新頂部的總數和各種描述下的正確容器。我該怎么做呢？ 請幫忙。 在過去的 3-4 天里一直試圖破解這個..

 let products = new Set(); let counter = 0; // adding click events to cart icon document.body.addEventListener('click', e => { if (e.target.closest('.shopping')) { products.add(e.target.closest('.prod-card').id); // adding number of products in cart icon counter = Number(document.querySelector('#cart-badge').innerHTML) + 1; document.querySelector('#cart-badge').innerHTML = String(counter); }; // storing product ids in local storage localStorage.setItem('Products_IDs', JSON.stringify(Array.from(products))) }); // parsing JSON List for cart page let RetrievedData = localStorage.getItem("Products_IDs"); let productsArray = JSON.parse(RetrievedData); // for (i = 0; i < productsArray.length; i++){ // console.log(productsArray); // } let xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { let myProducts = JSON.parse(this.responseText); for (i = 0; i < productsArray.length; i++) { for (j = 0; j < myProducts.products.length; j++) { if (productsArray[i] == myProducts.products[j].id) { let ReturnedHTML2 = " "; ReturnedHTML2 = `<div class="cart-items-holder" id='pdt-box'> <div class='pdt-container' id='pdt-single'> <img class='img-sweater' src="Images/${myProducts.products[j].imageName}.png" alt="Sweater Image"> <div class="pdt-text w-100"> <div class="text1"> <h6>${myProducts.products[j].name}</h6> <p class="mb-0 text-secondary">Color: Multicolor</p> <p class="mb-0 text-secondary">Seller: Indus Valley & Co</p> <div class="forms mt-xl-3 mt-lg-3 mt-md-2 mt-sm-2 d-flex justify-content-start align-items-start"> <div class="form-group"> <label class='mr-2' for="exampleFormControlSelectSize"></label> <select class="form-control" id="exampleFormControlSelectSize"> <option>Size: Onesize</option> <option>S</option> <option>M</option> <option>L</option> <option>XL</option> <option>XXL</option> </select> </div> <div class="form-group2 ml-3"> <label class='mr-2' for="exampleFormControlSelectQuantity"></label> <select class="form-control" id="exampleFormControlSelectQuantity"> <option>QTY: 1</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> </div> </div> <div class="text2"> <p class='pricing mb-0'>Rs.<strong id='final-price'>${myProducts.products[j].priceAfterDiscount}</strong> <del id='initial-price'>Rs.${myProducts.products[j].price}</del><span class="offer font-weight-bold ml-1">(60%Off)</span></p> <small class="text-secondary">Delivery in 4 - 6 days</small> </div> </div> </div> <div class="options"> <a class="ml-3 mr-3 text-dark font-weight-bold" id='remove-btn' href="">REMOVE</a> | <a class="ml-3 mr-3 text-dark font-weight-bold" id='wishlist-btn' href="">ADD TO WISHLIST</a> </div> </div> <br>` document.querySelector('#cart-items-area').innerHTML += ReturnedHTML2; sessionStorage.setItem("discounted_price", Number(document.getElementById('final-price').innerHTML)) document.getElementById('exampleFormControlSelectQuantity').onchange = function() { if (document.getElementById('exampleFormControlSelectQuantity').selectedIndex == 1) { price_1 = sessionStorage.getItem("discounted_price"); document.getElementById('final-price').innerHTML = price_1 * 1; } else if (document.getElementById('exampleFormControlSelectQuantity').selectedIndex == 2) { price_2 = sessionStorage.getItem("discounted_price"); document.getElementById('final-price').innerHTML = price_2 * 2; } else if (document.getElementById('exampleFormControlSelectQuantity').selectedIndex == 3) { price_3 = sessionStorage.getItem("discounted_price"); document.getElementById('final-price').innerHTML = price_3 * 3; } else if (document.getElementById('exampleFormControlSelectQuantity').selectedIndex == 4) { price_4 = sessionStorage.getItem("discounted_price"); document.getElementById('final-price').innerHTML = price_4 * 4; } else { price_default = sessionStorage.getItem("discounted_price"); document.getElementById('final-price').innerHTML = price_default; } } } } } } }; xmlhttp.open("GET", "products.json", true); xmlhttp.send();

[

Answer 1

看到你已經花了幾天的時間。 我認為值得花一些時間將現有代碼重構為更有條理：:)

• 我看到很多嵌套的 if 和 fors => 將它們提取到單獨的函數中
• 我看到一個包含 HTML 文檔字符串的大模板 => 單獨的 function 采用 2 arguments 並返回完全呈現的 ZCFC35FDC70D5FC67AE2362 文檔。

如果您最終又查看此代碼一天，至少如果您將每個部分提取到其自己更簡單的 function 中會有所幫助。 然后，您還可以單獨運行每個 function 以測試它是否按照您的預期進行：:) 它有助於一噸的拆分！

現在它是 XMLHTTPRequest 處理程序中的一個“大怪物功能”。

---

此外，底部有相當多的重復代碼，每當您看到它時，它應該有助於指導您在哪里減少和簡化您的代碼：

if (document.getElementById('exampleFormControlSelectQuantity').selectedIndex == 1) {
    price_1 = sessionStorage.getItem("discounted_price");
    document.getElementById('final-price').innerHTML = price_1 * 1;
} else if (/*repeated code*/) {
    /* repeated code, with a single number changing 2, 3, 4... */
}

條件代碼（幾乎）完全相同，因此您不必在每種情況下都對同一元素進行相同的文檔查詢。

const selected_number = document.getElementById('exampleFormControlSelectQuantity').selectedIndex;

你可以像這樣重復使用它：

if (selected_number == 1) {
    price_1 = sessionStorage.getItem("discounted_price");
    document.getElementById('final-price').innerHTML = price_1 * 1;
} else if (selected_number == 2) {
    /* repeated code, with a single number changing 2, 3, 4... */
}

但是現在您也可以假設數字是...條件內需要的數字...因此您可以將單個數字檢查縮短為如下代碼片段：

price = sessionStorage.getItem("discounted_price");
document.getElementById('final-price').innerHTML = price * selected_number;