Cree páginas de detalles del producto o PDP con Flask, Javascript, Bootstrap
Cree páginas de detalles del producto con matraz, Javascript, Python. Si está interesado en construir tiendas, esta pieza lo pone en el lugar correcto.
Las páginas de detalles del producto son las principales sustancias funcionales para varios propósitos críticos en las operaciones comerciales. Los clientes aprenden sobre su producto e IWOM a través de los PDP, y tiene un gran peso para que los clientes determinen si pagarán o no eventualmente. El mercado en línea y las plataformas de comercio social como Google Shopping y TikTok compran la integración API abierta para que los comerciantes enumeren productos y generen tráfico orgánico al conectarse con la fuente de datos PDP. Los especialistas en marketing se esfuerzan por optimizar la tasa de conversión del producto para aumentar el ROI de la inversión, ya que el PDP es una de las partes más importantes del embudo de conversión.
En este artículo, intentaría explicar cómo crear páginas de detalles de productos de forma masiva utilizando Flass, Javascript y Python desde la perspectiva de un desarrollador de Python. Si está interesado en construir PDP usando un matraz, esta pieza lo pondría en el lugar correcto.
Tabla de contenido: Cree páginas de detalles del producto de la tienda en línea o PDP usando Flask, Javascript, Bootstrap
- Diseña el diseño de la página usando Bootstrap
- Utilice el parámetro variable de URL de Flask para crear PDP de forma masiva
- Conéctese con MongoDB usando Jinja2 para mostrar el contenido detallado del producto en los PDP
- Agregue un Javascript para interactuar con fotos de productos en PDP
- Integrar con pasarela de pago
- Python completo del desarrollo de la página de detalles del producto usando Flask, Javascript y Bootstrap
Diseñe el diseño de la página usando Bootstrap
Lo primero es lo primero, primero diseñaría y delinearía el marco y los componentes del PDP. Existen muchas plantillas de PDP. Por lo tanto, puede diseñar desde cero o usar las plantillas de Bootstrap y agregar su diseño o contenido esperado. Para mí, tomaría Shopify PDP como ejemplo. Este es un enfoque que suelo adoptar copiando directamente la conocida plataforma PDP porque se puede disfrutar mejor con los clientes utilizando una especie de sentimiento de navegación familiar.
Aquí está la muestra y están los códigos de la siguiente manera
< div class = "container mt-5" >
< div class = "row" >
< div class = "col-md-6" ></div>
< div class = "col-md-6" ></div>
</div>
PD: la estructura PDP mencionada parece complicada, pero el marco solo tiene 5 líneas de código usando Bootstrap
Use el parámetro de variable URL de Flask para crear PDP a escala
En la ruta Flask, podemos usar < > para crear una variable en la URL. Esta variable se conecta con la definición en la ruta y la base de datos. Aquí está la muestra
@ 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 )
A partir de este código, podemos ver que, siempre que se haya creado la variable ABC en la base de datos, el script puede conectarse con ese conjunto de datos del producto y enviar los datos necesarios a la página principal.
Conéctese con MongoDB usando Jinja2 para mostrar el contenido detallado del producto en los PDP
Los scripts de ruta de la aplicación ilustran que hay un conjunto de datos nombrado en el producto que regresa a la interfaz. Como estamos usando MongoDB, el conjunto de datos está en formato JSON. Entonces tomo la foto del PDP para el ejemplo usando Jinja2 para mostrar contenido dinámicamente {{ }}
< 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 >
El resultado de este código muestra el ejemplo de Shopify que usamos anteriormente. Una foto grande y varias fotos pequeñas se adjuntan debajo de la grande.
Para obtener más detalles sobre cómo usar MongoDB en Flask, consulte estos artículos:
Capítulo 69: Cree un sistema de inicio de sesión de usuario de Flask usando PyMongo
Agregue un Javascript para interactuar con fotos de productos en PDP
Ahora las fotos aún no son interactivas, lo cual no es el resultado final que esperamos. La función fundamental que esperamos es que la foto grande se pueda cambiar cuando los clientes hacen clic en la pequeña. Aquí necesitamos una función en el front-end usando Javascript. Aquí está el ejemplo de código
< 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 >
Integrar con pasarela de pago
Por último, pero no menos importante, asegúrese de conectarse con la página de pago porque este es el propósito original para crear una tienda en línea. Aquí hay dos scripts que se necesitan.
Lo primero es lo primero, es la ruta de pago. Podemos usar el parámetro variable nuevamente en la ruta de la aplicación porque cada producto debe tener una identificación única que se conecte con la pasarela de pago. Entonces, la pasarela de pago puede identificar la información del producto, incluido el precio, la promoción, el país, la moneda, etc.
Aquí está el ejemplo de código. Por cierto, sugeriría agregar un inicio de sesión requerido para cualquier cliente que esté listo para pagar.
@ app .route ( "/buynow/<Stripe Product ID>" , methods =[ 'POST' , 'GET' ])
@loginRequired
def buynow ( Stripe Product ID ):
Luego, en la sección de interfaz, podemos usar Jinga2 nuevamente para conectarnos con la base de datos y decirle al sistema a qué producto debemos dirigirnos.
< a href = "{{ url_for('buynow', productID=product['Stripe Product ID']) }}"
class = "btn btn-primary btn-lg btn-block" > Buy Now </ a >
Para obtener más detalles sobre el pago de Stripe, consulte este artículo.
Capítulo 53: Integración de la API de Stripe para realizar pagos en línea desde aplicaciones web
Python completo del desarrollo de la página de detalles del producto usando Flask, Javascript y Bootstrap
Hay muchas secciones funcionales que puede agregar, como revisión del cliente, cantidad, control deslizante de recomendación de productos de relevancia, etc. No es difícil ya que puede agregar la extensión según este marco. Por favor, intente y explore.
Si está interesado en el Capítulo 71: Cree páginas de detalles del producto de la tienda en línea o PDP usando Flask, Javascript, Bootstrap, suscríbase a nuestro boletín agregando el mensaje "Capítulo 71" . Le enviaremos el guión inmediatamente a su buzón.
Espero que disfrute leyendo el Capítulo 71: Cree páginas de detalles del producto de la tienda en línea o PDP usando Flask, Javascript, Bootstrap. Si lo hiciste, apóyanos haciendo una de las cosas que se enumeran a continuación, porque siempre ayuda a nuestro canal.
- Apoya y dona a nuestro canal a través de PayPal ( paypal.me/Easy2digital )
- Suscríbete a mi canal y activa la campanita de notificaciones Easy2Digital Youtube channel .
- Sigue y dale me gusta a mi página Easy2Digital Facebook page
- Comparte el artículo en tu red social con el hashtag #easy2digital
- Te suscribes a nuestro boletín semanal para recibir los últimos artículos, videos y códigos de descuento de Easy2Digital
- Suscríbase a nuestra membresía mensual a través de Patreon para disfrutar de beneficios exclusivos ( www.patreon.com/louisludigital )
