install psycopg2 https://pypi.org/project/psycopg2/
Psycopg is the most popular PostgreSQL database adapter for the Python programming language.
(venv) PS C:\flaskmyproject> pip install psycopg2
CREATE TABLE product (
pid serial PRIMARY KEY,
code VARCHAR ( 100 ) NOT NULL,
name VARCHAR ( 100 ) NOT NULL,
image VARCHAR ( 100 ) NOT NULL,
category VARCHAR ( 50 ) NOT NULL,
price INT NOT NULL,
discount INT NOT NULL
);
Multiple insert
INSERT INTO
product(code,name,image,category,price,discount)
VALUES
('00001','Samsung Galaxy A10S','2.jpg', 'Mobile', 520, 100),
('00002',, 'Samsung Galaxy Win Duos', '3.jpg', 'Mobile', 1600, 500),
('00003', 'Women Summer Spaghetti Strap Down', '4.jpg', 'Woman Dresess', 2020, 1250);
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
#app.py
from flask import Flask, session, render_template, request, redirect, url_for
import psycopg2 #pip install psycopg2
import psycopg2.extras
app = Flask(__name__)
app.secret_key = "cairocoders-ednalan"
DB_HOST = "localhost"
DB_NAME = "sampledb"
DB_USER = "postgres"
DB_PASS = "admin"
conn = psycopg2.connect(dbname=DB_NAME, user=DB_USER, password=DB_PASS, host=DB_HOST)
@app.route('/')
def products():
cursor = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
cursor.execute("SELECT * FROM product")
rows = cursor.fetchall()
return render_template('products.html', products=rows)
@app.route('/add', methods=['POST'])
def add_product_to_cart():
_quantity = int(request.form['quantity'])
_code = request.form['code']
# validate the received values
if _quantity and _code and request.method == 'POST':
cursor = conn.cursor(cursor_factory=psycopg2.extras.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'
@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)
templates/product.html
//templates/product.html
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart using Python Flask PostgreSQL</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 PostgreSQL</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/{{ session['cart_item'][key]['image'] }}" style="width: 72px; height: 72px;"> </a>
<div class="media-body" style="padding-left:10px;">
<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.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>
