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.