add checkout form

cgi-bin/params.inc

@@ -1,4 +1,115 @@
 <?php
   $BASE_URL="http://".$_SERVER['HTTP_HOST']."";
   $ROOT = realpath($_SERVER["DOCUMENT_ROOT"]);
+
+  $PROV = array(
+    "AG" => "Agrigento",
+    "AL" => "Alessandria",
+    "AN" => "Ancona",
+    "AO" => "Aosta",
+    "AP" => "Ascoli Piceno",
+    "AQ" => "L'Aquila",
+    "AR" => "Arezzo",
+    "AT" => "Asti",
+    "AV" => "Avellino",
+    "BA" => "Bari",
+    "BG" => "Bergamo",
+    "BI" => "Biella",
+    "BL" => "Belluno",
+    "BN" => "Benevento",
+    "BO" => "Bologna",
+    "BR" => "Brindisi",
+    "BS" => "Brescia",
+    "BT" => "Barletta-Andria-Trani",
+    "BZ" => "Bolzano",
+    "CA" => "Cagliari",
+    "CB" => "Campobasso",
+    "CE" => "Caserta",
+    "CH" => "Chieti",
+    "CL" => "Caltanissetta",
+    "CN" => "Cuneo",
+    "CO" => "Como",
+    "CR" => "Cremona",
+    "CS" => "Cosenza",
+    "CT" => "Catania",
+    "CZ" => "Catanzaro",
+    "EN" => "Enna",
+    "FC" => "Forlì-Cesena",
+    "FE" => "Ferrara",
+    "FG" => "Foggia",
+    "FI" => "Firenze",
+    "FM" => "Fermo",
+    "FR" => "Frosinone",
+    "GE" => "Genova",
+    "GO" => "Gorizia",
+    "GR" => "Grosseto",
+    "IM" => "Imperia",
+    "IS" => "Isernia",
+    "KR" => "Crotone",
+    "LC" => "Lecco",
+    "LE" => "Lecce",
+    "LI" => "Livorno",
+    "LO" => "Lodi",
+    "LT" => "Latina",
+    "LU" => "Lucca",
+    "MB" => "Monza e della Brianza",
+    "MC" => "Macerata",
+    "ME" => "Messina",
+    "MI" => "Milano",
+    "MN" => "Mantova",
+    "MO" => "Modena",
+    "MS" => "Massa e Carrara",
+    "MT" => "Matera",
+    "NA" => "Napoli",
+    "NO" => "Novara",
+    "NU" => "Nuoro",
+    "OR" => "Oristano",
+    "PA" => "Palermo",
+    "PC" => "Piacenza",
+    "PD" => "Padova",
+    "PE" => "Pescara",
+    "PG" => "Perugia",
+    "PI" => "Pisa",
+    "PN" => "Pordenone",
+    "PO" => "Prato",
+    "PR" => "Parma",
+    "PT" => "Pistoia",
+    "PU" => "Pesaro e Urbino",
+    "PV" => "Pavia",
+    "PZ" => "Potenza",
+    "RA" => "Ravenna",
+    "RC" => "Reggio Calabria",
+    "RE" => "Reggio Emilia",
+    "RG" => "Ragusa",
+    "RI" => "Rieti",
+    "RM" => "Roma",
+    "RN" => "Rimini",
+    "RO" => "Rovigo",
+    "SA" => "Salerno",
+    "SI" => "Siena",
+    "SO" => "Sondrio",
+    "SP" => "La spezia",
+    "SR" => "Siracusa",
+    "SS" => "Sassari",
+    "SU" => "Sud Sardegna",
+    "SV" => "Savona",
+    "TA" => "Taranto",
+    "TE" => "Teramo",
+    "TN" => "Trento",
+    "TO" => "Torino",
+    "TP" => "Trapani",
+    "TR" => "Terni",
+    "TS" => "Trieste",
+    "TV" => "Treviso",
+    "UD" => "Udine",
+    "VA" => "Varese",
+    "VB" => "Verbano Cusio Ossola",
+    "VC" => "Vercelli",
+    "VE" => "Venezia",
+    "VI" => "Vicenza",
+    "VR" => "Verona",
+    "VT" => "Viterbo",
+    "VV" => "Vibo Valentia"
+  );
+
 ?>

