From 7a3e56b00763cd5b1631de777f9233896da9dc22 Mon Sep 17 00:00:00 2001 From: Dslak Date: Wed, 20 Jan 2021 16:28:50 +0100 Subject: [PATCH] add apis and add/remove to cart --- api/cart_add.php | 18 ++++- api/cart_del.php | 32 +++++++++ components/breadcrumb/breadcrumb.html | 4 ++ components/buy/buy.html | 5 +- components/buy/buy.js | 6 +- components/cart/cart.html | 75 +++++++++++++++++++ components/cart/cart.js | 40 +++++++++++ components/cart/cart.scss | 76 ++++++++++++++++++++ components/header/header.html | 6 +- components/sectionHeader/sectionHeader.html | 3 + pages/carrello.ejs | 2 + src/fonts/icomoon.eot | Bin 1576 -> 1632 bytes src/fonts/icomoon.svg | 1 + src/fonts/icomoon.ttf | Bin 1412 -> 1468 bytes src/fonts/icomoon.woff | Bin 1488 -> 1544 bytes src/fonts/selection.json | 2 +- src/js/index.js | 15 +++- src/scss/icons.scss | 3 + src/scss/main.scss | 1 + 19 files changed, 276 insertions(+), 13 deletions(-) create mode 100644 api/cart_del.php create mode 100644 components/cart/cart.html create mode 100644 components/cart/cart.js create mode 100644 components/cart/cart.scss create mode 100644 pages/carrello.ejs diff --git a/api/cart_add.php b/api/cart_add.php index 663073c..eeae506 100644 --- a/api/cart_add.php +++ b/api/cart_add.php @@ -12,17 +12,29 @@ header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers $databaseService = new DatabaseService(); $conn = $databaseService->getConnection(); -$sid = trim($_POST['sid']); $pid = trim($_POST['pid']); +$price = trim($_POST['price']); $qty = trim($_POST['qty']); -$_SESSION['CART'][] = array("pid" => intval($pid), "qty" => intval($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" => $_SESSION['CART'] + "cart" => array_values($_SESSION['CART']) )); ?> diff --git a/api/cart_del.php b/api/cart_del.php new file mode 100644 index 0000000..97ad48b --- /dev/null +++ b/api/cart_del.php @@ -0,0 +1,32 @@ +getConnection(); + +$pid = trim($_POST['pid']); + +foreach($_SESSION['CART'] as $k => $item) { + if($item['pid'] == $pid) { + unset($_SESSION['CART'][$k]); + } +} + +//print_r($_SESSION['CART']); +http_response_code(200); +echo json_encode( + array( + "status" => 200, + "cart" => array_values($_SESSION['CART']) + )); + +?> + diff --git a/components/breadcrumb/breadcrumb.html b/components/breadcrumb/breadcrumb.html index 063dcd5..6800eaa 100644 --- a/components/breadcrumb/breadcrumb.html +++ b/components/breadcrumb/breadcrumb.html @@ -17,6 +17,10 @@ if($getQ[1]) {$levels[1] = array($getQ[2], '/acquistare/'.$getQ[1].'/'.$getQ[2]);} break; + case 'carrello': + $levels[0] = array('carrello', '/carrello'); + break; + case 'due-cucchiai-di-salute': $levels[0] = array('raccontare', '/raccontare'); $levels[1] = array('Due cucchiai di salute', '/due-cucchiai-di-salute'); diff --git a/components/buy/buy.html b/components/buy/buy.html index 8709186..a635c3e 100644 --- a/components/buy/buy.html +++ b/components/buy/buy.html @@ -99,7 +99,7 @@ - continua gli acquisti + concludi ordine @@ -108,3 +108,6 @@ + diff --git a/components/buy/buy.js b/components/buy/buy.js index 0354a9c..216af6e 100644 --- a/components/buy/buy.js +++ b/components/buy/buy.js @@ -50,11 +50,9 @@ $(document).ready( () => { modalImage.prop('src', `/images/products/${pid}.png`) modalName.text(name) modalQty.text(`Quantità: ${selectedQty}`) - modalTotal.text(`Costo totale: ${new Intl.NumberFormat('en-US', { style: 'currency', currency: 'EUR'}).format( price * selectedQty)}`) - - Apis.addToCart(null, pid, selectedQty).then( (data) => { - console.log(data) + modalTotal.text(`Costo totale: ${new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'}).format( price * selectedQty)}`) + Apis.addToCart(pid, price, selectedQty).then( (data) => { const headerCart = $('.component-header .cart-cta .counter') if(headerCart.length) { headerCart.text(data.cart.length) diff --git a/components/cart/cart.html b/components/cart/cart.html new file mode 100644 index 0000000..6581a3c --- /dev/null +++ b/components/cart/cart.html @@ -0,0 +1,75 @@ + + + +
+ +
+
+ +
+
+
Prodotto
+
Prezzo
+
Quantità
+
Totale
+
+
+ + + +
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + +
+
+ + Subtotale + + + tasse incluse + + +
+
+
+
+
+ diff --git a/components/cart/cart.js b/components/cart/cart.js new file mode 100644 index 0000000..b45b142 --- /dev/null +++ b/components/cart/cart.js @@ -0,0 +1,40 @@ + +$(document).ready( () => { + console.log('Load component - cart') + + const component = $('.component-cart') + + if(component.length) { + const items = component.find('.list .item') + const total = component.find('.total') + const price = total.find('.price') + + items.each( (i,e) => { + const item = $(e) + const pid = item.data('pid') + const remove = item.find('.remove') + + remove.off('.click').on('click.click', () => { + Apis.removeFromCart(pid).then( (data) => { + if(data.cart.length) { + const headerCart = $('.component-header .cart-cta .counter') + if(headerCart.length) { + headerCart.text(data.cart.length) + } + item.fadeOut() + let total = 0 + $.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)) + } else { + window.location = '/acquistare' + } + }).catch( (error) => { + console.error(error) + }) + }) + + }) + } +}) diff --git a/components/cart/cart.scss b/components/cart/cart.scss new file mode 100644 index 0000000..fa210ea --- /dev/null +++ b/components/cart/cart.scss @@ -0,0 +1,76 @@ +@import "../../src/scss/variables.scss"; +@import "../../src/scss/mixins.scss"; + +.component-cart { + padding: 10px 0 40px 0; + + .header { + @include font-style($font-sans, 700, $font-10); + color: $gray; + padding: 20px 0; + } + + .item { + @include font-style($font-sans, 400, $font-10); + color: $gray; + + .item-col { + border-bottom: 1px solid $black-alpha; + padding-top: 10px; + padding-bottom: 10px; + + .image-container { + display: flex; + background: $white; + + .image { + display: block; + width: 40%; + margin: auto; + padding: 5px; + } + } + + .remove { + font-size: $font-22; + padding: 0; + background: none; + } + } + + &:last-of-type { + .item-col { + border-bottom: none; + } + } + } + + .place { + display: flex; + text-align: right; + + .total { + display: block; + @include font-style($font-sans, 700, $font-18); + color: $gray; + height: 34px; + + .price { + @include font-style($font-serif, 400, $font-28); + color: $brown; + padding-left: 10px; + } + } + + .tax { + display: block; + @include font-style($font-sans, 400, $font-12); + color: $gray; + } + + .place-order { + @include font-style($font-serif, 'regular', $font-20); + margin: 20px 0 0 auto; + } + } +} diff --git a/components/header/header.html b/components/header/header.html index eac36bf..0dec747 100644 --- a/components/header/header.html +++ b/components/header/header.html @@ -25,10 +25,12 @@