From 218f241569b1bca2ec036cccfc8fdc7a5d9b07bf Mon Sep 17 00:00:00 2001 From: Dslak Date: Wed, 20 Jan 2021 12:23:32 +0100 Subject: [PATCH] add to cart --- .env | 2 ++ .env_prod | 2 ++ api/cart_add.php | 29 ++++++++++++++++++++ api/config.php | 8 ++++++ api/database.php | 35 ++++++++++++++++++++++++ components/buy/buy.html | 26 ++++++++++++++++-- components/buy/buy.js | 35 ++++++++++++++++++++++++ components/buy/buy.scss | 59 +++++++++++++++++++++++++++++++++++++++-- package.json | 1 + src/js/index.js | 15 +++++++++++ src/scss/fonts.scss | 3 ++- src/scss/forms.scss | 8 +++++- webpack.config.js | 10 +++++++ 13 files changed, 227 insertions(+), 6 deletions(-) create mode 100644 .env create mode 100644 .env_prod create mode 100644 api/cart_add.php create mode 100644 api/config.php create mode 100755 api/database.php diff --git a/.env b/.env new file mode 100644 index 0000000..650d812 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +API_URL=http://iolovolio.local/api +SITE_URL=http://iolovolio.local diff --git a/.env_prod b/.env_prod new file mode 100644 index 0000000..1b65e33 --- /dev/null +++ b/.env_prod @@ -0,0 +1,2 @@ +API_URL=http://iolovolio.com/api +SITE_URL=http://iolovolio.com diff --git a/api/cart_add.php b/api/cart_add.php new file mode 100644 index 0000000..663073c --- /dev/null +++ b/api/cart_add.php @@ -0,0 +1,29 @@ +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'] + )); + +?> + diff --git a/api/config.php b/api/config.php new file mode 100644 index 0000000..d781dd4 --- /dev/null +++ b/api/config.php @@ -0,0 +1,8 @@ + diff --git a/api/database.php b/api/database.php new file mode 100755 index 0000000..6bc9823 --- /dev/null +++ b/api/database.php @@ -0,0 +1,35 @@ +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; + } +} +?> diff --git a/components/buy/buy.html b/components/buy/buy.html index 2a95580..8709186 100644 --- a/components/buy/buy.html +++ b/components/buy/buy.html @@ -47,9 +47,10 @@ - @@ -85,4 +86,25 @@ + +
+
+
+
+ +
+
+
+ articolo aggiunto al carrello + + + + continua gli acquisti + +
+
+
+
+
+ diff --git a/components/buy/buy.js b/components/buy/buy.js index 450c1f8..948a4d5 100644 --- a/components/buy/buy.js +++ b/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) + }) + + }) } } diff --git a/components/buy/buy.scss b/components/buy/buy.scss index ad4ec70..38d21cf 100644 --- a/components/buy/buy.scss +++ b/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; + } + } } } diff --git a/package.json b/package.json index 510a1f8..5828e81 100644 --- a/package.json +++ b/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", diff --git a/src/js/index.js b/src/js/index.js index 06e0bd8..a83b1aa 100644 --- a/src/js/index.js +++ b/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) + }) + }) +} diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss index 030f235..ac6d275 100644 --- a/src/scss/fonts.scss +++ b/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'); diff --git a/src/scss/forms.scss b/src/scss/forms.scss index 587e3cd..cb72821 100644 --- a/src/scss/forms.scss +++ b/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; diff --git a/webpack.config.js b/webpack.config.js index e7c7183..bb4d359 100644 --- a/webpack.config.js +++ b/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', } ] })