From 2f84f17475d66f99fd4b2d1fdfbdbe8300c0aa33 Mon Sep 17 00:00:00 2001 From: Dslak Date: Thu, 9 Sep 2021 15:53:41 +0200 Subject: [PATCH] update cart qty --- api/cart_qty_update.php | 42 ++++++++++++++++++++++++++++ components/cart/cart.html | 26 ++++++++++-------- components/cart/cart.js | 58 +++++++++++++++++++++++++++++++++++++++ components/cart/cart.scss | 45 +++++++++++++++++++++++++++++- src/js/index.js | 11 ++++++++ 5 files changed, 170 insertions(+), 12 deletions(-) create mode 100644 api/cart_qty_update.php diff --git a/api/cart_qty_update.php b/api/cart_qty_update.php new file mode 100644 index 0000000..1a8e28b --- /dev/null +++ b/api/cart_qty_update.php @@ -0,0 +1,42 @@ +getConnection(); + +$pid = trim($_POST['pid']); +$price = trim($_POST['price']); +$qty = trim($_POST['qty']); + +$exists = false; + +foreach($_SESSION['CART'] as $k => $item) { + if($item['pid'] == $pid) { + $_SESSION['CART'][$k]['qty'] = intval($qty); + $exists = true; + } +} + +if(!$exists) { + $_SESSION['CART'][] = array("pid" => intval($pid), "price" => intval($price), "qty" => intval($qty)); +} + +//print_r($_SESSION['CART']); +http_response_code(200); +echo json_encode( + array( + "status" => 200, + "cart" => array_values($_SESSION['CART']) + )); + +?> + diff --git a/components/cart/cart.html b/components/cart/cart.html index 8067854..de5bf24 100644 --- a/components/cart/cart.html +++ b/components/cart/cart.html @@ -13,11 +13,11 @@
-
+
Prodotto
+
Quantità
Prezzo
-
Quantità
Totale
@@ -31,26 +31,30 @@ $total += $item['price'] * $item['qty']; ?> -
+
-
+
-
- € +
+ + + + +
-
- +
+ €
-
+
€
-
+
@@ -60,7 +64,7 @@ ?>
-
+
Subtotale € diff --git a/components/cart/cart.js b/components/cart/cart.js index b45b142..bbffbd9 100644 --- a/components/cart/cart.js +++ b/components/cart/cart.js @@ -12,7 +12,12 @@ $(document).ready( () => { items.each( (i,e) => { const item = $(e) const pid = item.data('pid') + const partial = item.data('price') const remove = item.find('.remove') + const plus = item.find('.qty-plus') + const minus = item.find('.qty-minus') + const input = item.find('.qty-input') + const partialValue = item.find('.partial') remove.off('.click').on('click.click', () => { Apis.removeFromCart(pid).then( (data) => { @@ -35,6 +40,59 @@ $(document).ready( () => { }) }) + plus.off('.click').on('click.click', () => { + input.val(parseInt(input.val())+1) + Apis.updateCartQty(pid, partial, input.val()).then( (data) => { + + const item = data.cart.find(item => item.pid == pid) + if(data.cart.length) { + const headerCart = $('.component-header .cart-cta .counter') + if(headerCart.length) { + headerCart.text(data.cart.length) + } + let total = 0 + let part = item.price * item.qty + $.each(data.cart, (i, e) => { + total += parseFloat(e.price) * parseInt(e.qty) + }) + price.text(new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'}).format(total)) + partialValue.text(new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'}).format(part)) + } else { + window.location = '/acquistare' + } + }).catch( (error) => { + console.error(error) + }) + }) + + minus.off('.click').on('click.click', () => { + if(input.val() == 1) { + remove.trigger('click') + } else { + input.val(parseInt(input.val())-1) + Apis.updateCartQty(pid, partial, input.val()).then( (data) => { + const item = data.cart.find(item => item.pid == pid) + if(data.cart.length) { + const headerCart = $('.component-header .cart-cta .counter') + if(headerCart.length) { + headerCart.text(data.cart.length) + } + let total = 0 + let part = item.price * item.qty + $.each(data.cart, (i, e) => { + total += parseFloat(e.price) * parseInt(e.qty) + }) + price.text(new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'}).format(total)) + partialValue.text(new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'}).format(part)) + } else { + window.location = '/acquistare' + } + }).catch( (error) => { + console.error(error) + }) + } + }) + }) } }) diff --git a/components/cart/cart.scss b/components/cart/cart.scss index cd696bd..10ca16d 100644 --- a/components/cart/cart.scss +++ b/components/cart/cart.scss @@ -16,7 +16,7 @@ .item-col { border-bottom: 1px solid $black-alpha; - padding-top: 10px; + padding-top: 20px; padding-bottom: 10px; .image-container { @@ -43,6 +43,49 @@ padding: 0; background: none; } + + .qty-box { + display: block; + position: relative; + height: 30px; + width: 100%; + max-width: 100px; + background: $white; + + .qty-minus, + .qty-plus { + position: absolute; + top: 50%; + height: 30px; + width: 20px; + line-height: 30px; + color: $gray; + font-size:$font-16; + text-align: center; + transform: translateY(-50%); + cursor: pointer; + padding: 0; + } + .qty-minus { + left: 5px; + } + .qty-plus { + right: 5px; + } + + .qty-input { + position: absolute; + top: 50%; + left: 25px; + height: 100%; + width: calc(100% - 50px); + text-align: center; + transform: translateY(-50%); + border: none; + color: $brown; + @include font-style($font-serif, 400, $font-18); + } + } } &:last-of-type { diff --git a/src/js/index.js b/src/js/index.js index d814ace..6a0d258 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -34,6 +34,17 @@ window.Spinner = (action = 'show') => { } } +window.Apis.updateCartQty = (pid, price, qty) => { + return new Promise((resolve, reject) => { + $.post(apiUrl + `/cart_qty_update.php?buster=${new Date().getTime()}&sid=${sessionStorage.getItem('sid')}`, + {pid: pid, price: price, qty: qty}).done( (data) => { + resolve(data) + }).fail((error, status) => { + reject(error) + }) + }) +} + window.Apis.addToCart = (pid, price, qty) => { return new Promise((resolve, reject) => { $.post(apiUrl + `/cart_add.php?buster=${new Date().getTime()}&sid=${sessionStorage.getItem('sid')}`,