components/breadcrumb/breadcrumb.html

@@ -16,10 +16,12 @@
         $levels[0] = array('acquistare', '/acquistare');
         if($getQ[1]) {$levels[1] = array($getQ[2], '/acquistare/'.$getQ[1].'/'.$getQ[2]);}
     break;
-
     case 'carrello':
         $levels[0] = array('carrello', '/carrello');
     break;
+    case 'checkout':
+        $levels[0] = array('checkout', '/checkout');
+    break;
 
     case 'due-cucchiai-di-salute':
         $levels[0] = array('raccontare', '/raccontare');

components/cart/cart.html

@@ -10,12 +10,12 @@
 
 <div class="component-cart">
 
-    <div class="list">
-      <div class="container">
+    <div class="container">
+      <div class="list">
 
-        <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="row mx-0 header">
+          <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-1"> Prezzo </div>
           <div class="col-2 col-md-1"> Quantità </div>
           <div class="col-2 col-md-1"> Totale </div>
@@ -31,13 +31,13 @@
             $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="row mx-0 item" data-pid="<?= $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-2 col-md-3 py-3">
+          <div class="item-col col-4 col-md-3 py-3">
             <?= $r['type']." - ".$r['name'];?>
           </div>
           <div class="item-col col-2 col-md-1 py-3">
@@ -58,15 +58,15 @@
           }
         ?>
 
-        <div class="row place py-4">
-          <div class="col-8 mx-auto">
+        <div class="row mx-0 place py-4">
+          <div class="col-10 col-md-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>
+            <a href="/checkout" class="place-order button button-big button-brown">concludi ordine</a>
           </div>
         </div>
       </div>

components/cart/cart.scss

@@ -69,6 +69,7 @@
     }
 
     .place-order {
+      display: inline-block;
       @include font-style($font-serif, 'regular', $font-20);
       margin: 20px 0 0 auto;
     }

components/checkout/checkout.html

@@ -0,0 +1,84 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+  setlocale(LC_MONETARY, 'it_IT.UTF-8');
+?>
+
+
+<div class="component-checkout">
+  <div class="container">
+    <div class="row">
+
+      <div class="col-12 col-md-8 pb-5">
+        <span class="title">Dettagli fatturazione</span>
+        <span class="subtitle">Sei già nostro cliente? Accedi</span>
+
+        <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">
+          </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">
+          </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">
+          </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">
+          </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">
+          </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">
+          </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">
+          </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">
+              <?php
+                foreach($PROV as $k => $p) {
+                  echo "<option value=\"".$k."\">".$p."</option>";
+                }
+              ?>
+            </select>
+          </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">
+          </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">
+          </div>
+          <div class="col-12 col-md-6 pr-2 pr-md-4">
+            <span class="label">Vuoi spedire ad un indirizzo diverso?</span>
+              <label class="radio">
+                <span class="radio-label text-grey">No</span>
+                <input type="radio" name="other_address" value="no" checked>
+                <span class="mark"></span>
+              </label>
+              <label class="radio">
+                <span class="radio-label text-grey">Si</span>
+                <input type="radio" name="other_address" value="yes">
+                <span class="mark"></span>
+              </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-md-4 pb-5">
+        <span class="title">Il tuo ordine</span>
+        <span class="subtitle"></span>
+      </div>
+    </div>
+  </div>
+</div>

components/checkout/checkout.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - checkout')
+
+})

components/checkout/checkout.scss

@@ -0,0 +1,27 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-checkout {
+  padding: 10px 0 40px 0;
+
+  .title {
+    display: block;
+    @include font-style($font-serif, 400, $font-32);
+    color: $black;
+    height: 50px;
+  }
+
+  .subtitle {
+    display: block;
+    @include font-style($font-sans, 700, $font-16);
+    color: $gray;
+    height: 40px;
+  }
+
+  .label {
+    display: block;
+    @include font-style($font-sans, 700, $font-16);
+    color: $gray;
+    padding: 15px 0 5px 0;
+  }
+}

components/sectionHeader/sectionHeader.html

@@ -14,10 +14,9 @@
         $section_label = 'produrre';
     break;
     case 'acquistare':
