dslak
/
iolovolio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add to cart

feature/cart
Dslak 4 years ago
parent
0fcc000d29
commit
218f241569
13 changed files with 227 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .env
  2. 2
      .env_prod
  3. 29
      api/cart_add.php
  4. 8
      api/config.php
  5. 35
      api/database.php
  6. 26
      components/buy/buy.html
  7. 35
      components/buy/buy.js
  8. 59
      components/buy/buy.scss
  9. 1
      package.json
  10. 15
      src/js/index.js
  11. 3
      src/scss/fonts.scss
  12. 8
      src/scss/forms.scss
  13. 10
      webpack.config.js

2
.env
View File

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

2
.env_prod
View File

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

29
api/cart_add.php
View File

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

8
api/config.php
View File

@ -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";
?>

35
api/database.php
View File

@ -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;
}
}
?>

26
components/buy/buy.html
View File

@ -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>

35
components/buy/buy.js
View File

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

59
components/buy/buy.scss
View File

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

1
package.json
View File

@ -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",

15
src/js/index.js
View File

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

3
src/scss/fonts.scss
View File

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

8
src/scss/forms.scss
View File

@ -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;

10
webpack.config.js
View File

@ -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',
}
]
})

Write Preview
Loading…
Cancel
Save