Building a Basic E-commerce Store with Flask
Building a Basic E-commerce Store with Flask
Introduction
Creating an e-commerce store is a common project for web developers and entrepreneurs. In this guide, we'll explore how to build a basic e-commerce store using Flask, a Python web framework. You'll learn how to set up the store, create product listings, handle user cart interactions, and process orders. By following this guide, you'll have a foundation for creating your own e-commerce store and customizing it with additional features like user accounts, payment processing, and more advanced styling.
Step 1: Setting Up Your Flask Application
Start by setting up your Flask application and creating a directory structure. Here's a sample structure:
ecommerce-store/
app.py
templates/
index.html
product.html
cart.html
Step 2: Creating the E-commerce Store
Create a Flask application for the e-commerce store. Here's an example of the Python code:
# app.py
from flask import Flask, render_template, request, session
from collections import Counter
app = Flask(__name)
app.secret_key = 'your_secret_key'
products = [
{'id': 1, 'name': 'Product 1', 'price': 10.0},
{'id': 2, 'name': 'Product 2', 'price': 15.0},
{'id': 3, 'name': 'Product 3', 'price': 20.0},
]
@app.route('/')
def index():
return render_template('index.html', products=products)
@app.route('/product/<int:id>')
def product(id):
product = next((p for p in products if p['id'] == id), None)
return render_template('product.html', product=product)
@app.route('/cart')
def cart():
cart = session.get('cart', {})
cart_items = [{'product': next(p for p in products if p['id'] == item), 'quantity': quantity} for item, quantity in cart.items()]
total = sum(product['price'] * quantity for product, quantity in cart_items)
return render_template('cart.html', cart_items=cart_items, total=total)
@app.route('/add_to_cart/<int:id>')
def add_to_cart(id):
if 'cart' not in session:
session['cart'] = {}
session['cart'][id] = session['cart'].get(id, 0) + 1
return redirect('/cart')
if __name__ == '__main__':
app.run(debug=True)
Step 3: Creating HTML Templates
Create HTML templates for the e-commerce store, product pages, and the shopping cart. Here's an example:
<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>E-commerce Store</title>
</head>
<body>
<header>
<h1>Welcome to Our E-commerce Store</h1>
</header>
<section>
<h2>Products</h2>
<ul>
{% for product in products %}
<li>
<a href=`/product/{{ product['id'] }}`>{{ product['name'] }}</a>
</li>
{% endfor %}
</ul>
</section>
</body>
</html>
<!-- templates/product.html -->
<!DOCTYPE html>
<html>
<head>
<title>{{ product['name'] }}</title>
</head>
<body>
<header>
<h1>{{ product['name'] }}</h1>
</header>
<section>
<p>Price: ${{ product['price'] }}</p>
<a href=`/add_to_cart/{{ product['id'] }}`>Add to Cart</a>
</section>
</body>
</html>
<!-- templates/cart.html -->
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
</head>
<body>
<header>
<h1>Shopping Cart</h1>
</header>
<section>
<h2>Items in Your Cart</h2>
<ul>
{% for item in cart_items %}
<li>
{{ item['product']['name'] }} - Quantity: {{ item['quantity'] }}
</li>
{% endfor %}
</ul>
<p>Total: ${{ total }}</p>
</section>
</body>
</html>
Step 4: Running Your E-commerce Store
Run your Flask e-commerce store using the following command:
python app.py
Access your e-commerce store in a web browser, view product listings, and add products to your shopping cart.
Conclusion
Building a basic e-commerce store with Flask is a great way to get started with web development and online retail. By following the steps in this guide, you can set up a store, create product listings, handle user cart interactions, and process orders. This project serves as a foundation for creating more advanced e-commerce stores with features like user accounts, payment processing, inventory management, and customized styling.