add apis and add/remove to cart

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'])
   ));
 
 ?>

api/cart_del.php

@@ -0,0 +1,32 @@
+<?php
+session_start();
+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']);
+
+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'])
+  ));
+
+?>
+

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');

components/buy/buy.html

@@ -99,7 +99,7 @@
             <span class="name"></span>
             <span class="qty"></span>
             <span class="total"></span>
-            <a href="/carrello" class="goto button button-brown mt-4 mb-2">continua gli acquisti</a>
+            <a href="/carrello" class="goto button button-brown mt-4 mb-2">concludi ordine</a>
             <button class="close button button-white w-100">continua gli acquisti</button>
           </div>
         </div>
@@ -108,3 +108,6 @@
   </div>
 </div>
 
+<?php
+  //unlink($_SESSION['CART']);
+?>

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)

components/cart/cart.html

@@ -0,0 +1,75 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+  setlocale(LC_MONETARY, 'it_IT.UTF-8');
+
+  if(count($_SESSION['CART']) <= 0) {
+    header("location: /acquistare");
+  }
+?>
+
+
+<div class="component-cart">
+
+    <div class="list">
+      <div class="container">
+
+        <div class="row header">
+          <div class="col-2 col-md-1 ml-auto"></div>
+          <div class="col-2 col-md-3"> Prodotto </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>
+
+        <?php
+          $total = 0;
+          foreach($_SESSION['CART'] as $item) {
+            $q = mysqli_query($conn, "SELECT * FROM products WHERE id = ".$item['pid']);
+            $r = mysqli_fetch_array($q);
+
+            $total += $item['price'] * $item['qty'];
+        ?>
+
+        <div class="row item" data-pid="<?= $r['id'];?>">
+          <div class="item-col col-2 col-md-1 ml-auto pl-0">
+            <div class="image-container">
+              <img class="image" src="/images/products/<?= $r['id'];?>.png">
+            </div>
+          </div>
+          <div class="item-col col-2 col-md-3 py-3">
+            <?= $r['type']." - ".$r['name'];?>
+          </div>
+          <div class="item-col col-2 col-md-1 py-3">
+            <?= money_format('%.2n',$r['price']);?>
+          </div>
+          <div class="item-col col-2 col-md-1 py-3">
+            <?= $item['qty'];?>
+          </div>
+          <div class="item-col col-2 col-md-1 py-3">
+            <?= money_format('%.2n',$r['price'] * $item['qty']);?>
+          </div>
+          <div class="item-col col-2 col-md-1 mr-auto pr-0 py-3 text-center">
+            <button class="remove icon-close"></button>
+          </div>
+        </div>
+
+        <?php
+          }
+        ?>
+
+        <div class="row place py-4">
+          <div class="col-8 mx-auto">
+            <span class="total">
+              Subtotale
+              <span class="price"><?= money_format('%.2n',$total);?></span>
+            </span>
+            <span class="tax">tasse incluse</span>
+
+            <button class="place-order button button-big button-brown">concludi ordine</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

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

components/header/header.html

@@ -25,10 +25,12 @@
       <ul class="menu">
         <li class="item <?php if($getQ[0] == 'conoscere') { echo "active";}?>">
           <a href="/conoscere" class="label">conoscere</a>
-        </li><!--
+        </li>
+        <!--
         <li class="item <?php if($getQ[0] == 'produrre') { echo "active";}?>">
           <a href="/produrre" class="label">produrre</a>
-        </li>-->
+        </li>
+        -->
         <li class="item <?php if($getQ[0] == 'acquistare') { echo "active";}?>">
           <a href="/acquistare" class="label">acquistare</a>
         </li>

components/sectionHeader/sectionHeader.html

@@ -16,6 +16,9 @@
     case 'acquistare':
         $section_label = 'acquistare';
     break;
+    case 'carrello':
+        $section_label = 'carrello';
+    break;
   }
 
 ?>

pages/carrello.ejs

@@ -0,0 +1,2 @@
+
+${require('../components/cart/cart.html')}

