So erstellen Sie einen E-Commerce-Shop mit Python, Django und Bachstelze

Foto von Hitesh Choudhary auf Unsplash

"DJANGO. Das D ist still. "

Mann, ich liebe diese Linie. So schlimm.

Aber der gleichnamige Charakter aus Quentin Tarantinos Meisterwerk ist nicht der einzige schlechte Django in der Stadt.

So ist das beliebte Python-Framework mit dem gleichen Namen.

Heute verlasse ich das Gebiet der JavaScript-Frameworks, um schnell in den Django-E-Commerce einzusteigen.

In diesem Beitrag beantworte ich berechtigte Fragen, die Sie möglicherweise beim Starten eines neuen E-Commerce-Projekts haben, z.

Ist Python die richtige Sprache für mein Projekt? Und Django den richtigen Rahmen? Welche Tools oder Plugins soll ich verwenden?

Dann zeige ich Ihnen unser hausgemachtes Rezept für den Erfolg von E-Commerce auf Django-Basis mit einem schrittweisen Wagtail-CMS-Tutorial:

  • Erstellen einer neuen Bachstelze-Site.
  • Snipcart-Konfigurationseinstellungen hinzufügen.
  • Generieren von Datenbankmigrationen
  • Erstellen Sie neue Produkte für Ihren Django-Shop.
  • Erstellen einer E-Commerce-Vorlage

Beginnen wir mit den Grundlagen.

Der Zustand von Python

Einer der Hauptgründe, Django als Framework zu wählen, ist die Python-Stiftung.

Python, eine dynamische Programmiersprache für allgemeine Zwecke, wurde Ende der 80er Jahre von Ex-Googler Guido van Rossum entwickelt. Als Fan von Monthy Python nahm er sich die Hälfte des Namens, um sein Programmierprojekt zu taufen.

Er scherzte aber nicht. Zu sagen, dass Python "populär" geworden ist, ist eine Untertreibung.

Heute wird es von Hunderttausenden von Entwicklern auf der ganzen Welt verwendet. Wie StackOverflow es ausdrückt:

Der Begriff "am schnellsten wachsend" kann schwer genau definiert werden, aber wir gehen davon aus, dass Python einen soliden Anspruch darauf hat, die am schnellsten wachsende große Programmiersprache zu sein.

Einige Gründe erklären die Python-Liebe:

  • Die grammatikalische Lesbarkeit ist beeindruckend.
  • Es hat eine schnelle Lernkurve für Neulinge.
  • Es verfügt über ein langlebiges, solides Ökosystem aus Bibliotheken und Gemeinden
  • Es ist jetzt die Standardsprache für Data Science und maschinelles Lernen.
  • Es unterstützt großartige Entwickler-Tools wie Pelican, einen netten statischen Blog-Generator.
  • Reddit ist in Python geschrieben. ;)

Was ist mit dem Django-Framework?

Django ist ein Open-Source-Python-Webframework auf hoher Ebene. Durch die Betonung wiederverwendbarer Komponenten können Entwickler schneller Web-Apps auf Python aufbauen. Es präsentiert sich als Web-Framework für Perfektionisten mit Deadlines.

Es wird jetzt von der Django Software Foundation verwaltet und wurde ursprünglich von zwei brillanten Lawrence Journal-World-Entwicklern geschrieben. Oh, und während Python seinen Namen von Comedy-Ikonen bezieht, hat Django seinen von einer vielseitigen Gitarrenlegende: Django Reinhardt!

Als Full-Stack-Framework überschattet es so ziemlich jedes alternative Tool. Es ist schnell, voll geladen, sicher, skalierbar und vielseitig. Alle Eigenschaften, die Sie wahrscheinlich auf Ihr E-Commerce-Setup anwenden möchten!

Warum Django für den E-Commerce nutzen?

Mit Django können Sie zwar viel anfangen, aber konzentrieren wir uns weiterhin auf die E-Commerce-Funktionen und die verschiedenen Tools, die zum Aufbau eines Onlineshops zur Verfügung stehen.

Hier sind zunächst einige Django-Funktionen, die Sie berücksichtigen sollten, wenn Sie nach dem richtigen Framework für den Aufbau eines Shops suchen.

→ Skalierbarkeit

