상품 상세 페이지는 비즈니스 운영에서 여러 중요한 목적을 위한 주요 기능 물질입니다. 고객은 PDP를 통해 귀사의 제품과 IWOM에 대해 알게 되며, 결국 고객이체크아웃할지 여부를 결정하게 하는 데 큰 비중을 차지합니다. Google 쇼핑과 같은 온라인 마켓플레이스 및 소셜 커머스 플랫폼, 판매자가 PDP 데이터 피드와 연결하여 제품을 나열하고 유기적 트래픽을 생성하기 위한 TikTok 상점 개방형 API 통합. PDP는 전환 깔때기의 가장 중요한 부분 중 하나이므로 마케터는 투자 ROI를 높이기 위해 제품 전환율을 최적화하기 위해 노력합니다.

이 글에서는 Python 개발자 관점에서 Flask, Javascript 및 Python을 사용하여 대량으로 제품 상세 페이지를 작성하는 방법에 대해 살펴보려고 합니다. 플라스크를 사용하여 PDP를 구축하는 데 관심이 있다면 이 글을 통해 올바른 입장이 될 것입니다.

목차: Flask, Javascript, Bootstrap을 사용하여 온라인 상점 제품 상세 페이지 또는 PDP 구축

• Bootstrap을 사용하여 페이지 레이아웃 디자인
• Flask URL 변수 매개변수를 사용하여 대량으로 PDP 생성
• Jinja2를 사용하여 MongoDB와 연결하여 PDP에 제품 세부 내용 표시
• PDP의 제품 사진과 상호 작용하는 Javascript 추가
• 결제 게이트웨이와 통합
• Flask, Javascript 및 Bootstrap을 사용한 제품 상세 페이지 개발의 전체 Python

부트스트랩을 사용하여 페이지 레이아웃 디자인

먼저 PDP 프레임워크와 구성 요소를 먼저 설계하고 윤곽을 잡겠습니다. 많은 PDP 템플릿이 있습니다. 따라서 처음부터 디자인하거나 부트스트랩 템플릿을 사용하여 원하는 디자인이나 콘텐츠를 추가할 수 있습니다. 저에게는 Shopify PDP를 예로 들겠습니다. 익숙한 브라우징 감성으로 고객과 함께 즐길 수 있기 때문에 잘 알려진 플랫폼 PDP를 직접 복사하여 주로 채택하는 접근 방식입니다.

다음은 샘플이며 다음과 같은 코드가 있습니다.

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

추신: 언급된 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장 – 더 나은 빅 데이터 관리를 위해 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 >

결제 게이트웨이와 통합

마지막으로 체크아웃 페이지에 연결하는 것이 온라인 상점을 만드는 원래 목적이기 때문에 반드시 연결하십시오. 여기에 필요한 두 개의 스크립트가 있습니다.

먼저 체크 아웃 경로입니다. 각 상품마다 결제 게이트웨이와 연결되는 고유 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 통합

Flask, Javascript 및 Bootstrap을 사용한 제품 상세 페이지 개발의 전체 Python

고객 리뷰, 수량, 관련성 제품 추천 슬라이더 등과 같이 추가할 수 있는 기능 섹션이 많이 있습니다. 이 프레임워크를 기반으로 확장을 추가할 수 있으므로 어렵지 않습니다. 시도하고 탐색하십시오.

Chapter 71 – Flask, Javascript, Boots. trap을 사용하여 온라인 상점 제품 상세 페이지 또는 PDP 구축, "Chapter 71"이라는 메시지를 추가하여 뉴스레터를 구독 하십시오. . 귀하의 사서함으로 스크립트를 즉시 보내드립니다.

71장 – Flask, Javascript, Bootstrap을 사용하여 온라인 상점 제품 상세 페이지 또는 PDP 구축을 즐겁게 읽으시기 바랍니다. 그렇다면 아래 나열된 항목 중 하나를 수행하여 지원해 주세요. 항상 채널에 도움이 되기 때문입니다.

• PayPal( paypal.me/Easy2digital )을 통해 채널을 지원하고 기부하세요.
• 제 채널 구독하시고 알림벨을 켜주세요 Easy2Digital 유튜브 채널 .
• 내 페이지 팔로우 및 좋아요 Easy2Digital Facebook 페이지
• #easy2digital 해시태그를 사용하여 소셜 네트워크에 기사를 공유하세요.
• Easy2Digital 최신 기사, 비디오 및 할인 코드를 받으려면 주간 뉴스레터에 가입하십시오.
• 독점적인 혜택을 누리려면 Patreon을 통해 월간 멤버십을 구독하세요( www.patreon.com/louisludigital ).