diff --git a/public/cart.js b/public/cart.js
index 7d66d285bb30b5bb6dcd81ce2bffec02e58636fd..c77a828dfea6a9bf0182700cf62fa373831616ed 100644
--- a/public/cart.js
+++ b/public/cart.js
@@ -1,59 +1,142 @@
document.querySelector('.search-bar').style.display = 'none';
-const table = document.querySelector('table')
-table.innerHTML =`
-
+const table = document.querySelector('table');
+let tableHTML = `
<tr>
<th>Product</th>
<th>Image</th>
<th>Price per unit</th>
<th>Amount</th>
<th>Total Price</th>
- </tr>
-`
+ </tr>`;
-let shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || []
+let shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || [];
-let idItemMap = {}
+let idItemMap = {};
shoppingCardItems.forEach(item => {
- if (!idItemMap[item.productid]) idItemMap[item.productid]= [];
- idItemMap[item.productid].push(item)
-})
-
-const uniqueEntries = []
+ if (!idItemMap[item.productid]) idItemMap[item.productid] = [];
+ idItemMap[item.productid].push(item);
+});
+let totalCost = 0;
Object.values(idItemMap).forEach(arr => {
- uniqueEntries.push(arr[0])
-})
+ const item = arr[0];
+ const quantity = arr.length;
+ totalCost += quantity * item.price;
+ tableHTML += `
+ <tr data-productid='${item.productid}'>
+ <td><button type="button" class="remove" data-productid="${item.productid}"> x </button> ${item.name}</td>
+ <td><img src="${item.image}" height="70" width="70"/></td>
+ <td>${item.price}</td>
+ <td>
+ <form>
+ <div class="value-button decrease" data-productid="${item.productid}" value="Decrease Value">-</div>
+ <input type="number" class="number-input" data-productid="${item.productid}" value='${quantity}'/>
+ <div class="value-button increase" data-productid="${item.productid}" value="Increase Value">+</div>
+ </form>
+ </td>
+ <td class="total-price-for-item" data-productid="${item.productid}" data-price="${item.price}">${quantity * item.price}</td>
+ </tr>`
+ ;
+});
-let totalCost = 0
-uniqueEntries.forEach(item => {
- table.innerHTML +=`
-<tr>
- <td>${item.name}</td>
- <td><img src="${item.image}" height="70" width="70"/></td>
- <td>${item.price}</td>
- <td>${idItemMap[item.productid].length}</td>
- <td>${idItemMap[item.productid].length * item.price}</td>
-</tr>
- `
- totalCost += idItemMap[item.productid].length * item.price
-})
-
-table.innerHTML +=`
+tableHTML += `
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
- <td><strong>Total cost: ${totalCost}</strong></td>
-</tr>`
+ <td><strong>Total cost: <span id="total-cost">${totalCost}</span></strong></td>
+</tr>`;
+
+table.innerHTML = tableHTML;
+
+localStorage.setItem('totalCost', totalCost);
+
+// Adding event listeners for each button
+document.querySelectorAll('.increase').forEach(button => {
+ button.addEventListener('click', function() {
+ const productId = this.dataset.productid;
+ increaseValue(productId);
+ });
+});
+
+document.querySelectorAll('.decrease').forEach(button => {
+ button.addEventListener('click', function() {
+ const productId = this.dataset.productid;
+ decreaseValue(productId);
+ });
+});
+
+document.querySelectorAll('.remove').forEach(button => {
+
+ button.addEventListener('click', function() {
+ const productId = button.closest('tr').dataset.productid;
+ removeItem(productId);
+ });
+});
+
+
+function increaseValue(productId) {
+ const inputField = document.querySelector(`.number-input[data-productid="${productId}"]`);
+ let value = parseInt(inputField.value, 10);
+ value = isNaN(value) ? 0 : value;
+ value++;
+ inputField.value = value;
+ updateItemTotalPrice(productId, value);
+}
-localStorage.setItem('totalCost', totalCost)
+function decreaseValue(productId) {
+ const inputField = document.querySelector(`.number-input[data-productid="${productId}"]`);
+ let value = parseInt(inputField.value, 10);
+ value = isNaN(value) ? 0 : value;
+ value = value <= 1 ? 1 : value - 1;
+ inputField.value = value;
+ updateItemTotalPrice(productId, value);
+}
+
+function removeItem(productId) {
+ console.log("Trying to remove product with ID:", productId);
+
+ // Filter out the item to be removed based on productId. Keep items that do NOT match the productId.
+ shoppingCardItems = shoppingCardItems.filter(item => item.productid !== Number(productId));
+ shoppingCardItems = shoppingCardItems.filter(item => item.productid !== productId.toString());
+
+
+ // Update localStorage with the new, filtered list
+ localStorage.setItem('shoppingCardItems', JSON.stringify(shoppingCardItems));
+
+ // Find and remove the item's row from the table
+ const itemRow = document.querySelector(`tr[data-productid="${productId}"]`);
+ if (itemRow) {
+ itemRow.remove();
+ } else {
+ console.error('Item row not found');
+ }
+
+ // Update the total cost to reflect the item removal
+ updateTotalCost();
+}
+
+
+function updateItemTotalPrice(productId, quantity) {
+ const pricePerUnit = parseFloat(document.querySelector(`.total-price-for-item[data-productid="${productId}"]`).getAttribute('data-price'));
+ const totalPriceForItem = quantity * pricePerUnit;
+ document.querySelector(`.total-price-for-item[data-productid="${productId}"]`).textContent = totalPriceForItem.toFixed(2);
+ updateTotalCost();
+}
-function handleProceedCheckout(){
- window.location.href="/checkout"
+function updateTotalCost() {
+ let newTotalCost = 0;
+ document.querySelectorAll('.total-price-for-item').forEach(item => {
+ newTotalCost += parseFloat(item.textContent);
+ });
+ document.getElementById('total-cost').textContent = newTotalCost.toFixed(2);
+ localStorage.setItem('totalCost', newTotalCost);
}
+function handleProceedCheckout() {
+ window.location.href = "/checkout";
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 5eb13ee6ca5c2d8522fd4107bb078d694bcb719b..b65cfc4a435d1f509a392e1ed0a99db493a150d6 100644
--- a/public/style.css
+++ b/public/style.css
@@ -636,104 +636,104 @@ ul{
.text {font-size: 8px}
}
+/******************** test ********************/
-
-/* ---------------Cart page--------------*/
-.prods-container{
- max-width: 650px;
- justify-content: space-around;
+form {
+ width: 300px;
margin: 0 auto;
+ text-align: center;
+ padding-top: 50px;
}
-.prods-container .gg-close-o{
- font-size: 25px;
- margin-left: 10px;
- margin-right: 10px;
+.value-button {
+ display: inline-block;
+ border: 1px solid #ddd;
+ margin: 0px;
+ width: 40px;
+ height: 20px;
+ text-align: center;
+ vertical-align: middle;
+ padding: 11px 0;
+ background: #eee;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.value-button:hover {
cursor: pointer;
}
-.prods-container .gg-add{
- font-size: 25px;
- margin-left: 10px;
- margin-right: 10px;
- cursor: pointer;
+form #decrease {
+ margin-right: -4px;
+ border-radius: 8px 0 0 8px;
}
-.prods-container .gg-remove{
- font-size: 25px;
- margin-left: 10px;
- margin-right: 10px;
- cursor: pointer;
+form #increase {
+ margin-left: -4px;
+ border-radius: 0 8px 8px 0;
}
-.prod-header{
- width: 100%;
- max-width: 650px;
- display: flex;
- justify-content: flex-start;
- border-bottom: 4px solid #5a5e5f;
- margin: 0 auto;
- position: relative;
+form #input-wrap {
+ margin: 0px;
+ padding: 0px;
}
-.prod-title{
- width: 45%;
+input#number {
+ text-align: center;
+ border: none;
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+ margin: 0px;
+ width: 40px;
+ height: 40px;
}
-.price{
- width: 15%;
- display: flex;
- align-items: center;
- border-bottom: 4px solid #5a5e5f;
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
}
-.quantity{
- width: 30%;
- display: flex;
- align-items: center;
- border-bottom: 4px solid #5a5e5f;
-}
-.total{
- width: 10%;
- border-bottom: 4px solid #5a5e5f;
- display: flex;
- align-items: center;
-}
+/* ---------------Cart page--------------*/
-.prod{
- width: 45%;
- display: flex;
- justify-content: space-around;
- align-items: center;
- padding: 10px 0;
- border-bottom: 1px solid #5a5e5f;
+.forms{
+ margin-top: -8%;
}
-.prods{
- width: 100%;
- display: flex;
- flex-wrap: wrap;
+.remove{
+ border-style: none;
+ border-radius: 20px;
+ font-weight: bold;
+ background-color: rgba(0, 0, 0, 0.1);
}
-.prod img{
- width: 75px;
+.remove:hover{
+ background-color: rgba(0, 0, 0, 0.3);
}
-.basketTotalContainer{
- display: flex;
- justify-content: flex-end;
- width: 100%;
- padding: 10px 0;
+.value-button{
+ align-content: center;
+ border-radius: 20px;
+ background-color: rgba(0, 0, 0, 0.1);
+ font-size: 20px;
+ font-weight: bold;
}
-.basketTotalTitle{
- width: 30%;
+.value-button:hover{
+ background-color: rgba(0, 0, 0, 0.3);
}
-.basketTotal{
- width: 10%;
+.number-input{
+ border-style: none;
+ width: 12%;
+ text-align: center;
}
+/**************Checkout***************/
.buy{
margin-bottom: 20px;
diff --git a/views/checkout.hbs b/views/checkout.hbs
index d2a946195fa74b142acb7f9aea52d9cb5c8a2ba5..72800a84e7db5a1b8906032c65f7dee78c2c1175 100644
--- a/views/checkout.hbs
+++ b/views/checkout.hbs
@@ -62,8 +62,8 @@
<input type="text" class="form-control" id="City" name="city" placeholder="Enter your city">
</div>
<div class="form-group">
- <label for="city">Zip-code</label>
- <input type="text" class="form-control" id="ZipCode" name="zipCode" placeholder="Enter your zip code">
+ <label for="city">Post-code</label>
+ <input type="text" class="form-control" id="ZipCode" name="postCode" placeholder="Enter your post code">
</div>
<div class="form-group">
<label for="pnumber">Phone Number</label>