Django eignet sich perfekt für E-Commerce-Startups, da es sich gut für kleine Websites eignet, sich aber auch perfekt an das Geschäftswachstum anpasst. Sie können sich darauf verlassen, dass Django Hunderte / Tausende von Besuchern gleichzeitig abwickelt. Es besteht aus unabhängigen Komponenten, die Sie je nach Bedarf zu einem bestimmten Zeitpunkt herausziehen oder austauschen können.

→ Sicherheit

Mit E-Commerce möchten Sie sicherstellen, dass sich Händler und Kunden durch Ihr Einkaufserlebnis gleichermaßen sicher fühlen. Django vermeidet eine ganze Reihe gängiger Sicherheitsfehler, die häufig die traditionellen PHP-CMS schwächen. Zum Beispiel verbirgt Django den Quellcode Ihrer Site vor der direkten Anzeige im Web, indem Webseiten dynamisch generiert werden.

→ Funktionsreich

Im Vergleich zu den meisten Frameworks bietet Django weitaus mehr sofort einsatzbereite Funktionen. Sie können damit sofort eine App erstellen. Perfekt, um Ihren Online-Shop mit Funktionen wie Benutzerauthentifizierung, Inhaltsverwaltung oder RSS-Feed zu unterstützen. Wenn etwas zu fehlen scheint, können Sie sich auf Djangos Community und Plugins-Ökosystem verlassen, um Ihre App zu erweitern!

→ SEO-freundlich

SEO ist für jedes Online-Geschäft von größter Bedeutung. Während andere Frameworks von Haus aus nicht gut mit Suchmaschinen funktionieren (hauptsächlich JavaScript-Frameworks wie Vue oder React), empfiehlt Django zumindest Best Practices für SEO. Für Menschen lesbare URLs und Sitemap-Funktionen werden sicher jedes Marketing-Team zufrieden stellen.

Oh und auch, es ist schnell. Was sowohl für das Kundenerlebnis als auch für die Suchmaschinenoptimierung immer großartig ist.

→ Zuverlässig

Es ist seit einiger Zeit einem Crowd-Test unterzogen worden, und die Community, in der es sich befindet, unterstützt es weitgehend. Es wird ständig von aktiven Entwicklern aktualisiert. Vielleicht trägst du sogar etwas bei. ;)

Es gibt einige bemerkenswerte E-Commerce-Lösungen im Python / Django-Ökosystem:

  • Oscar - Domain-gesteuerter E-Commerce für Django, Open Source.
  • Saleor - Eine in Python geschriebene E-Commerce-Storefront, Open Source.
  • Django-SHOP - Ein auf Django basierendes Shopsystem.
  • Shuup - Eine Anwendung für einen oder mehrere Anbieter.

Mit dieser umfangreichen Liste der besten E-Commerce-Pakete können Sie weitere Optionen erkunden.

Lassen Sie mich Ihnen jetzt einen weiteren coolen Stack für ein vollständiges und benutzerdefiniertes E-Commerce-Setup mit Django präsentieren.

Bachstelze CMS + Snipcart E-Commerce-Setup

Wagtail ist das erste Content-Management-System von Django. Es ist kostenlos und Open Source und wurde von den gutherzigen Leuten bei Torchbox entwickelt. Es ist elegant, flexibel und, meiner Meinung nach, umwerfend.

Im folgenden Wagtail-Tutorial erstellt und verwaltet das CMS Produkte, die Benutzer dann über einen Warenkorb kaufen können.

Am Ende steht eine solide E-Commerce-Website mit Django-Unterstützung zur Verfügung.

Lassen Sie uns praktisch werden!

Django E-Commerce-Tutorial mit Bachstelze CMS

Um mit den Filmreferenzen fortzufahren und weil wir in Python arbeiten, erstelle ich einen Slytherin-Demo-Shop! Mal sehen, wie es geht.

Voraussetzungen

  • Ein Snipcart-Konto (für immer kostenlos im Testmodus)
  • Grundkenntnisse in Python

1. Erstellen einer neuen Wagtail-E-Commerce-Site

Stellen Sie sicher, dass Sie Wagtail installiert haben. Wenn nicht, lesen Sie die Installationsdokumentation.

Öffne ein Terminal und starte eine neue Wagtail-Seite:

Wir haben einen zusätzlichen Schritt, um das Wagtail-Setup abzuschließen. Außerdem müssen wir das Plugin wagtail.contrib.settings installieren, das wir später benötigen.

Öffnen Sie in Ihrem neuen Wagtail-Projekt die Datei base.py im Einstellungsordner. Fügen Sie dann wagtail.contrib.settings zum Array INSTALLED_APPS hinzu.

