Erstellen Sie einen Ein-Produkt-Shop mit dem Python Django Framework und Htmx

Dies ist der erste einer zweiteiligen Serie, die Django, htmx und Stripe verwendet, um eine E-Commerce-Website mit einem Produkt zu erstellen. In diesem Teil starten wir unser Django-Projekt und integrieren es in htmx.

Im zweiten Teil wickeln wir die Bestellungen mit Stripe ab.

Lass uns loslegen!

Warum Django, Htmx und Stripe?

Wir werden Django, htmx und Stripe verwenden, um unsere Website zu erstellen, weil:

• Django ist ein Python-Webframework mit einem großartigen ORM-, Templating- und Routing-System. Es verfügt über einige sofort einsatzbereite Funktionen (z. B. Authentifizierung) und mehrere Open-Source-Pakete sind online verfügbar. Wir werden Django verwenden, um die Website zu erstellen.
• htmx ist eine JavaScript-Bibliothek, die Ihrer Website allein durch die Verwendung von HTML-Attributen ein modernes Aussehen verleiht – Sie müssen eigentlich kein JavaScript schreiben (obwohl Sie es natürlich können). Wir werden Htmx verwenden, um unserer Seite etwas Interaktivität zu verleihen.
• Stripe ist eine Zahlungsplattform mit einer großartigen API – sie verarbeitet Zahlungen und Kreditkarteninformationen. Es lässt sich auch gut mit Google und Apple Pay integrieren. Wir werden Stripe verwenden, um Produktzahlungen zu erleichtern.

So funktioniert das Endprodukt:

• Ein Benutzer geht auf unsere Website und kann einige Informationen zu unserem Produkt sehen, einschließlich Preis und Beschreibung.
• Sobald der Benutzer auf die Schaltfläche „Kaufen“ klickt, wird er zur Checkout-Sitzung von Stripe weitergeleitet.
• Bei erfolgreicher Zahlung werden sie erneut auf unsere Website weitergeleitet. Wir speichern ihre Bestellinformationen und senden eine Bestätigungs-E-Mail an den Kunden und alle Mitarbeiter, um sie über den letzten Kauf zu informieren.

Jetzt konfigurieren wir unser Django-Projekt, erstellen die ersten Ansichten und erstellen das Kaufformular mit htmx.

Konfigurieren Sie Ihr Django-Python-Projekt

Um unser Projekt einzurichten, müssen wir eine virtuelle Umgebung erstellen, diese aktivieren und die erforderlichen Pakete installieren. Anschließend können wir unser Django-Projekt und die Django-App erstellen.

Erstellen Sie eine virtuelle Umgebung

Beginnen wir mit der Erstellung einer virtuellen Umgebung, damit wir unsere Abhängigkeiten isolieren können:

python -m venv .venv

So aktivieren wir es unter Linux/Mac:

source .venv/bin/activate

Und unter Windows:

.venv\Scripts\activate

Installieren Sie die erforderlichen Pakete

Innerhalb unserer aktivierten virtuellen Umgebung benötigen wir einige Pakete, damit dies funktioniert:

pip install django stripe django-htmx python-dotenv

Hier haben wir Folgendes installiert:

• Django
• Stripe, um mit der Stripe-API zu arbeiten.
• django-htmx, das einige Hilfsfunktionen für die Arbeit mit htmx bereitstellt.
• python-dotenv zum Laden von Umgebungsvariablen aus .env-Dateien.

Erstellen Sie das Django-Projekt

Im selben Verzeichnis wie unsere virtuelle Umgebung erstellen wir ein Django-Projekt namens ecommerce_site:

django-admin startproject ecommerce_site .

In Django ist es eine gute Praxis, den Code nach einer oder mehreren „Apps“ zu organisieren. Jede App ist ein Paket, das eine bestimmte Aufgabe erfüllt. Ein Projekt kann mehrere Apps haben, aber für diesen einfachen Shop können wir nur eine App haben, die den größten Teil des Codes enthält – die Ansichten, Formulare und Modelle für unsere E-Commerce-Plattform. Lassen Sie es uns erstellen und es E-Commerce nennen:

