Introduction

Building an online store is a common use case for web development, and Flask, a Python web framework, is a great choice for creating e-commerce applications. In this guide, we'll explore how to create a basic online store with Flask. By following this guide, you'll learn how to set up a product catalog, manage user shopping carts, and process orders, allowing you to kickstart your online store project.


Step 1: Setting Up Your Flask Application

Start by setting up your Flask application and installing the necessary extensions. Here's a sample directory structure:

online-store/
    app.py
    templates/
        index.html

Step 2: Creating a Product Catalog

Create a product catalog where you can list products with details like name, price, and description. Here's an example route for listing products:

# app.py
from flask import Flask, render_template
app = Flask(__name)
# Sample product catalog (usually from a database)
products = [
    {'id': 1, 'name': 'Product 1', 'price': 20.0, 'description': 'Description of Product 1'},
    {'id': 2, 'name': 'Product 2', 'price': 30.0, 'description': 'Description of Product 2'}
]
@app.route('/')
def index():
    return render_template('index.html', products=products)
if __name__ == '__main__':
    app.run(debug=True)

Step 3: Creating the Online Store Template

Create an HTML template to display the products in your online store. Here's a basic example:

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Online Store</title>
</head>
<body>
    <header>
        <h1>Welcome to Our Online Store</h1>
    </header>
    <section>
        <h2>Product Catalog</h2>
        <ul>
            {% for product in products %}
                <li>
                    <h3>{{ product.name }}</h3>
                    <p>{{ product.description }}</p>
                    <p>Price: ${{ product.price }}</p>
                    <button>Add to Cart</button>
                </li>
            {% endfor %}
        </ul>
    </section>
</body>
</html>

Step 4: Managing User Shopping Carts

Create a shopping cart system to allow users to add products to their carts. You'll need to handle user sessions and cart data. Here's a simplified example:

# app.py
from flask import Flask, render_template, session, redirect, url_for, request
app = Flask(__name)
app.secret_key = 'your_secret_key'  # Replace with a secure secret key
# Function to add products to the cart
def add_to_cart(product_id):
    if 'cart' not in session:
        session['cart'] = []
    session['cart'].append(product_id)
@app.route('/add_to_cart/<int:product_id>')
def add_product_to_cart(product_id):
    add_to_cart(product_id)
    return redirect(url_for('index'))
if __name__ == '__main__':
    app.run(debug=True)

Step 5: Processing Orders

Create a route to process user orders and display the shopping cart contents. Here's an example:

# app.py
@app.route('/cart')
def view_cart():
    cart = [products[product_id - 1] for product_id in session.get('cart', [])]
    total_price = sum(product['price'] for product in cart)
    return render_template('cart.html', cart=cart, total_price=total_price)
if __name__ == '__main__':
    app.run(debug=True)

Step 6: Running Your Online Store

Run your Flask online store application using the following command:

python app.py

Access your online store in a browser, list products, add them to your cart, and view your shopping cart.


Conclusion

Creating a basic online store with Flask is a great way to learn web development and e-commerce concepts. By following the steps in this guide, you can set up a product catalog, allow users to add products to their shopping carts, and process orders. You can further enhance your online store by implementing user authentication, payment processing, and product management features.