add extra address and place cart setup

api/cart_place.php

@@ -0,0 +1,26 @@
+<?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();
+
+$body = $_POST['body'];
+
+http_response_code(200);
+echo json_encode(
+  array(
+    "status" => 200,
+    "cart" => array_values($_SESSION['CART']),
+    "shipping" => $body
+  ));
+
+?>
+

components/buy/buy.html

@@ -50,7 +50,7 @@
               <button class="button button-brown add-to-cart"
                       data-pid="<?= $r['id'];?>" data-name="<?= $r['name'];?>" data-price="<?= $r['price'];?>">
                 <span class="icon icon-buy my-auto ml-auto mr-1"></span>
-                <span class="my-auto mr-auto ml-1 h-100">aggiungi</a>
+                <span class="label">aggiungi</a>
               </button>
             </div>
           </div>

components/buy/buy.scss

@@ -143,6 +143,7 @@
           width: calc(50% - 4px);
 
           .qty {
+            border: none;
             appearance: none;
             -moz-appearance: textfield;
             &:-webkit-inner-spin-button {
@@ -176,10 +177,16 @@
           position: relative;
           display: inline-flex;
           float: right;
-          height: 44px;
+          height: 40px;
           padding: 0;
           @include font-style($font-serif, 'regular', $font-28);
           width: calc(50% - 4px);
+
+          .label {
+            height: 36px;
+            line-height: 36px;
+            margin: 0 auto 0 5px;
+          }
         }
       }
     }

components/checkout/checkout.html

@@ -1,6 +1,10 @@
 <?php
   @include('components/breadcrumb/breadcrumb.php');
   setlocale(LC_MONETARY, 'it_IT.UTF-8');
+
+  if(count($_SESSION['CART']) <= 0) {
+    header("location: /acquistare");
+  }
 ?>
 
 
@@ -15,35 +19,35 @@
         <div class="row">
           <div class="col-12 col-md-6 pr-2 pr-md-4">
             <span class="label">Nome *</span>
-            <input type="text" name="first_name" class="input-text">
+            <input type="text" name="first_name" class="input input-text" required>
           </div>
           <div class="col-12 col-md-6 pr-2 pr-md-4">
             <span class="label">Cognome *</span>
-            <input type="text" name="last_name" class="input-text">
+            <input type="text" name="last_name" class="input input-text" required>
           </div>
           <div class="col-12 col-md-6 pr-2 pr-md-4">
             <span class="label">E-mail *</span>
-            <input type="email" name="email" class="input-text">
+            <input type="email" name="email" class="input input-text" required>
           </div>
           <div class="col-12 col-md-6 pr-2 pr-md-4">
             <span class="label">Telefono</span>
-            <input type="tel" name="phone" class="input-text">
+            <input type="tel" name="phone" class="input input-text">
           </div>
           <div class="col-12 col-md-6 pr-2 pr-md-4">
             <span class="label">Indirizzo *</span>
-            <input type="text" name="address" class="input-text">
+            <input type="text" name="address" class="input input-text" required>
           </div>
           <div class="col-12 col-md-6 pr-2 pr-md-4">
             <span class="label">Città *</span>
-            <input type="text" name="city" class="input-text">
+            <input type="text" name="city" class="input input-text" required>
           </div>
           <div class="col-12 col-md-4 pr-2 pr-md-4 mr-auto">
             <span class="label">CAP *</span>
-            <input type="text" name="zip_code" class="input-text">
+            <input type="text" name="zip_code" class="input input-text" required>
           </div>
           <div class="col-12 col-md-4 pr-2 pr-md-4 mr-auto">
             <span class="label">Provincia *</span>
-            <select name="province" class="input-select">
+            <select name="province" class="input input-select" required>
               <?php
                 foreach($PROV as $k => $p) {
                   echo "<option value=\"".$k."\">".$p."</option>";
@@ -53,11 +57,12 @@
           </div>
           <div class="col-12 col-md-6 pr-2 pr-md-4">
             <span class="label">Scegli una password *</span>
-            <input type="password" name="password" class="input-text">
+            <input type="password" name="password" class="input input-text" required>
+            <span class="font-10">deve essere di almeno 8 caratteri contenere almeno un numero, un carattere maiuscolo, uno minuscolo</span>
           </div>
           <div class="col-12 col-md-6 pr-2 pr-md-4">
             <span class="label">Conferma password *</span>
-            <input type="password" name="password_confirm" class="input-text">
+            <input type="password" name="password_confirm" class="input input-text" required>
           </div>
           <div class="col-12 col-md-6 pr-2 pr-md-4">
             <span class="label">Vuoi spedire ad un indirizzo diverso?</span>
@@ -73,11 +78,104 @@
               </label>
           </div>
         </div>
+
+
+
+        <div class="row different-address">
+          <div class="col-12 col-md-6 pr-2 pr-md-4">
+            <span class="label">Indirizzo *</span>
+            <input type="text" name="x_address" class="input input-text" required>
+          </div>
+          <div class="col-12 col-md-6 pr-2 pr-md-4">
+            <span class="label">Città *</span>
+            <input type="text" name="x_city" class="input input-text" required>
+          </div>
+          <div class="col-12 col-md-4 pr-2 pr-md-4 mr-auto">
+            <span class="label">CAP *</span>
+            <input type="text" name="x_zip_code" class="input input-text" required>
+          </div>
+          <div class="col-12 col-md-4 pr-2 pr-md-4 mr-auto">
+            <span class="label">Provincia *</span>
+            <select name="x_province" class="input input-select" required>
+              <?php
+                foreach($PROV as $k => $p) {
+                  echo "<option value=\"".$k."\">".$p."</option>";
+                }
+              ?>
+            </select>
+          </div>
+        </div>
       </div>
 
       <div class="col-12 col-md-4 pb-5">
         <span class="title">Il tuo ordine</span>
         <span class="subtitle"></span>
+
+        <?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">
+          <div class="col-6 pl-0">
+            <?= $r['type']." - ".$r['name'];?>
+          </div>
+          <div class="col-3 text-right">
+            <?= $item['qty'];?>
+          </div>
+          <div class="col-3 text-right pr-0">
+            <?= money_format('%.2n',$r['price'] * $item['qty']);?>
+          </div>
+        </div>
+        <?php
+          }
+        ?>
+
+        <div class="row item">
+          <div class="col-6 pl-0">
+            Costi di spedizione
+          </div>
+          <div class="col-6 text-right pr-0">
+            <?= money_format('%.2n', 10);?>
+          </div>
+        </div>
+
+        <div class="row total">
+          <div class="col-6 pl-0">
+            Totale tasse incluse
+          </div>
+          <div class="col-6 text-right pr-0">
+            <?= money_format('%.2n', $total + 10);?>
+          </div>
+        </div>
+
+        <div class="row place">
+          <!--
+          <div class="col-12 py-2 px-0 font-16 text-bold">
+            Hai un coupon?
+            <button class="link font-16 text-bold"> Clicca quì per inserirlo</button>
+          </div>
+          -->
+          <div class="col-12 py-2 px-0">
+            Le informazioni fornite saranno utilizzate per le finalità descritte nella nostra
+            <a href="#" class="link font-18">privacy policy</a>
+          </div>
+          <div class="col-12 py-2 px-0">
+            <label class="checkbox">
+              <span class="checkbox-label text-grey">Ho letto e accetto la <a href="#" class="link font-18">privacy policy</a> e i <a href="#" class="link font-18">termini del servizio</a></span>
+              <input class="input" type="checkbox" name="privacy" value="yes" required>
+              <span class="mark"></span>
+            </label>
+          </div>
+
+          <div class="col-12 py-2 px-0">
+            <button class="place-order button button-big button-brown">procedi su paypal</button>
+          </div>
+        </div>
+
       </div>
     </div>
   </div>

components/checkout/checkout.js