-        $section_label = 'acquistare';
-    break;
     case 'carrello':
-        $section_label = 'carrello';
+    case 'checkout':
+        $section_label = 'acquistare';
     break;
   }
 

pages/checkout.ejs

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

src/scss/forms.scss

@@ -1,7 +1,6 @@
 
 input,
 button {
-  border: 1px solid $black;
   background: $white;
   border-radius: 0;
   height: 28px;
@@ -37,6 +36,7 @@ textarea {
   background: $white;
   width: 100%;
   outline: none !important;
+  border: 1px solid $gray;
 
   &:active,
   &:focus{
@@ -74,85 +74,36 @@ input[type=number] {
   height: auto;
   display: block;
   padding: 7px 10px;
-  border: 2px solid $white;
+  border: 1px solid $gray;
   @include font-style( $font-sans, 'regular', $font-18);
   box-shadow: unset;
   text-transform: initial !important;
 
-  & + .label-text,
-  & + label {
-    color: $gray;
-    top: -1*$font-10;
-    position: absolute;
-    display: block;
-    @include font-style($font-sans, 'regular', $font-10);
-    text-transform: uppercase;
-  }
-
-  &:required {
-    & + .label-text,
-    & + label {
-      &::after {
-        content: ' *';
-      }
-
-      & ~ .error-message {
-        display: none;
-        color: $red;
-        @include font-style($font-sans, 'regular', $font-10);
-      }
-    }
-  }
-
-  &.has-error {
-    border-bottom: 1px solid $red;
-    & + .label-text,
-    & + label {
-      color: $red;
-      text-transform: uppercase;
-      & ~ .error-message {
-        display: block;
-        color: $red;
-        text-transform: uppercase;
-      }
-    }
-  }
-
-  &.transparent {
-    background: transparent;
-  }
-
-  &.input-gray {
-    border: 2px solid $light-gray;
-    background: $light-gray;
-  }
-
-  &:disabled {
-    border-bottom: 2px solid $gray;
-    & + .label-text,
-    & + label {
-      color: $gray;
-    }
-  }
 }
 
-select {
+select,
+.input-select {
   appearance: none;
   background-image: url(/images/arrow-down.svg);
-  background-size: auto 40%;
+  background-size: auto 30%;
   background-repeat: no-repeat;
-  background-position: right 3px center;
-  border-bottom: 1px solid $gray;
+  background-position: right 10px center;
+}
 
-  &:disabled {
-    background-image: url(/images/arrow-down.svg);
-  }
+.input-text {
+  padding: 7px 20px;
+  //height: 40px;
+}
 
-  &:focus {
-    //background-image: url(/images/arrow-up.svg);
-  }
+.input-select {
+  padding: 7px 20px;
+  //height: 40px;
 }
 
+.input-textarea {
+  padding: 7px;
+  width: 100%;
+}
 
 .button {
   color: $white;
@@ -212,11 +163,13 @@ select {
   margin-bottom: 12px;
   cursor: pointer;
   user-select: none;
-  width: 100%;
-  float: left;
   line-height: 12px;
 
-  .checkmark {
+  .checkbox-label {
+    font-size: $font-16;
+  }
+
+  .mark {
     position: absolute;
     top: 0;
     left: 0;
@@ -241,8 +194,61 @@ select {
     cursor: pointer;
     height: 0;
     width: 0;
-    &:checked ~ .checkmark {
-      background: $black;
+    &:checked ~ .mark {
+      background: $gray;
+      &:after {
+        display: block;
+      }
+    }
+  }
+}
+
+.radio {
+  display: inline-block;
+  position: relative;
+  padding-left: 25px;
+  margin: 10px 15px 0 0;
+  cursor: pointer;
+  user-select: none;
+  line-height: 20px;
+
+  .radio-label {
+    font-size: $font-16;
+  }
+
+  .mark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: none;
+    border: 1px solid $gray;
+    &:disabled {
+      border-bottom: 1px solid $gray;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      height: 12px;
+      width: 12px;
+      border-radius: 50%;
+      background: $gray;
+      display: none;
+    }
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+    &:checked ~ .mark {
       &:after {
         display: block;
       }

src/scss/main.scss

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