update cart qty

api/cart_qty_update.php

@@ -0,0 +1,42 @@
+<?php
+session_start();
+session_id(trim($_GET['sid']));
+include_once './config.php';
+include_once './database.php';
+
+header("Access-Control-Allow-Origin: *");
+header("Content-Type: application/json; charset=UTF-8");
+header("Access-Control-Allow-Methods: POST");
+header("Access-Control-Max-Age: 3600");
+header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
+
+$databaseService = new DatabaseService();
+$conn = $databaseService->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'])
+  ));
+
+?>
+

components/cart/cart.html

@@ -13,11 +13,11 @@
     <div class="container">
       <div class="list">
 
-        <div class="row mx-0 header">
+        <div class="row mx-0 header d-none d-sm-flex">
           <div class="col-2 col-md-1 ml-auto d-none d-sm-block"></div>
           <div class="col-4 col-md-3"> Prodotto </div>
+          <div class="col-2 col-md-2"> Quantità </div>
           <div class="col-2 col-md-1"> Prezzo </div>
-          <div class="col-2 col-md-1"> Quantità </div>
           <div class="col-2 col-md-1"> Totale </div>
           <div class="col-2 col-md-1 mr-auto"></div>
         </div>
@@ -31,26 +31,30 @@
             $total += $item['price'] * $item['qty'];
         ?>
 
-        <div class="row mx-0 item" data-pid="<?= $r['id'];?>">
+        <div class="row mx-0 item" data-pid="<?= $r['id'];?>" data-price="<?= $r['id'];?>">
           <div class="item-col col-2 col-md-1 ml-auto pl-0 d-none d-sm-block">
             <div class="image-container">
               <img class="image" src="/images/products/<?= $r['id'];?>.png">
             </div>
           </div>
-          <div class="item-col col-4 col-md-3 py-3">
+          <div class="item-col col-12 col-md-3 pt-2 pb-3">
             <span class="name"><?= $r['name']?></span>
             <?= $r['type'];?>
           </div>
-          <div class="item-col col-2 col-md-1 py-3">
-            <?= money_format('%.2n',$r['price']);?> &euro;
+          <div class="item-col col-4 col-md-2 pt-2 pb-3">
+            <span class="qty-box">
+              <button class="qty-minus icon-minus"></button>
+              <input type="text" class="qty-input" pattern="[0-9]+" value="<?= $item['qty'];?>">
+              <button class="qty-plus icon-plus"></button>
+            </span>
           </div>
-          <div class="item-col col-2 col-md-1 py-3">
-            <?= $item['qty'];?>
+          <div class="item-col col-3 col-md-1 pt-2 pb-3">
+            <?= money_format('%.2n',$r['price']);?> &euro;
           </div>
-          <div class="item-col col-2 col-md-1 py-3">
+          <div class="item-col col-3 col-md-1 pt-2 pb-3 partial">
             <?= money_format('%.2n',$r['price'] * $item['qty']);?> &euro;
           </div>
-          <div class="item-col col-2 col-md-1 mr-auto pr-0 py-3 text-center">
+          <div class="item-col col-2 col-md-1 mr-auto pr-0 pt-2 pb-3 text-center">
             <button class="remove icon-close"></button>
           </div>
         </div>
@@ -60,7 +64,7 @@
         ?>
 
         <div class="row mx-0 place py-4">
-          <div class="col-10 col-md-8 mx-auto">
+          <div class="col-10 col-md-9 mx-auto">
             <span class="total">
               Subtotale
               <span class="price"><?= money_format('%.2n',$total);?> &euro;</span>

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)
+          })
+        }
+      })
+
     })
   }
 })

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 {

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')}`,