add to cart

.env

@@ -0,0 +1,2 @@
+API_URL=http://iolovolio.local/api
+SITE_URL=http://iolovolio.local

.env_prod

@@ -0,0 +1,2 @@
+API_URL=http://iolovolio.com/api
+SITE_URL=http://iolovolio.com

api/cart_add.php

@@ -0,0 +1,29 @@
+<?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();
+
+$sid = trim($_POST['sid']);
+$pid = trim($_POST['pid']);
+$qty = trim($_POST['qty']);
+
+$_SESSION['CART'][] = array("pid" => intval($pid), "qty" => intval($qty));
+
+http_response_code(200);
+echo json_encode(
+  array(
+    "status" => 200,
+    "cart" => $_SESSION['CART']
+  ));
+
+?>
+

api/config.php

@@ -0,0 +1,8 @@
+<?php
+
+$GLOBALS['CONF']['DB']['HOST']      = "localhost";
+$GLOBALS['CONF']['DB']['USER']      = "root";
+$GLOBALS['CONF']['DB']['PASSWORD']  = "root";
+$GLOBALS['CONF']['DB']['DB_NAME']   = "iolovolio";
+
+?>

api/database.php

@@ -0,0 +1,35 @@
+<?php
+
+class DatabaseService {
+
+  protected $glob;
+
+  private $db_host;
+  private $db_name;
+  private $db_user;
+  private $db_password;
+  private $connection;
+
+  public function __construct() {
+    global $GLOBALS;
+    $this->glob =& $GLOBALS;
+  }
+
+  public function getConnection() {
+
+    $this->connection = null;
+    $this->db_host      = $this->glob['CONF']['DB']['HOST'];
+    $this->db_name      = $this->glob['CONF']['DB']['DB_NAME'];
+    $this->db_user      = $this->glob['CONF']['DB']['USER'];
+    $this->db_password  = $this->glob['CONF']['DB']['PASSWORD'];
+
+    try {
+      $this->connection = new PDO("mysql:host=" . $this->db_host . ";dbname=" . $this->db_name, $this->db_user, $this->db_password);
+    } catch(PDOException $exception) {
+      echo "Connection failed: " . $exception->getMessage();
+    }
+
+    return $this->connection;
+  }
+}
+?>

components/buy/buy.html

@@ -47,9 +47,10 @@
                 <button class="minus icon-minus"></button>
               </div>
 
-              <button class="button button-brown add-to-cart">
+              <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">aggiungi</a>
+                <span class="my-auto mr-auto ml-1 h-100">aggiungi</a>
               </button>
             </div>
           </div>
@@ -85,4 +86,25 @@
       </div>
     </div>
   </div>
+
+  <div class="add-modal">
+    <div class="modal-content">
+      <div class="row">
+        <div class="col-6 d-flex">
+          <img class="image m-auto" src="">
+        </div>
+        <div class="col-6 d-flex">
+          <div class="my-auto">
+            <span class="title">articolo aggiunto al carrello</span>
+            <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>
+            <button class="close button button-white w-100">continua gli acquisti</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
+

components/buy/buy.js

@@ -12,6 +12,9 @@ $(document).ready( () => {
       const qty = details.find('.qty')
       const plus = details.find('.plus')
       const minus = details.find('.minus')
+      const addToCart = component.find('.add-to-cart')
+      const modal = component.find('.add-modal')
+      const modalClose = modal.find('.close')
 
       qty.on('input', (e) => { $(e.currentTarget).val($(e.currentTarget).val().replace(/[^0-9]/g, '') || 1) })
 
@@ -26,6 +29,38 @@ $(document).ready( () => {
           qty.val(value - 1)
         }
       })
+
+
+      modalClose.off('.click').on('click.click', () => {
+        modal.fadeOut()
+      })
+
+      addToCart.off('.click').on('click.click', (e) => {
+        const button = $(e.currentTarget)
+        const pid = button.data('pid')
+        const name = button.data('name')
+        const price = button.data('price')
+
+        const selectedQty = parseInt(qty.val())
+        const modalImage = modal.find('.image')
+        const modalName = modal.find('.name')
+        const modalQty = modal.find('.qty')
+        const modalTotal = modal.find('.total')
+
+        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)
+
+          modal.fadeIn()
+        }).catch( (error) => {
+          console.error(error)
+        })
+
+      })
     }
   }
 

components/buy/buy.scss

@@ -160,7 +160,7 @@
             padding: 0;
             margin: 0;
             border: 0;
-            top: 10px;
+            top: 7px;
             left: 10px;
             font-size: $font-20;
             color: $gray;
@@ -176,7 +176,7 @@
           position: relative;
           display: inline-flex;
           float: right;
-          height: 48px;
+          height: 44px;
           padding: 0;
           @include font-style($font-serif, 'regular', $font-28);
           width: calc(50% - 4px);
@@ -188,6 +188,55 @@
       background: $white;
     }
   }
+
+  .add-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: $black-alpha;
+    z-index: 200;
+
+    .modal-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: $white;
+      padding: 40px;
+      width: 100%;
+
+      .image {
+        width: 50%;
+      }
+
+      .title {
+        display: block;
+        @include font-style($font-serif, 'regular', $font-20);
+        color: $brown;
+      }
+      .name {
+        display: block;
+        @include font-style($font-serif, 'regular', $font-34);
+        line-height: $font-28;
+        color: $olive-dark;
+        padding-bottom: 25px;
+      }
+      .qty,
+      .total {
+        display: block;
+        @include font-style($font-sans, 'regular', $font-18);
+        color: $gray;
+      }
+
+      .goto,
+      .close {
+        @include font-style($font-serif, 'regular', $font-24);
+      }
+    }
+  }
 }
 
 @media (min-width: map-get($grid-breakpoints, 'md')) {
@@ -199,5 +248,11 @@
         }
       }
     }
+
+    .add-modal {
+      .modal-content {
+        max-width: 700px;
+      }
+    }
   }
 }

package.json

@@ -27,6 +27,7 @@
     "bootstrap": "^4.5.3",
     "copy-webpack-plugin": "^6.0.3",
     "css-loader": "^5.0.1",
+    "dotenv": "^8.2.0",
     "es6-promise-promise": "^1.0.0",
     "eslint": "^7.15.0",
     "eslint-config-google": "^0.14.0",

src/js/index.js

@@ -19,5 +19,20 @@ window.readyResize = (callback, orientation = false) => {
   }
 }
 
+$.ajaxSetup({ async: false })
 
+window.apiUrl = ENV.API_URL
+window.siteUrl = ENV.SITE_URL
+
+window.Apis = window.Apis || {}
+
+window.Apis.addToCart = (sid, pid, qty) => {
+  return new Promise((resolve, reject) => {
+    $.post(apiUrl + `/cart_add.php?buster=${new Date().getTime()}`, {sid: sid, pid: pid, qty: qty}).done( (data) => {
+      resolve(data)
+    }).fail((error, status) => {
+      reject(error)
+    })
+  })
+}
 

src/scss/fonts.scss

@@ -1 +1,2 @@
-@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&family=Open+Sans:300,400,500,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display:300,400,500,700&display=swap');

src/scss/forms.scss

@@ -73,7 +73,7 @@ input[type=number] {
   border-radius: 0;
   height: auto;
   display: block;
-  padding: 10px 10px;
+  padding: 7px 10px;
   border: 2px solid $white;
   @include font-style( $font-sans, 'regular', $font-18);
   box-shadow: unset;
@@ -171,6 +171,12 @@ select {
     border: none;
   }
 
+  &.button-white {
+    background: $white;
+    border: 1px solid $brown;
+    color: $brown;
+  }
+
   &.button-transparent {
     background: transparent;
     border: 1px solid $brown;

webpack.config.js

@@ -14,6 +14,7 @@ const distPath = path.join(__dirname, './public')
 const componentPath = path.join(__dirname, './components')
 const imagesPath = path.join(__dirname, './images')
 const binsPath = path.join(__dirname, './cgi-bin')
+const apisPath = path.join(__dirname, './api')
 const assetsPath = path.join(__dirname, './assets')
 const docsPath = path.join(__dirname, './docs')
 const srcPath = './src'
@@ -25,6 +26,7 @@ let plugins = []
 module.exports = (env) => {
 
   const isProd = env && env.prod || false
+  const dotenv = require('dotenv').config({path: __dirname + `/.env${isProd ? '_prod' : ''}`});
 
   entries.push(srcPath + '/js/index.js')
   entries.push(srcPath + '/scss/main.scss')
@@ -40,6 +42,9 @@ module.exports = (env) => {
       contentImage: path.join(__dirname, basePath + '/images/logoWP.png'),
       alwaysNotify: true
     }),
+    new webpack.DefinePlugin({
+      "ENV": JSON.stringify(dotenv.parsed)
+    }),
     new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery'
@@ -65,6 +70,11 @@ module.exports = (env) => {
           context: binsPath,
           from: '*.*',
           to: distPath + '/cgi-bin',
+        },
+        {
+          context: apisPath,
+          from: '*.*',
+          to: distPath + '/api',
         }
       ]
     })