Shopping Cart using Python Flask MySQL
This shopping cart have no checkout option and payment option this is about to display product and add item to cart remove item from cart remove all items from cart
CREATE TABLE `product` (
`pid` int(11) NOT NULL,
`code` varchar(255) NOT NULL,
`name` varchar(70) DEFAULT NULL,
`image` varchar(255) NOT NULL,
`category` varchar(70) DEFAULT NULL,
`price` int(11) DEFAULT NULL,
`discount` int(11) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `product`
--
INSERT INTO `product` (`pid`, `code`, `name`, `image`, `category`, `price`, `discount`) VALUES
(3, 'EDNALAN01', 'Samsung Galaxy A10S', '2.jpg', 'Mobile', 520, 100),
(4, 'EDNALAN02', 'Samsung Galaxy Win Duos', '3.jpg', 'Mobile', 1600, 500),
(5, 'EDNALAN03', 'Women Summer Spaghetti Strap Down', '4.jpg', 'Woman Dresess', 2020, 1250),
(6, 'EDNALAN04', 'Honda TMX Alpha Clamp', '5.jpg', 'Motorcycle', 320, 50);
ALTER TABLE `product`
ADD PRIMARY KEY (`pid`);
ALTER TABLE `product`
MODIFY `pid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=250;
COMMIT;
#app.py
from flask import Flask, session, render_template, request, redirect, url_for
from flaskext.mysql import MySQL
import pymysql
from werkzeug import generate_password_hash, check_password_hash
app = Flask(__name__)
app.secret_key = "cairocoders-ednalan"
mysql = MySQL()
# MySQL configurations
app.config['MYSQL_DATABASE_USER'] = 'root'
app.config['MYSQL_DATABASE_PASSWORD'] = ''
app.config['MYSQL_DATABASE_DB'] = 'testingdb'
app.config['MYSQL_DATABASE_HOST'] = 'localhost'
mysql.init_app(app)
@app.route('/add', methods=['POST'])
def add_product_to_cart():
cursor = None
try:
_quantity = int(request.form['quantity'])
_code = request.form['code']
# validate the received values
if _quantity and _code and request.method == 'POST':
conn = mysql.connect()
cursor = conn.cursor(pymysql.cursors.DictCursor)
cursor.execute("SELECT * FROM product WHERE code=%s", _code)
row = cursor.fetchone()
itemArray = { row['code'] : {'name' : row['name'], 'code' : row['code'], 'quantity' : _quantity, 'price' : row['price'], 'image' : row['image'], 'total_price': _quantity * row['price']}}
all_total_price = 0
all_total_quantity = 0
session.modified = True
if 'cart_item' in session:
if row['code'] in session['cart_item']:
for key, value in session['cart_item'].items():
if row['code'] == key:
old_quantity = session['cart_item'][key]['quantity']
total_quantity = old_quantity + _quantity
session['cart_item'][key]['quantity'] = total_quantity
session['cart_item'][key]['total_price'] = total_quantity * row['price']
else:
session['cart_item'] = array_merge(session['cart_item'], itemArray)
for key, value in session['cart_item'].items():
individual_quantity = int(session['cart_item'][key]['quantity'])
individual_price = float(session['cart_item'][key]['total_price'])
all_total_quantity = all_total_quantity + individual_quantity
all_total_price = all_total_price + individual_price
else:
session['cart_item'] = itemArray
all_total_quantity = all_total_quantity + _quantity
all_total_price = all_total_price + _quantity * row['price']
session['all_total_quantity'] = all_total_quantity
session['all_total_price'] = all_total_price
return redirect(url_for('.products'))
else:
return 'Error while adding item to cart'
except Exception as e:
print(e)
finally:
cursor.close()
conn.close()
@app.route('/')
def products():
try:
conn = mysql.connect()
cursor = conn.cursor(pymysql.cursors.DictCursor)
cursor.execute("SELECT * FROM product")
rows = cursor.fetchall()
return render_template('products.html', products=rows)
except Exception as e:
print(e)
finally:
cursor.close()
conn.close()
@app.route('/empty')
def empty_cart():
try:
session.clear()
return redirect(url_for('.products'))
except Exception as e:
print(e)
@app.route('/delete/')
def delete_product(code):
try:
all_total_price = 0
all_total_quantity = 0
session.modified = True
for item in session['cart_item'].items():
if item[0] == code:
session['cart_item'].pop(item[0], None)
if 'cart_item' in session:
for key, value in session['cart_item'].items():
individual_quantity = int(session['cart_item'][key]['quantity'])
individual_price = float(session['cart_item'][key]['total_price'])
all_total_quantity = all_total_quantity + individual_quantity
all_total_price = all_total_price + individual_price
break
if all_total_quantity == 0:
session.clear()
else:
session['all_total_quantity'] = all_total_quantity
session['all_total_price'] = all_total_price
return redirect(url_for('.products'))
except Exception as e:
print(e)
def array_merge( first_array , second_array ):
if isinstance( first_array , list ) and isinstance( second_array , list ):
return first_array + second_array
elif isinstance( first_array , dict ) and isinstance( second_array , dict ):
return dict( list( first_array.items() ) + list( second_array.items() ) )
elif isinstance( first_array , set ) and isinstance( second_array , set ):
return first_array.union( second_array )
return False
if __name__ == '__main__':
app.run(debug=True)
//product.html
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart using Python Flask MySQL</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<p><h2>Shopping Cart using Python Flask MySQL</h2></p>
<div class="col-sm-12">
<div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
{% if 'cart_item' in session %}
<p><a id="btnEmpty" href="{{ url_for('.empty_cart') }}" class="btn btn-danger">Empty Cart</a></p>
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th class="text-center">Unit Price</th>
<th class="text-center">Price</th>
<th> </th>
</tr>
</thead>
<tbody>
{% for key, val in session['cart_item'].items() %}
{% set quantity = session['cart_item'][key]['quantity'] %}
{% set price = session['cart_item'][key]['price'] %}
{% set item_price = session['cart_item'][key]['total_price'] %}
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="/static/images/product-images/{{ session['cart_item'][key]['image'] }}" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading"> <a href="#">{{ session['cart_item'][key]['name'] }}</a></h4>
<h5 class="media-heading"> by <a href="#">Brand name</a></h5>
<span>Status: </span><span class="text-success"><strong>In Stock</strong></span>
</div>
</div></td>
<td class="col-sm-1 col-md-1" style="text-align: center">
<input type="email" class="form-control" value="{{ quantity }}">
</td>
<td class="col-sm-1 col-md-1 text-center"><strong>${{ price }} </strong></td>
<td class="col-sm-1 col-md-1 text-center"><strong>${{ item_price }} </strong></td>
<td class="col-sm-1 col-md-1">
<a href="{{ url_for('.delete_product', code=session['cart_item'][key]['code']) }}" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span> Remove
</a></td>
</tr>
{% endfor %}
<tr>
<td colspan="4"><h5>Total Quantity</h5></td>
<td class="text-right"><h5><strong>{{ session['all_total_quantity'] }}</strong></h5></td>
</tr>
<tr>
<td colspan="3"><h3>Total</h3></td>
<td colspan="2" class="text-right"><h3><strong>$ {{ session['all_total_price'] }}</strong></h3></td>
</tr>
<tr>
<td colspan="4">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping
</button></td>
<td>
<button type="button" class="btn btn-success">
Checkout <span class="glyphicon glyphicon-play"></span>
</button></td>
</tr>
</tbody>
</table>
{% else: %}
<div class="no-records">Your Cart is Empty</div>
{% endif %}
</div>
</div>
</div>
<section class="our-publication pt-100 pb-70">
<div class="container">
<div class="section-header">
<i class="fa fa-book"></i>
<h2>Our Product</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod labore et dolore magna aliqua.</p>
</div>
<div class="row">
{% for product in products %}
<div class="col-sm-6 col-lg-3">
<form method="post" action="/add">
<div class="single-publication">
<figure style="width:263px;">
<a href="#">
<img src="/static/images/product-images/{{ product.image }}">
</a>
<ul>
<li><a href="#" title="Add to Favorite"><i class="fa fa-heart"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="fa fa-refresh"></i></a></li>
<li><a href="#" title="Quick View"><i class="fa fa-search"></i></a></li>
</ul>
</figure>
<div class="publication-content">
<span class="category">{{ product.category }}</span>
<h3><a href="#">{{ product.name }}</a></h3>
<ul>
<li><i class="icofont-star"></i></li>
<li><i class="icofont-star"></i></li>
<li><i class="icofont-star"></i></li>
<li><i class="icofont-star"></i></li>
<li><i class="icofont-star"></i></li>
</ul>
<h4 class="price">$ {{ product.price }}</h4>
</div>
<div class="add-to-cart">
<input type="hidden" name="code" value="{{ product.code }}"/>
<input type="text" class="product-quantity" name="quantity" value="1" size="2" />
<input type="submit" value="Add to Cart" class="default-btn" />
</div>
</div>
</form>
</div>
{% endfor %}
</div>
</div>
</section>
<style>
.pt-100 {
padding-top: 100px;
}
.pb-70 {
padding-bottom: 70px;
}
.section-header {
margin-bottom: 60px;
text-align: center;
}
.section-header i {
color: #ff007d;
font-size: 50px;
display: inline-block;
margin-bottom: 10px;
}
.section-header h2 {
font-weight: bold;
font-size: 34px;
margin: 0;
}
.section-header p {
max-width: 500px;
margin: 20px auto 0;
}
.single-publication {
border: 1px solid #f2eee2;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.single-publication figure {
position: relative;
margin: 0;
text-align: center;
}
.single-publication figure > a {
background-color: #fafafa;
display: block;
}
.single-publication figure ul {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
right: -50px;
top: 20px;
transition: .6s;
-webkit-transition: .6s;
}
.single-publication:hover figure ul {
right: 15px;
}
.single-publication figure ul li a {
display: inline-block;
width: 35px;
height: 35px;
text-align: center;
font-size: 15px;
background: #ff007d;
margin-bottom: 7px;
border-radius: 50%;
line-height: 35px;
color: #fff;
}
.single-publication figure ul li a:hover {
color: #fff;
background: #e50663;
}
.single-publication .publication-content {
text-align: center;
padding: 20px;
}
.single-publication .publication-content .category {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #ff007d;
font-weight: 600;
}
.single-publication .publication-content h3 {
font-weight: 600;
margin: 8px 0 10px;
font-size: 20px;
}
.single-publication .publication-content h3 a {
color: #1f2d30;
}
.single-publication .publication-content h3 a:hover {
color: #ff007d;
}
.single-publication .publication-content ul {
list-style-type: none;
padding: 0;
margin: 0;
margin-bottom: 15px;
}
.single-publication .publication-content ul li {
display: inline-block;
font-size: 18px;
color: #fec42d;
}
.single-publication .publication-content .price {
font-size: 18px;
color: #ff007d;
}
.single-publication .publication-content .price span {
color: #6f6f6f;
text-decoration: line-through;
padding-left: 5px;
font-weight: 300;
}
.single-publication .add-to-cart {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background: #fff;
opacity: 0;
visibility: hidden;
text-align: center;
-webkit-transform: scale(.7);
transform: scale(.7);
height: 105px;
-moz-transition: .4s;
-webkit-transition: .4s;
transition: .4s;
}
.single-publication:hover .add-to-cart {
visibility: visible;
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
.single-publication .add-to-cart .default-btn {
margin-top: 28px;
padding: 8px 25px;
font-size: 14px;
}
.single-publication .category {
margin: 0;
}
.single-publication .add-to-cart .default-btn {
margin-top: 28px;
padding: 8px 25px;
font-size: 14px;
}
.default-btn {
background-color: #ff007d;
color: #fff;
border: 1px solid #ff007d;
display: inline-block;
padding: 10px 30px;
border-radius: 30px;
text-transform: uppercase;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
}
.default-btn:hover {
color: #fff;
text-decoration: none;
}
</style>
</body>
</html>
<//html>