1.1 Modelldefinition

Als Erstes müssen Sie Ihre Seitenmodelle erstellen. Wagtail verwendet diese Django-Modelle, um einen Seitentyp zu generieren.

Öffnen Sie die Datei models.py im Basisordner Ihres Produkts. Hier definieren Sie alle Ihre benutzerdefinierten Modelle.

Erstellen Sie zwei verschiedene Modelle:

  • Produkt: Definiert das Produkt, das Sie verkaufen.
  • ProductCustomField: Definiert ein einzelnes benutzerdefiniertes Produktfeld.

Beginnen wir mit dem Importieren der erforderlichen Module:

Fügen Sie nun das Produktmodell hinzu:

Und ProductCustomField:

2. Hinzufügen von Snipcart-Konfigurationseinstellungen

Wenn Sie weitere Hilfe zu diesem Teil benötigen, lesen Sie unsere Dokumentation hier und hier.

Stellen Sie sicher, dass Sie den Snipcart-API-Schlüssel direkt über das Dashboard von Wagtail aktualisieren können. Dazu müssen Sie Site-Einstellungen hinzufügen.

Websiteeinstellungen sind spezielle Felder, die Sie Ihrer Modelldatei hinzufügen können. Sie werden im Abschnitt "Bachstelzeneinstellungen" des Dashboards angezeigt.

Importieren Sie dieses Modul:

Dann fügen Sie diese hinzu:

3. Datenbankmigrationen

Nachdem Ihre Modelle erstellt wurden, müssen Sie Datenbankmigrationen generieren und ausführen.

Verwenden Sie in Ihrem Terminal den Befehl makemigrations:

Sie sollten die folgende Ausgabe sehen:

Sobald die Migrationen generiert wurden, wenden Sie sie mit dem Befehl migrate auf Ihre Datenbank an:

Es dauert einige Sekunden. Wagtail richtet ein eigenes Datenbankschema zusammen mit den soeben definierten Modellen ein.

Erstellen Sie schließlich Ihren ersten CMS-Benutzer mit dem Befehl createduperuser:

Vergessen Sie nicht den Benutzernamen und das Passwort, die Sie ausgewählt haben - Sie benötigen sie, um sich in das Dashboard von Wagtail einzuloggen.

4. Produkte erstellen

Starten Sie Ihren Entwickler-Server mit dem Befehl Django dev server:

Öffnen Sie nun Ihren Browser und navigieren Sie zu: http: // localhost: 8000 / admin. Verwenden Sie die zuvor eingerichteten Anmeldeinformationen, um sich anzumelden.

Wählen Sie die Startseite in Wagtail's Menü. Klicken Sie dann auf die Schaltfläche Untergeordnete Seite hinzufügen.

Sie werden aufgefordert, einen Seitentyp auszuwählen, und wählen Sie Produkt.

Geben Sie die Produktdetails ein und veröffentlichen Sie Ihr neues Produkt:

Sie können so viele Produkte erstellen, wie Sie möchten.

4.1 Hinzufügen des Snipcart-API-Schlüssels

Erinnern Sie sich an die SnipcartSettings-Klasse, die Sie erstellt haben? Sie können Ihren API-Schlüssel konfigurieren, indem Sie das Menü Einstellungen erweitern und zu den Snipcart-Einstellungen wechseln.

Öffnen Sie das Dashboard von Snipcart und holen Sie sich Ihren öffentlichen API-Schlüssel (Test oder Live). Gehen Sie zurück zu Wagtail und fügen Sie es in das API-Schlüsselfeld ein.

Speichern Sie Ihre Einstellungen.

5. Vorlage

Ihr Backend ist jetzt fertig, Ihr API-Schlüssel ist konfiguriert und Ihre ersten Produkte sind erstellt. Es ist Zeit, mit dem Aufbau der Website zu beginnen.

Für diese Demo habe ich mich für das Spectre.css CSS Framework entschieden. Es ist einfach und leicht.

Öffnen Sie die Datei base.html in snipcartwaigtaildemo / templates.

Sie müssen Referenzen für Spectree.css und Snipcart hinzufügen. Fügen Sie diese Zeilen in den Kopf Ihres Dokuments ein:

Der zuvor konfigurierte Snipcart-API-Schlüssel ist verfügbar über:

Fügen Sie dann die Navigationsleiste und einige andere Spectre.css-Layoutelemente hinzu.

Ersetzen Sie den Inhalt des gesamten Körpers durch diese Zeilen:

5.1 Produkte auflisten

Die erste Vorlage, die Sie benötigen, ist Ihr Index, in dem die Produkte aufgelistet werden.

Sie müssen Ihre Produkte im Kontext Ihrer Startseite verfügbar machen. In jeder Bachstelze-Seite können Sie einen Methodennamen get_context überschreiben.

Sie können die Daten, die die Ansicht erhalten soll, in Parametern hinzufügen. In meinem Fall möchte ich die Produktkontextvariable festlegen.

Öffnen Sie die Datei models.py im Basisordner und aktualisieren Sie die HomePage-Klasse:

Öffnen Sie dann die Datei home_page.html im Ordner home / templates / home.

Erstellen wir eine einfache Seite, auf der jedes Produktbild mit einem Link zu den Produktdetails angezeigt wird.

5.2 Produktdetails

Die letzte Vorlage zeigt einzelne Produktdetails zusammen mit dem Snipcart-Kaufknopf.

Es wäre auch schön, wenn Sie die Produktoptionen direkt auf dieser Seite auswählen könnten, bevor Sie sie in den Warenkorb legen. Daher füge ich eine Möglichkeit hinzu, alle benutzerdefinierten Felder mit Optionen direkt in der Vorlage auszuwählen.

Bevor Sie HTML schreiben, müssen Sie den Ansichtskontext aktualisieren. Django-Vorlagen geben uns nicht 100% igen Zugriff auf alle Python-Methoden und -Objekte, daher funktionieren Dinge wie das Teilen eines Strings nicht sehr gut.

Ich habe beschlossen, die Methode get_context erneut zu überschreiben. Vielleicht gibt es dafür einen besseren Weg - lassen Sie es mich in den Kommentaren unten wissen! ;)

Öffnen Sie models.py im Ausgangsordner und fügen Sie diese Methode in die Produktklasse ein:

Ein custom_fields-Array ist in der Vorlage product.html verfügbar.

Erstellen Sie eine Datei mit dem Namen product.html im Ordner home / templates / home. Dies ist die Vorlage, die dem Produktseitenmodell zugeordnet wird.

Fügen Sie dann JavaScript hinzu, um die Schaltfläche "Snipcart-Kauf" zu aktualisieren, wenn auf der Seite eine benutzerdefinierte Feldauswahl vorgenommen wird.

Fügen Sie das folgende Skript-Snippet vor der Endblock-Anweisung hinzu:

Dieser Code aktualisiert die Schaltflächendatenattribute, wenn sich der Auswahlwert ändert.

Wenn Sie auf das + neben einem Produkt klicken, sollten Sie dessen Details sehen:

Sie haben jetzt ziemlich gute Voraussetzungen, um Ihr E-Commerce-Projekt mit Django und Wagtail zu starten!

Diese Frameworks sind sehr mächtig. Sie können schnell einige Suchfunktionen, Produktvorschläge, Bewertungen usw. hinzufügen.

Live Demo & GitHub Repo

Sehen Sie sich die Live-Demo an
Siehe das GitHub-Repo

Gedanken schließen

Die Arbeit mit Bachstelze hat mir wirklich Spaß gemacht, da sie einfach und intuitiv ist. Ich muss jedoch sagen, dass sich ihre Dokumentation manchmal unvollständig anfühlt. Zuerst wollte ich ein paar Änderungen an der Funktionsweise des Routings vornehmen und habe in den Dokumenten dazu nichts gefunden.

Ich hatte Python zu Beginn nicht auf meinem Laptop installiert. Daher dauerte es ungefähr einen Tag, bis ich alles eingerichtet und diese Demo gestartet hatte, einschließlich des Hostings der Demo. Ich denke, es wäre viel schneller für begeisterte Python-Entwickler!

Für die weitere Erforschung denke ich, dass Wagtail ein großartiges kopfloses CMS sein könnte, insbesondere mit seiner integrierten API. Ich denke, es könnte cool sein, es zu nutzen und es an Tools wie Nuxt oder Gatsby zu befestigen, um das Frontend zu handhaben.

Vielleicht ein anderes Mal! ;)

Wenn Ihnen dieser Beitrag gefallen hat, nehmen Sie sich bitte eine Sekunde Zeit, um ihn auf Twitter zu teilen. Haben Sie Kommentare, Fragen? Schlagen Sie den Abschnitt unten!

Ursprünglich bei snipcart.com veröffentlicht.