使用 Flask、Javascript、Bootstrap 构建产品详细信息页面或 PDP

产品详细信息页面是业务运营中几个关键目的的主要功能物质。客户从 PDP 那里了解你的产品和网络口碑，对于让客户最终决定是否结账具有很高的权重。在线市场和社交商务平台（例如 Google Shopping 和 TikTok 商店）开放 API 集成，供商家列出产品并通过连接 PDP 数据源来产生有机流量。营销人员努力优化产品转化率，以提高投资回报率，因为 PDP 是转化漏斗中最重要的部分之一。

在这篇文章中，我将尝试从 Python 开发人员的角度介绍如何使用 Flask、Javascript 和 Python 批量构建产品详细信息页面。如果您对使用 Flask 构建 PDP 感兴趣，这篇文章将使您处于正确的位置。

目录：使用 Flask、Javascript、Bootstrap 构建在线商店产品详细信息页面或 PDP

使用 Bootstrap 设计页面布局
使用 Flask URL 变量参数批量创建 PDP
使用 Jinja2 与 MongoDB 连接以在 PDP 中显示产品详细内容
添加 Javascript 以与 PDP 中的产品照片进行交互
与支付网关集成
使用 Flask、Javascript 和 Bootstrap 进行完整的 Python 产品详细信息页面开发

使用 Bootstrap 设计页面布局

首先，我将首先设计并概述 PDP 框架和组件。有许多 PDP 模板。因此，您可以从头开始设计，也可以使用 Bootstrap 模板并添加您期望的设计或内容。对我来说，我会以 Shopify PDP 为例。这是我通常采用的做法，直接复制知名平台PDP，因为这样可以更好地让客户享受一种熟悉的浏览情绪。

这是示例，代码如下

 < div class = "container mt-5" >
 < div class = "row" >
 < div class = "col-md-6" ></div>
 < div class = "col-md-6" ></div>
 </div>

PS：上面提到的PDP结构看起来很复杂，但框架使用Bootstrap只有5行代码

使用 Flask URL 变量参数大规模创建 PDP

在 Flask 路由中，我们可以使用 <> 在 URL 中创建变量。该变量与路由和数据库中的 def 连接。这是样本

@ 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 )

从这段代码我们可以看到，只要数据库中创建了 ABC 变量，脚本就可以连接该产品数据集并将所需的数据提供给首页。

使用 Jinja2 与 MongoDB 连接以在 PDP 中显示产品详细内容

应用程序路由脚本说明有一个在产品中命名的数据集返回到前端。由于我们使用 MongoDB，数据集是 JSON 格式。因此，我使用 Jinja2 拍摄PDP 的照片来动态显示内容 {{ }}

 < 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 >

此代码结果显示了我们上面使用的 Shopify 示例。大照片下面附有一张大照片和几张小照片。

有关如何在 Flask 中使用 MongoDB 的更多详细信息，请参考以下文章：

第 69 章 – 使用 PyMongo 构建 Flask 用户登录系统

第 66 章 – Flask 应用数据库使用 MongoDB Atlas 和 Python 改进大数据管理

添加 Javascript 以与 PDP 中的产品照片进行交互

现在照片仍然无法交互，这不是我们期望的最终结果。我们期望的基本功能是当客户点击小照片时可以改变大照片。这里我们需要一个使用Javascript 的前端函数。这是代码示例

< 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 >

与支付网关集成

最后但并非最不重要的一点是，请务必连接结账页面，因为这是您建立网上商店的初衷。这里需要两个脚本。

首先，这是结账路径。我们可以在应用程序路由中再次使用变量参数，因为每个产品都应该有一个与支付网关连接的唯一ID。因此支付网关可以识别产品信息，包括定价、促销、国家、货币等。

这是代码示例。顺便说一句，我建议为任何准备结帐的客户添加所需的登录信息。

@ app .route ( "/buynow/<Stripe Product ID>" , methods =['POST' ,'GET' ])
 @loginRequired
 def buynow ( Stripe Product ID ):

然后，在前端部分，我们可以再次使用Jinga2连接数据库并告诉系统我们应该定向到哪个产品。

 < a href = "{{ url_for('buynow', productID=product['Stripe Product ID']) }}"
 class = "btn btn-primary btn-lg btn-block" > Buy Now </ a >

有关 Stripe 付款的更多详细信息，请参阅本文。

第 53 章 – Stripe API 集成以从 Web 应用程序进行在线支付

使用 Flask、Javascript 和 Bootstrap 进行完整的 Python 产品详细信息页面开发

您可以添加很多功能部分，例如客户评论、数量、相关产品推荐滑块等。这并不困难，您可以基于此框架添加扩展。请尝试和探索。

如果您对第 71 章 – 使用 Flask、Javascript、Bootstrap 构建在线商店产品详细信息页面或 PDP 感兴趣，请添加消息“第 71 章”来订阅我们的时事通讯。我们会立即将脚本发送到您的邮箱。

我希望您喜欢阅读第 71 章 – 使用 Flask、Javascript、Bootstrap 构建在线商店产品详细信息页面或 PDP。如果您这样做了，请通过执行下列操作之一来支持我们，因为这总是对我们的频道有所帮助。

通过 PayPal ( paypal.me/Easy2digital ) 支持并捐赠我们的频道
订阅我的频道并打开通知铃Easy2Digital Youtube 频道。
关注并喜欢我的页面Easy2Digital Facebook 页面
使用主题标签 #easy2digital 在您的社交网络上分享文章
您订阅我们的每周通讯即可接收 Easy2Digital 最新文章、视频和折扣代码
通过 Patreon 订阅我们的月度会员即可享受独家优惠 ( www.patreon.com/louisludigital )