src/fonts/icomoon.svg

@@ -14,4 +14,5 @@
 <glyph unicode="&#xe904;" glyph-name="angle-top" d="M933.487 189.965l47.292 47.292-468.778 468.778-468.778-468.778 47.292-47.292 421.487 421.487z" />
 <glyph unicode="&#xe905;" glyph-name="angle-right" d="M253.965 26.513l47.292-47.292 468.778 468.778-468.778 468.778-47.292-47.292 421.487-421.487z" />
 <glyph unicode="&#xe906;" glyph-name="angle-left" d="M770.035 869.487l-47.292 47.292-468.778-468.778 468.778-468.778 47.292 47.292-421.487 421.487z" />
+<glyph unicode="&#xe907;" glyph-name="close" d="M811.532 805.42l57.959-57.973-657.024-656.865-57.959 57.973zM869.43 148.479l-57.973-57.959-656.865 657.024 57.973 57.959z" />
 </font></defs></svg>

src/fonts/selection.json

@@ -1 +1 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M498.102 56.824c-115.187 0-211.767 96.565-211.767 215.468h-167.207v78.016h0.363v538.852h-0.363v78.016h784.003v-7.693h1.742v-687.408h-78.016v0.218h-113.213c0-118.903-100.353-215.468-215.541-215.468zM498.102 131.139c78.030 0 141.226 63.124 141.226 141.154h-278.679c0-78.030 59.422-141.154 137.453-141.154zM197.579 350.308h88.756v55.736h74.314v-55.736h278.679v55.736h74.314v-55.736h113.213v538.852h-629.278z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["buy"],"grid":0},"attrs":[{}],"properties":{"order":117,"id":0,"name":"buy","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["minus"],"grid":0},"attrs":[{}],"properties":{"order":118,"id":1,"name":"minus","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M471.011 47.47h81.976v929.060h-81.976z","M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["plus"],"grid":0},"attrs":[{},{}],"properties":{"order":119,"id":2,"name":"plus","prevSize":32,"code":59650},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M90.513 253.965l-47.292 47.292 468.778 468.778 468.778-468.778-47.292-47.292-421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-down"],"grid":0},"attrs":[{}],"properties":{"order":119,"id":3,"name":"angle-down","prevSize":32,"code":59651},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M933.487 770.035l47.292-47.292-468.778-468.778-468.778 468.778 47.292 47.292 421.487-421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-top"],"grid":0},"attrs":[{}],"properties":{"order":122,"id":6,"prevSize":32,"code":59652,"name":"angle-top"},"setIdx":0,"setId":0,"iconIdx":4},{"icon":{"paths":["M253.965 933.487l47.292 47.292 468.778-468.778-468.778-468.778-47.292 47.292 421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-right"],"grid":0},"attrs":[{}],"properties":{"order":120,"id":4,"prevSize":32,"code":59653,"name":"angle-right"},"setIdx":0,"setId":0,"iconIdx":5},{"icon":{"paths":["M770.035 90.513l-47.292-47.292-468.778 468.778 468.778 468.778 47.292-47.292-421.487-421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-left"],"grid":0},"attrs":[{}],"properties":{"order":121,"id":5,"prevSize":32,"code":59654,"name":"angle-left"},"setIdx":0,"setId":0,"iconIdx":6}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":false,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"UntitledProject":"ZjQ5ODNjZDkzZGRhNGRlZDg3YmQ2Njc5YTQyNWU2Y2QjMSMxNTY0MDUxMDkxIyMj"},"showGrid":false}}
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M498.102 56.824c-115.187 0-211.767 96.565-211.767 215.468h-167.207v78.016h0.363v538.852h-0.363v78.016h784.003v-7.693h1.742v-687.408h-78.016v0.218h-113.213c0-118.903-100.353-215.468-215.541-215.468zM498.102 131.139c78.030 0 141.226 63.124 141.226 141.154h-278.679c0-78.030 59.422-141.154 137.453-141.154zM197.579 350.308h88.756v55.736h74.314v-55.736h278.679v55.736h74.314v-55.736h113.213v538.852h-629.278z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["buy"],"grid":0},"attrs":[{}],"properties":{"order":117,"id":0,"name":"buy","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["minus"],"grid":0},"attrs":[{}],"properties":{"order":118,"id":1,"name":"minus","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M471.011 47.47h81.976v929.060h-81.976z","M976.53 470.996v81.976h-929.060v-81.976z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["plus"],"grid":0},"attrs":[{},{}],"properties":{"order":147,"id":2,"name":"plus","prevSize":32,"code":59650},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M811.532 154.58l57.959 57.973-657.024 656.865-57.959-57.973z","M869.43 811.521l-57.973 57.959-656.865-657.024 57.973-57.959z"],"attrs":[{},{}],"tags":["close"],"grid":0,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":148,"id":7,"prevSize":32,"code":59655,"name":"close"},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M90.513 253.965l-47.292 47.292 468.778 468.778 468.778-468.778-47.292-47.292-421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-down"],"grid":0},"attrs":[{}],"properties":{"order":119,"id":3,"name":"angle-down","prevSize":32,"code":59651},"setIdx":0,"setId":0,"iconIdx":4},{"icon":{"paths":["M933.487 770.035l47.292-47.292-468.778-468.778-468.778 468.778 47.292 47.292 421.487-421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-top"],"grid":0},"attrs":[{}],"properties":{"order":122,"id":4,"prevSize":32,"code":59652,"name":"angle-top"},"setIdx":0,"setId":0,"iconIdx":5},{"icon":{"paths":["M253.965 933.487l47.292 47.292 468.778-468.778-468.778-468.778-47.292 47.292 421.487 421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-right"],"grid":0},"attrs":[{}],"properties":{"order":120,"id":5,"prevSize":32,"code":59653,"name":"angle-right"},"setIdx":0,"setId":0,"iconIdx":6},{"icon":{"paths":["M770.035 90.513l-47.292-47.292-468.778 468.778 468.778 468.778 47.292-47.292-421.487-421.487z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["angle-left"],"grid":0},"attrs":[{}],"properties":{"order":121,"id":6,"prevSize":32,"code":59654,"name":"angle-left"},"setIdx":0,"setId":0,"iconIdx":7}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":false,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"UntitledProject":"ZjQ5ODNjZDkzZGRhNGRlZDg3YmQ2Njc5YTQyNWU2Y2QjMSMxNTY0MDUxMDkxIyMj"},"showGrid":false}}

