Flask、JavaScript、Bootstrap を使用して製品詳細ページまたは PDP を構築する
Flask、JavaScript、Python を使用して製品詳細ページを構築します。店舗建設に興味があるなら、この作品はあなたにぴったりの靴を提供します
製品詳細ページは、事業運営におけるいくつかの重要な目的のための主要な機能性物質です。顧客は PDP から製品と IWOM について学び、最終的にチェックアウトするかどうかを顧客に決定させる上で大きな比重を占めます。 Google ショッピングや TikTok ショップなどのオンライン マーケットプレイスとソーシャル コマース プラットフォームは、販売者が PDP データ フィードに接続して商品をリストし、オーガニック トラフィックを生成するためのオープン API 統合を行っています。 PDP はコンバージョン ファネルの最も重要な部分の 1 つであるため、マーケティング担当者は投資 ROI を高めるために製品コンバージョン率を最適化することに努力します。
この記事では、Python 開発者の観点から、flask、JavaScript、Python を使用して製品詳細ページを一括で構築する方法を説明していきます。フラスコを使用して PDP を構築することに興味がある場合は、この記事が最適です。
目次: Flask、JavaScript、Bootstrap を使用してオンライン ショップの商品詳細ページまたは PDP を構築する
- Bootstrap を使用してページ レイアウトをデザインする
- Flask URL 変数パラメータを使用して PDP を一括作成する
- Jinja2 を使用して MongoDB に接続し、PDP に製品詳細コンテンツを表示します
- PDP で製品写真を操作するための Javascript を追加する
- ペイメントゲートウェイとの統合
- Flask、JavaScript、およびブートストラップを使用した製品詳細ページ開発の完全な Python
- よくある質問
ブートストラップを使用してページ レイアウトを設計する
まず最初に、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 構造は複雑に見えますが、フレームワークにはブートストラップを使用した 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 サンプルを示しています。大きな写真 1 枚と、大きな写真の下に小さな写真が数枚添付されています。
Flask で MongoDB を使用する方法の詳細については、次の記事を参照してください。
第 66 章 – MongoDB Atlas と Python を使用してビッグデータ管理を向上させる Flask アプリケーション データベース
PDP で製品写真を操作するための Javascript を追加する
現在、写真はまだインタラクティブではありませんが、これは私たちが期待する最終結果ではありません。私たちが期待する基本的な機能は、顧客が小さな写真をクリックすると大きな写真が変更されることです。ここでは、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 >
ペイメントゲートウェイとの統合
最後になりますが、これがオンライン ショップを構築する本来の目的であるため、必ずチェックアウト ページに接続してください。ここで必要なスクリプトが 2 つあります。
まず最初に、チェックアウト パスです。各製品には支払いゲートウェイに接続する一意の 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 決済の詳細については、こちらの記事を参照してください。
Flask、JavaScript、およびブートストラップを使用した製品詳細ページ開発の完全な 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 )
よくある質問:
Q1: 楽天のブランド製品について何ですか？
A: 楽天は、日本の大手インターネットサービス企業で、オンラインショッピングモールを提供しています。
Q2: 楽天のブランド製品の特徴は何ですか？
A: 楽天のブランド製品は、品質の高さと幅広い品揃えが特徴です。
Q3: 楽天のブランド製品を購入する方法はありますか？
A: 楽天のブランド製品は、楽天市場や楽天オンラインストアなどで購入することができます。
Q4: 楽天のブランド製品の送料はどのくらいですか？
A: 楽天のブランド製品の送料は商品によって異なります。詳細は各商品ページをご確認ください。
Q5: 楽天のブランド製品を返品する場合、どのような手続きが必要ですか？
A: 返品については、購入したストアや商品によって異なります。各ストアの返品ポリシーをご確認ください。
Q6: 楽天のブランド製品は国内のみで販売されていますか？
A: 楽天のブランド製品は、一部国内のみで販売されているものもありますが、多くの商品が国内外で販売されています。
Q7: 楽天のブランド製品の支払い方法は何がありますか？
A: 楽天のブランド製品の支払い方法は、クレジットカード、代引き、銀行振込などがあります。各商品ページでご確認ください。
Q8: 楽天のブランド製品の保証はありますか？
A: 楽天のブランド製品には、メーカーの保証が適用される場合があります。商品ページや取扱説明書をご確認ください。
Q9: 楽天のブランド製品のサイズはどのように選べますか？
A: 楽天のブランド製品のサイズは、各商品ページでサイズチャートや詳細な寸法を確認することができます。
Q10: 楽天のブランド製品をギフトとして送ることはできますか？
A: 楽天のブランド製品をギフトとして送ることはできます。注文時にギフトラッピングやメッセージカードを選択することができます。
