Flask & Stripe – Open-Source-Mini-E-Commerce

Hallo Coder!

Dieser Artikel stellt eine Mini-E-Commerce Projekt angetrieben von Kolben und Streifen. Die Quellen finden Sie auf GitHub und die freizügige MIT-Lizenz erlaubt es Ihnen, den Code in andere Projekte zu kopieren/einzubauen oder ihn einfach so zu verwenden, wie er ist. Für Neueinsteiger, Flasche ist ein führendes Backend-Framework, das aktiv unterstützt und versioniert wird, und Stripe ist ein beliebter Zahlungsprozessor.

Thanks for Reading!

Flask & Stripe - Beispielproduktseite.


Das Projekt hat keine Datenbank oder Authentifizierung und lädt die Produktdefinitionen aus separaten JSON-Dateien mit minimaler Routinglogik. Sobald die Produktinformationen geladen sind, werden die Seiten auf einer modernen generiert Bootstrap 5 Entwurf.

Der schnellste Weg, das Projekt lokal zum Laufen zu bringen, besteht darin, diese einfache Einrichtung nachzuverfolgen:

👉 Schritt 1 – Klonen Sie das Projekt aus der öffentliches Repositorium:

$ git clone 
$ cd sample-flask-stripe

👉 Schritt 2 – Fügen Sie STRIPE-Geheimnisse hinzu Dockerfile


ENV STRIPE_SECRET_KEY      <YOUR_STRIPE_SECRET_KEY>
ENV STRIPE_PUBLISHABLE_KEY <YOUR_STRIPE_PUBLISHABLE_KEY>

👉 Schritt 3 – Starten Sie die APP in Docker

$ docker-compose up --build 

Besuch in Ihrem Browser. Die App sollte betriebsbereit sein.

Flask & Stripe - HOMEpage (Open-Source).


✨ So funktioniert es

Das Projekt lädt eine minimale Konfiguration aus der .env-Datei und erstellt die Seiten, nachdem das Verzeichnis „templates/products“ gescannt wurde. Der Produktindex enthält alle Produkte sowie ein empfohlenes Produkt, das oben auf der Seite angezeigt wird.

Daraus wird das obige Bild generiert einfache Struktur auf der Festplatte gespeichert:

Flask & Stripe – Produktdefinitionen auf Datenträger

Die Definition für jedes Produkt ist eine minimale JSON-Datei. Hier sind die Informationen, die die definieren vorgestelltes Produkt:

{
    "name": "Nike Dynamo Go FlyEase",
    "price": 49,
    "currency": "usd",
    "info": "Baby/Toddler Easy On/Off Shoes",
    "short_description": "A workhorse built to help power ... (truncated)",
    "full_description": "Easy, snug and built for any-time play the Nike Dynamo Go FlyEase ... (truncated)."
}

Mit diesen minimalen Informationen generiert die App den oberen Abschnitt der Produkte Seite:

Flask & Stripe – Ausgewählter Produktbereich.


✨ So definieren Sie ein neues Produkt

Ein neues Produkt kann in weniger als 1 Minute definiert werden, indem die Richtlinien in der README-Datei verwendet werden:

  • Navigieren Sie zu App/Vorlagen/Produkte Verzeichnis
  • Erstelle eine neue JSON Datei von einer bestehenden
  • Bearbeiten Sie das Produkt: Name, Preis, vollständige Beschreibung
  • Mediendateien erstellen: Navigieren Sie zu App/statisch/Produkte
  • Erstellen Sie ein Verzeichnis mit demselben Namen wie for JSON Datei
  • Schaffen card.jpg: 500 x 335 (Pixel)
  • Schaffen cover.jpg: 2100 x 1400 (Pixel)

Wenn wir an dieser Stelle die HOMEpage aktualisieren, ist das neue Produkt einsatzbereit.

Hier ist eine Beispielproduktseite, die für generiert wurde Air ZOOM Pegasusunter Verwendung von Assets, die aus geladen wurden hier:

Flask & Stripe - Generierte Produktseite (kostenloses Produkt)


✨ Videopräsentation

Alle oben genannten Punkte werden Schritt für Schritt in einem kurzen Video vorgestellt, das auf yTube veröffentlicht wird. Hier das Materialprotokoll:

  • ✅ Klonen Sie das Projekt
  • ✅ Starten Sie die App über Docker
  • ✅ Greifen Sie auf die Seiten zu, visualisieren Sie die Produkte
  • ✅ Kauf abschließen
  • ✅ Einen Kauf stornieren
  • ✅ Starten Sie das Projekt mit einem manuellen Build

Flask & Stripe Mini-E-CommerceVideo Präsentation


Danke fürs Lesen! Weitere Ressourcen und Unterstützung finden Sie unter:

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *