Erstellen Sie Produktdetailseiten oder PDP mit Flask, Javascript, Bootstrap
Erstellen Sie Produktdetailseiten mit Flask, Javascript, Python. Wenn Sie sich für den Bau von Geschäften interessieren, sind Sie mit diesem Artikel genau richtig
Produktdetailseiten sind die wichtigsten funktionellen Substanzen für mehrere wichtige Zwecke im Geschäftsbetrieb. Kunden erfahren von PDPs etwas über Ihr Produkt und IWOM, und es hat eine große Bedeutung, Kunden dazu zu bringen, zu entscheiden, ob sie irgendwann zur Kasse gehen oder nicht. Online-Marktplätze und Social-Commerce-Plattformen wie Google Shopping und der TikTok-Shop öffnen die API-Integration für Händler, um Produkte aufzulisten und durch die Verbindung mit PDP-Datenfeed organischen Traffic zu generieren. Vermarkter bemühen sich, die Produktkonversionsrate zu optimieren, um den Investitions-ROI zu steigern, da PDP einer der wichtigsten Teile des Konversionstrichters ist.
In diesem Artikel würde ich versuchen, aus Sicht eines Python-Entwicklers zu erläutern, wie man mit Flask, Javascript und Python Produktdetailseiten in großen Mengen erstellt. Wenn Sie daran interessiert sind, PDPs mit Kolben zu bauen, ist dieser Artikel genau das Richtige für Sie.
Inhaltsverzeichnis: Erstellen Sie Online-Shop-Produktdetailseiten oder PDP mit Flask, Javascript, Bootstrap
- Entwerfen Sie das Seitenlayout mit Bootstrap
- Verwenden Sie den Variablenparameter Flask URL, um PDPs in großen Mengen zu erstellen
- Stellen Sie über Jinja2 eine Verbindung zu MongoDB her, um Produktdetailinhalte in PDPs anzuzeigen
- Fügen Sie ein Javascript hinzu, um mit Produktfotos in PDPs zu interagieren
- Integration mit Payment Gateway
- Vollständiges Python für die Entwicklung von Produktdetailseiten mit Flask, Javascript und Bootstrap
Entwerfen Sie das Seitenlayout mit Bootstrap
Als Erstes würde ich zuerst das PDP-Framework und die Komponenten entwerfen und skizzieren. Es gibt viele PDP-Vorlagen. Sie können also entweder von Grund auf neu entwerfen oder die Bootstrap-Vorlagen verwenden und Ihr erwartetes Design oder Ihren erwarteten Inhalt hinzufügen. Für mich würde ich Shopify PDP als Beispiel nehmen. Dies ist ein Ansatz, den ich normalerweise anwende, indem ich die bekannte Plattform PDP direkt kopiere, weil sie den Kunden mit einer vertrauten Browsing-Stimmung besser gefällt.
Hier ist das Beispiel und es gibt die folgenden Codes
< div class = "container mt-5" >
< div class = "row" >
< div class = "col-md-6" ></div>
< div class = "col-md-6" ></div>
</div>
PS: Die erwähnte PDP-Struktur sieht kompliziert aus, aber das Framework besteht nur aus 5 Codezeilen mit Bootstrap
Verwenden Sie den Variablenparameter Flask URL, um PDPs im großen Maßstab zu erstellen
In der Flask-Route können wir < > verwenden, um eine Variable in der URL zu erstellen. Diese Variable verbindet sich mit der Definition in der Route und der Datenbank. Hier ist das Beispiel
@ app .route ( "/<abc>" , methods =[ 'GET' , 'POST' ])
def abc ( variableURL ):
product = mongoDB .abc. find_one (
{ 'ABC' : abc })
return render_template ( '/abc.html' , product = product , user = current_user )
Aus diesem Code können wir ersehen, dass das Skript, solange die ABC-Variable in der Datenbank erstellt wurde, eine Verbindung mit diesem Produktdatensatz herstellen und die benötigten Daten an die Startseite weiterleiten kann.
Stellen Sie über Jinja2 eine Verbindung zu MongoDB her, um Produktdetailinhalte in PDPs anzuzeigen
Die App-Routenskripte veranschaulichen, dass es einen im Produkt benannten Datensatz gibt, der zum Frontend zurückkehrt. Da wir MongoDB verwenden, liegt der Datensatz im JSON-Format vor. Also nehme ich das Foto des PDP als Beispiel für die Verwendung von Jinja2, um Inhalte dynamisch anzuzeigen {{ }}
< div class = "col-md-6" >
< div id = "imageABC" >
< image src = "{{ product['imageabc']}}" width = "600" height = "600" ></ image >
</ div >
< div id = "imageSSSSS" >
< img src = "{{ product['imagecde']}}" width = "120" height = "120" class = "p-3" >
< img src = "{{ product['imageefg']}}" width = "120" height = "120" class = "p-3" >
< img src = "{{ product['imagehaha']}}" width = "120" height = "120" class = "p-3" >
< img src = "{{ product['imageGG']}}" width = "120" height = "120" class = "p-3" >
</ div >
</ div >
Dieses Codeergebnis zeigt das Shopify-Beispiel, das wir oben verwendet haben. Unterhalb des großen Fotos sind ein großes Foto und mehrere kleine Fotos angehängt.
Weitere Informationen zur Verwendung von MongoDB in Flask finden Sie in den folgenden Artikeln:
Kapitel 69 – Erstellen eines Flask-Benutzeranmeldesystems mit PyMongo
Kapitel 66 – Flask-Anwendungsdatenbank mit MongoDB Atlas und Python zur besseren Big-Data-Verwaltung
Fügen Sie ein Javascript hinzu, um mit Produktfotos in PDPs zu interagieren
Jetzt sind die Fotos immer noch nicht interaktiv, was nicht das Endergebnis ist, das wir erwarten. Die grundlegende Funktion, die wir erwarten, besteht darin, dass das große Foto geändert werden kann, wenn Kunden auf das kleine klicken. Hier benötigen wir eine Funktion im Frontend mit Javascript. Hier ist das Codebeispiel
< script >
var imageABC = document . getElementById ( 'imageABC' );
var imageSSSSS = document . getElementById ( 'imageSSSSS' ). getElementsByTagName ( 'img' );
for ( var i = 0 ; i < imageSSSSS . length ; i ++) {
imageSSSSS [ i ]. addEventListener ( 'click' , full_image );
}
function full_image () {
var ImageSRC = this . getAttribute ( 'src' );
imageABC . innerHTML = "<img src=" + ImageSRC + " width='600' height='600'>" ;
}
</ script >
Integration mit Payment Gateway
Zu guter Letzt stellen Sie bitte sicher, dass Sie eine Verbindung zur Checkout-Seite herstellen, da dies der ursprüngliche Zweck des Aufbaus eines Online-Shops ist. Hier sind zwei Skripte erforderlich.
Als Erstes ist es der Checkout-Pfad. Wir können den variablen Parameter erneut in der App-Route verwenden, da jedes Produkt eine eindeutige ID haben sollte, die mit dem Zahlungsgateway verbunden ist. So kann das Zahlungsgateway die Produktinformationen identifizieren, einschließlich Preis, Werbeaktion, Land, Währung usw.
Hier ist das Codebeispiel. Übrigens würde ich vorschlagen, für alle Kunden, die zur Kasse gehen möchten, eine Anmeldepflicht hinzuzufügen.
@ app .route ( "/buynow/<Stripe Product ID>" , methods =[ 'POST' , 'GET' ])
@loginRequired
def buynow ( Stripe Product ID ):
Dann können wir im Frontend-Bereich erneut Jinga2 verwenden, um eine Verbindung zur Datenbank herzustellen und dem System mitzuteilen, zu welchem Produkt wir verweisen sollen.
< a href = "{{ url_for('buynow', productID=product['Stripe Product ID']) }}"
class = "btn btn-primary btn-lg btn-block" > Buy Now </ a >
Weitere Einzelheiten zur Stripe-Zahlung finden Sie in diesem Artikel.
Kapitel 53 – Stripe-API-Integration zur Abwicklung von Online-Zahlungen über Webanwendungen
Vollständiges Python für die Entwicklung von Produktdetailseiten mit Flask, Javascript und Bootstrap
Es gibt viele funktionale Abschnitte, die Sie hinzufügen können, z. B. Kundenbewertung, Menge, Schieberegler für relevante Produktempfehlungen usw. Das ist nicht schwierig, da Sie die Erweiterung basierend auf diesem Framework hinzufügen können. Bitte versuchen Sie es zu erkunden.
Wenn Sie an Kapitel 71 – Erstellen von Produktdetailseiten oder PDP für Online-Shops mit Flask, Javascript, Bootstrap interessiert sind, Bitte abonnieren Sie unseren Newsletter , indem Sie die Nachricht „Kapitel 71“ hinzufügen. . Wir senden Ihnen das Skript umgehend in Ihr Postfach.
Ich wünsche Ihnen viel Spaß beim Lesen von Kapitel 71 – Erstellen von Produktdetailseiten oder PDP für Online-Shops mit Flask, Javascript, Bootstrap. Wenn ja, unterstützen Sie uns bitte, indem Sie eine der unten aufgeführten Maßnahmen ergreifen, da dies unserem Kanal immer weiterhilft.
- Unterstützen Sie unseren Kanal und spenden Sie über PayPal ( paypal.me/Easy2digital )
- Abonnieren Sie meinen Kanal und aktivieren Sie die Benachrichtigungsglocke des Easy2Digital-Youtube-Kanals .
- Folgen und liken Sie meine Easy2Digital-Facebook-Seite
- Teilen Sie den Artikel in Ihrem sozialen Netzwerk mit dem Hashtag #easy2digital
- Sie melden sich für unseren wöchentlichen Newsletter an, um die neuesten Artikel, Videos und Rabattcodes von Easy2Digital zu erhalten
- Abonnieren Sie unsere monatliche Mitgliedschaft über Patreon, um exklusive Vorteile zu genießen ( www.patreon.com/louisludigital )