python manage.py startapp ecommerce

Und fügen Sie diese App zu unseren INSTALLED_APPS in ecommerce_site/settings.py hinzu:

# ecommerce_site/settings.py

INSTALLED_APPS = [
    # ... the default django apps
    "ecommerce", # ⬅️ new
]

Wenn Sie Probleme mit dieser Einrichtung haben, schauen Sie sich das Endprodukt an. Zu diesem Zeitpunkt sollte Ihre Dateistruktur etwa so aussehen:

ecommerce_site/
├── .venv/  # ⬅️ the virtual environment
├── ecommerce_site/ # ⬅️ the django project configuration
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── ecommerce/ # ⬅️ our app setup
│     ├── templates/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
└── manage.py

Erstellen Sie die Vorlagen

Da wir nun unser Projekt konfiguriert haben, müssen wir einige Basislayouts erstellen. Fügen Sie im Vorlagenverzeichnis eine base.html-Datei hinzu – die Vorlage, von der alle anderen Vorlagen erben. Fügen Sie htmx für die Benutzerinteraktion, mvp.css für den grundlegenden Stil und von Django generierte Nachrichten zur Vorlage hinzu:

<!-- ecommerce/templates/base.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>One-Product E-commerce Site</title>

    <!-- include htmx ⬇️ -->
    <script
      src="https://unpkg.com/htmx.org@1.9.11"
      integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0"
      crossorigin="anonymous"
    ></script>

    <!-- include mvp.css ⬇️ -->
    <link rel="stylesheet" href="https://unpkg.com/mvp.css" />
  </head>
  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-boost="true">
    <header>
      <h1>One-Product E-commerce Site</h1>
    </header>
    <main>
      <section>
        {% if messages %} {% for message in messages %}
        <p><mark>{{ message }}</mark></p>
        {% endfor %} {% endif %}
      </section>
      {% block content %} {% endblock %}
    </main>
  </body>
</html>

Erstellen Sie eine home.html-Vorlage im selben templates-Verzeichnis für unsere Home-Ansicht. Es sollte die Datei „base.html“ erweitern und nur den Inhaltsabschnitt füllen.

<!-- ecommerce/templates/home.html -->

{% extends "base.html" %} {% block content %}
<section>{% include "product.html" %}</section>
{% endblock %}

In diese Vorlage haben wir die Vorlage „product.html“ eingefügt. product.html gibt einige Details zu unserem Produkt und ein Platzhalterbild wieder. Erstellen wir es im selben templates-Verzeichnis:

<!-- ecommerce/templates/product.html -->
<form>
  <img src="https://picsum.photos/id/30/400/250" alt="mug" />
  <h3>mug<sup>on sale!</sup></h3>
  <p>mugs are great - you can drink coffee on them!</p>
  <p><strong>5€</strong></p>
  <button type="submit" id="submit-btn">Buy</button>
</form>

Erstellen Sie die Home-Ansicht

In ecommerce/views.py erstellen wir die Ansicht, die die Home-Vorlage rendert:

# ecommerce/views.py

from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

Und fügen Sie es zu den URL-Mustern in ecommerce_site/urls.py hinzu:

# ecommerce_site/urls.py

from django.contrib import admin
from django.urls import path
from ecommerce import views # ⬅️ new

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", views.home, name="home"), # ⬅️ new
]

Jetzt können wir den Server betreiben mit:

python manage.py runserver

Wenn Sie in Ihrem Browser zu http://127.0.0.1:8000 wechseln, sollten Sie etwa Folgendes sehen:

It might feel like overkill to add a dedicated product.html template instead of just the product details in the home.html template, but product.html will be useful for the htmx integration.

Add the Form and Use Htmx

Great! We now have a view that looks good. However, it doesn’t do much yet. We'll add a form and set up the logic to process our product purchase. Here’s what we want to do:

1. Allow the user to select how many products (mugs) they want to buy.
2. When the user clicks “Buy”, make a POST request to a different view called purchase in the backend using hx-post.
3. In that view, validate the form and wait for 2 seconds to simulate the Stripe integration (we'll cover this in the second part of this guide).
4. Replace the form content with the purchase view response.
5. While the order is processing, show a loading message and disable the “Buy” button, so that the user doesn’t accidentally make multiple orders.

Let's go step by step.

1: Add a Quantity Order Form

Let’s first create and add a simple order form to our view allowing a user to select the number of mugs they want. In ecommerce/forms.py, add the following code:

# ecommerce/forms.py

from django import forms

class OrderForm(forms.Form):
        quantity = forms.IntegerField(min_value=1, max_value=10, initial=1)

In ecommerce/views.py, we can initialize the form in the home view:

# ecommerce/views.py

from ecommerce.forms import OrderForm # ⬅️ new

def home(request):
    form = OrderForm() # ⬅️ new - initialize the form
    return render(request, "home.html", {"form": form}) # ⬅️ new - pass the form to the template

And render it in the template:

<!-- ecommerce/templates/product.html -->

<form method="post">
  <!-- Same product details as before, hidden for simplicity -->

  <!-- render the form fields ⬇️ -->
  {{ form }}

  <!-- the same submit button as before ⬇️ -->
  <button type="submit" id="submit-btn">Buy</button>
</form>

2: Make a POST Request To a Different View

When the user clicks "Buy", we want to process the corresponding POST request in a dedicated view to separate the different logic of our application. We will use htmx to make this request. In the same ecommerce/templates/product.html template, let's extend the form attributes:

<!-- ecommerce/templates/product.html -->

<!-- add the hx-post html attribute ⬇️ -->
<form method="post" hx-post="{% url 'purchase' %}">
  <!-- Same product details as before, hidden for simplicity -->

  {{ form }}
  <button type="submit" id="submit-btn">Buy</button>
</form>

With this attribute, htmx will make a POST request to the purchase endpoint and stop the page from reloading completely. Now we just need to add the endpoint.

3: Create the Purchase View

The purchase view can be relatively simple for now:

# ecommerce/views.py
import time # ⬅️ new

# new purchase POST request view ⬇️
@require_POST
def purchase(request):
    form = OrderForm(request.POST)
    if form.is_valid():
        quantity = form.cleaned_data["quantity"]
        # TODO - add stripe integration to process the order
        # for now, just wait for 2 seconds to simulate the processing
        time.sleep(2)
    return render(request, "product.html", {"form": form})

In this view, we validate the form, extract the quantity from the cleaned data, and simulate Stripe order processing. In the end, we return the same template (product.html). We also need to add the view to the urlpatterns:

# ecommerce_site/urls.py

# ... same imports as before

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", views.home, name="home"),
    path("purchase", views.purchase, name="purchase"),  # ⬅️ new
]

We now need to tell htmx what to do with this response.

4: Replace the Form Content With the Purchase View Response

Htmx has a hx-swap attribute which replaces targeted content on the current page with a request's response.
In our case, since the purchase view returns the same template, we want to swap its main element — the

<!-- ecommerce/templates/product.html -->

<!-- add the hx-swap html attribute ⬇️ -->
<form method="post" hx-post="{% url 'purchase' %}" hx-swap="outerHTML">
  <!-- Same product details as before, hidden for simplicity -->

  {{ form }}
  <button type="submit" id="submit-btn">Buy</button>
</form>

<!-- ecommerce/templates/product.html -->

<!-- add the hx-disabled-elt html attribute ⬇️ -->
<form
  method="post"
  hx-post="{% url 'purchase' %}"
  hx-swap="outerHTML"
  hx-disabled-elt="#submit-btn"
>
  <!-- Same product details as before, hidden for simplicity -->

  {{ form }}
  <button type="submit" id="submit-btn">Buy</button>

  <!-- add a loading message with the htmx-indicator class ⬇️ -->
  <p class="htmx-indicator"><small>Getting your mug ready...</small></p>
</form>