src/js/index.js

@@ -26,9 +26,20 @@ window.siteUrl = ENV.SITE_URL
 
 window.Apis = window.Apis || {}
 
-window.Apis.addToCart = (sid, pid, qty) => {
+window.Apis.addToCart = (pid, price, qty) => {
   return new Promise((resolve, reject) => {
-    $.post(apiUrl + `/cart_add.php?buster=${new Date().getTime()}`, {sid: sid, pid: pid, qty: qty}).done( (data) => {
+    $.post(apiUrl + `/cart_add.php?buster=${new Date().getTime()}`, {pid: pid, price: price, qty: qty}).done( (data) => {
+      resolve(data)
+    }).fail((error, status) => {
+      reject(error)
+    })
+  })
+}
+
+
+window.Apis.removeFromCart = (pid) => {
+  return new Promise((resolve, reject) => {
+    $.post(apiUrl + `/cart_del.php?buster=${new Date().getTime()}`, {pid: pid}).done( (data) => {
       resolve(data)
     }).fail((error, status) => {
       reject(error)

src/scss/icons.scss

@@ -34,6 +34,9 @@
 .icon-plus:before {
   content: "\e902";
 }
+.icon-close:before {
+  content: "\e907";
+}
 .icon-angle-down:before {
   content: "\e903";
 }

src/scss/main.scss

@@ -20,3 +20,4 @@
 @import "./components/buy/buy.scss";
 @import "./components/breadcrumb/breadcrumb.scss";
 @import "./components/homeTemplate/homeTemplate.scss";
+@import "./components/cart/cart.scss";