@@ -2,4 +2,117 @@
 $(document).ready( () => {
   console.log('Load component - checkout')
 
-})
+  const component = $('.component-checkout')
+
+  if(component.length) {
+    const place = component.find('.place-order')
+    const extraAddress = component.find('.different-address')
+    const extraAddressRadio = component.find('input[name="other_address"]')
+    let hasExtraAddress = false
+
+    place.off('.click').on('click.click', () => {
+      checkForm()
+    })
+
+    extraAddressRadio.off('.click').on('click.click', (e) => {
+      const checked = $(e.currentTarget).val()
+      hasExtraAddress = checked == 'yes'
+      if(checked == 'yes') {
+        extraAddress.stop().slideDown({
+          start: () => { extraAddress.css({ display: "flex" }) }
+        })
+      } else {
+        extraAddress.stop().slideUp()
+      }
+    })
+
+    const checkForm = () => {
+      const inputs = component.find('.input')
+      const passwords = component.find('.input[type="password"]')
+      let errors = 0
+
+      inputs.each( (i,e) => {
+        const input = $(e)
+        const type = input.prop('type')
+        const required = input.prop('required')
+
+        if(required) {
+          switch(type) {
+            case 'text':
+            case 'select-one':
+              if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(input.prop('name')) > -1) {
+                if(hasExtraAddress) {
+                  if(!input.val().length) {
+                    input.addClass('error')
+                    errors++
+                  } else { input.removeClass('error') }
+                }
+              } else {
+                if(!input.val().length) {
+                  input.addClass('error')
+                  errors++
+                } else { input.removeClass('error') }
+              }
+              break;
+            case 'email':
+              if(!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+                  .test(input.val())) {
+                input.addClass('error')
+                errors++
+              } else { input.removeClass('error') }
+              break;
+            case 'password':
+              if(!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/
+                  .test(input.val())) {
+                input.addClass('error')
+                errors++
+              } else { input.removeClass('error') }
+              break;
+            case 'checkbox':
+              if(!input.is(':checked')) {
+                input.closest('.checkbox').addClass('error')
+                errors++
+              } else {
+                input.closest('.checkbox').removeClass('error')
+              }
+              break;
+          }
+        }
+      })
+
+      if(passwords[0].value != passwords[1].value) {
+        $(passwords[1]).addClass('error')
+        errors++
+      } else {
+        $(passwords[1]).removeClass('error')
+      }
+
+      if(!errors) {
+        let body = {}
+        inputs.each( (i,e) => {
+          const input = $(e)
+          const type = input.prop('type')
+          const name = input.prop('name')
+
+          if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(name) > -1) {
+            if(hasExtraAddress) {
+              body[name] = input.val()
+            }
+          } else {
+            body[name] = input.val()
+          }
+        })
+
+        Apis.placeCart(body).then( (data) => {
+          const headerCart = $('.component-header .cart-cta .counter')
+          if(headerCart.length) {
+            headerCart.text(0)
+          }
+        }).catch( (error) => {
+          console.error(error)
+        })
+
+      }
+    }
+  }
+})

components/checkout/checkout.scss

@@ -24,4 +24,45 @@
     color: $gray;
     padding: 15px 0 5px 0;
   }
+
+  .item,
+  .total {
+    @include font-style($font-sans, 400, $font-16);
+    color: $gray;
+    padding: 20px 0;
+    border-bottom: 1px solid $gray;
+  }
+
+  .total {
+    border: none;
+    font-weight: 700;
+  }
+
+  .place {
+    @include font-style($font-sans, 400, $font-16);
+    color: $gray;
+
+    .link {
+      padding: 0;
+      background: none;
+      font-weight: 700;
+      color: $brown;
+    }
+
+    .place-order {
+      display: inline-block;
+      @include font-style($font-serif, 'regular', $font-20);
+      margin: 20px 0 0 auto;
+    }
+  }
+
+  .input {
+    &.error {
+      border: 1px solid $red;
+    }
+  }
+
+  .different-address {
+    display: none;
+  }
 }

src/js/index.js

@@ -47,3 +47,13 @@ window.Apis.removeFromCart = (pid) => {
   })
 }
 
+window.Apis.placeCart = (body) => {
+  return new Promise((resolve, reject) => {
+    $.post(apiUrl + `/cart_place.php?buster=${new Date().getTime()}`, {body: body}).done( (data) => {
+      resolve(data)
+    }).fail((error, status) => {
+      reject(error)
+    })
+  })
+}
+

src/scss/forms.scss

@@ -155,15 +155,14 @@ select,
     opacity: 0.5;
   }
 }
-
 .checkbox {
   display: inline-block;
   position: relative;
   padding-left: 25px;
-  margin-bottom: 12px;
+  margin: 10px 15px 0 0;
   cursor: pointer;
   user-select: none;
-  line-height: 12px;
+  line-height: 20px;
 
   .checkbox-label {
     font-size: $font-16;
@@ -173,10 +172,11 @@ select,
     position: absolute;
     top: 0;
     left: 0;
-    height: 15px;
-    width: 15px;
+    height: 20px;
+    width: 20px;
+    border-radius: 0;
     background: none;
-    border: 1px solid $black;
+    border: 1px solid $gray;
     &:disabled {
       border-bottom: 1px solid $gray;
     }
@@ -184,10 +184,22 @@ select,
     &:after {
       content: '';
       position: absolute;
+      top: 3px;
+      left: 3px;
+      height: 12px;
+      width: 12px;
+      border-radius: 0;
+      background: $gray;
       display: none;
     }
   }
 
+  &.error {
+    .mark {
+      border: 1px solid $red;
+    }
+  }
+
   input {
     position: absolute;
     opacity: 0;
@@ -195,7 +207,6 @@ select,
     height: 0;
     width: 0;
     &:checked ~ .mark {
-      background: $gray;
       &:after {
         display: block;
       }