Construire des pages de détails de produit ou PDP avec Flask, Javascript, Bootstrap
Créez des pages de détails sur les produits avec Flask, Javascript, Python. Si vous êtes intéressé par la construction de magasins, cette pièce vous met dans les bonnes chaussures
Les pages de détails du produit sont les principales substances fonctionnelles à plusieurs fins critiques dans les opérations commerciales. Les clients découvrent votre produit et IWOM à partir des PDP, et il a un poids élevé pour inciter les clients à déterminer s'ils doivent ou non vérifier éventuellement. Le marché en ligne et les plates-formes de commerce social comme Google Shopping et la boutique TikTok ouvrent l'intégration de l'API pour que les marchands répertorient les produits et génèrent du trafic organique en se connectant au flux de données PDP. Les spécialistes du marketing s'efforcent d'optimiser le taux de conversion des produits afin d'augmenter le retour sur investissement, car le PDP est l'une des parties les plus importantes de l'entonnoir de conversion.
Dans cet article, j'essaierais d'expliquer comment créer des pages de détails de produits en masse à l'aide de flask, Javascript et Python du point de vue d'un développeur Python. Si vous êtes intéressé par la construction de PDP à l'aide de flacons, cet article vous mettrait dans les bonnes chaussures.
Table des matières : Créer des pages de détails sur les produits de la boutique en ligne ou PDP à l'aide de Flask, Javascript, Bootstrap
- Concevoir la mise en page à l'aide de Bootstrap
- Utiliser le paramètre de variable d'URL Flask pour créer des PDP en masse
- Connectez-vous à MongoDB en utilisant Jinja2 pour afficher le contenu détaillé du produit dans les PDP
- Ajoutez un Javascript pour interagir avec les photos de produits dans les PDP
- Intégration avec la passerelle de paiement
- Python complet du développement de la page de détail du produit à l'aide de Flask, Javascript et Bootstrap
Concevoir la mise en page à l'aide de Bootstrap
Tout d'abord, je concevrais et décrirais d'abord le cadre et les composants du PDP. Il existe de nombreux modèles de PDP. Ainsi, vous pouvez soit concevoir à partir de zéro, soit utiliser les modèles Bootstrap et ajouter la conception ou le contenu attendu. Pour moi, je prendrais Shopify PDP comme exemple. C'est une approche que j'adopte habituellement en copiant directement la plate-forme bien connue PDP car elle peut mieux profiter avec les clients en utilisant une sorte de sentiment de navigation familier.
Voici l'échantillon et il y a les codes comme suit
< div class = "container mt-5" >
< div class = "row" >
< div class = "col-md-6" ></div>
< div class = "col-md-6" ></div>
</div>
PS: La structure PDP mentionnée semble compliquée, mais le framework n'a que 5 lignes de code utilisant Bootstrap
Utiliser le paramètre de variable d'URL Flask pour créer des PDP à grande échelle
Dans la route Flask, nous pouvons utiliser < > pour créer une variable dans l'URL. Cette variable se connecte avec le def dans la route et la base de données. Voici l'échantillon
@ 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 )
À partir de ce code, nous pouvons voir que tant que la variable ABC a été créée dans la base de données, le script peut se connecter à cet ensemble de données produit et fournir les données nécessaires à la page d'accueil.
Connectez-vous à MongoDB en utilisant Jinja2 pour afficher le contenu détaillé du produit dans les PDP
Les scripts de route d'application illustrent qu'il existe un ensemble de données nommé dans le produit qui revient à l'interface. Comme nous utilisons MongoDB, le jeu de données est au format JSON. Je prends donc la photo du PDP pour l'exemple en utilisant Jinja2 pour afficher le contenu dynamiquement {{ }}
< 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 >
Ce résultat de code montre l'exemple Shopify que nous avons utilisé ci-dessus. Une grande photo et plusieurs petites photos sont jointes sous la grande.
Pour plus de détails sur l'utilisation de MongoDB dans Flask, veuillez consulter ces articles :
Chapitre 69 – Construire un système de connexion utilisateur Flask à l'aide de PyMongo
Ajoutez un Javascript pour interagir avec les photos de produits dans les PDP
Maintenant, les photos ne sont toujours pas interactives, ce qui n'est pas le résultat final que nous attendons. La fonction fondamentale que nous attendons est que la grande photo peut être modifiée lorsque les clients cliquent sur la petite. Ici, nous avons besoin d'une fonction dans le frontal utilisant Javascript. Voici l'exemple de code
< 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 >
Intégration avec la passerelle de paiement
Enfin, assurez-vous de vous connecter à la page de paiement, car c'est l'objectif initial de la création d'une boutique en ligne. Ici, deux scripts sont nécessaires.
Tout d'abord, c'est le chemin de paiement. Nous pouvons réutiliser le paramètre variable dans la route de l'application car chaque produit doit avoir un identifiant unique se connectant à la passerelle de paiement. Ainsi, la passerelle de paiement peut identifier les informations sur le produit, y compris le prix, la promotion, le pays, la devise, etc.
Voici l'exemple de code. Soit dit en passant, je suggérerais d'ajouter une connexion requise pour tous les clients qui sont prêts à payer.
@ app .route ( "/buynow/<Stripe Product ID>" , methods =[ 'POST' , 'GET' ])
@loginRequired
def buynow ( Stripe Product ID ):
Ensuite, dans la section frontale, nous pouvons à nouveau utiliser Jinga2 pour nous connecter à la base de données et indiquer au système vers quel produit nous devons nous diriger.
< a href = "{{ url_for('buynow', productID=product['Stripe Product ID']) }}"
class = "btn btn-primary btn-lg btn-block" > Buy Now </ a >
Pour plus de détails concernant le paiement Stripe, veuillez consulter cet article.
Python complet du développement de la page de détail du produit à l'aide de Flask, Javascript et Bootstrap
Il existe de nombreuses sections fonctionnelles que vous pouvez ajouter, telles que l'avis des clients, la quantité, le curseur de recommandation de produit de pertinence, etc. Ce n'est pas difficile car vous pouvez ajouter l'extension basée sur ce cadre. Veuillez essayer et explorer.
Si vous êtes intéressé par Chapitre 71 – Créer des pages de détails de produits de boutique en ligne ou PDP à l'aide de Flask, Javascript, Bootstrap, veuillez vous inscrire à notre newsletter en ajoutant le message "Chapitre 71" . Nous vous enverrions le script immédiatement dans votre boîte aux lettres.
J'espère que vous apprécierez la lecture du chapitre 71 – Créer des pages de détails sur les produits de la boutique en ligne ou PDP à l'aide de Flask, Javascript, Bootstrap. Si vous l'avez fait, veuillez nous soutenir en faisant l'une des choses énumérées ci-dessous, car cela aide toujours notre chaîne.
- Soutenez et faites un don à notre chaîne via PayPal ( paypal.me/Easy2digital )
- Abonnez-vous à ma chaîne et activez la cloche de notification Chaîne Youtube Easy2Digital .
- Suivez et aimez ma page Page Facebook Easy2Digital
- Partagez l'article sur votre réseau social avec le hashtag #easy2digital
- Vous vous inscrivez à notre newsletter hebdomadaire pour recevoir les derniers articles, vidéos et codes de réduction Easy2Digital
- Abonnez-vous à notre abonnement mensuel via Patreon pour profiter d'avantages exclusifs ( www.patreon.com/louisludigital )
