Страницы сведений о продукте являются основными функциональными элементами для нескольких важных целей в бизнес-операциях. Клиенты узнают о вашем продукте и IWOM из PDP, и это имеет большое значение, чтобы заставить клиентов решить, стоит ли в конечном итоге оформлять заказ или нет. Онлайн-рынок и платформы социальной коммерции, такие как Google Shopping и магазин TikTok, открывают интеграцию API для продавцов, чтобы перечислять продукты и генерировать органический трафик, подключаясь к потоку данных PDP. Маркетологи прилагают усилия для оптимизации коэффициента конверсии продукта, чтобы увеличить рентабельность инвестиций, поскольку PDP является одной из наиболее важных частей воронки конверсии.

В этой статье я попытаюсь рассказать, как массово создавать страницы сведений о продукте с помощью flask, Javascript и Python с точки зрения разработчика Python. Если вы заинтересованы в создании PDP с помощью flask, эта статья поможет вам в этом.

Содержание: Создание страниц сведений о продукте в интернет-магазине или PDP с использованием Flask, Javascript, Bootstrap

• Создайте макет страницы с помощью Bootstrap
• Используйте переменный параметр Flask URL для массового создания PDP
• Подключитесь к MongoDB с помощью Jinja2, чтобы отобразить сведения о продукте в PDP.
• Добавьте Javascript для взаимодействия с фотографиями продуктов на PDP.
• Интеграция с платежным шлюзом
• Полный Python для разработки страни. цы сведений о продукте с использованием Flask, Javascript и Bootstrap

Создайте макет страницы с помощью Bootstrap

Прежде всего, я бы сначала спроектировал и набросал структуру и компоненты PDP. Существует множество шаблонов PDP. Таким образом, вы можете создавать дизайн с нуля или использовать шаблоны Bootstrap и добавлять ожидаемый дизайн или контент. Для себя я бы взял Shopify PDP в качестве примера. Это подход, который я обычно использую, напрямую копируя хорошо известную платформу PDP, потому что она может лучше понравиться клиентам, используя своего рода знакомое настроение просмотра.

Вот образец и есть следующие коды

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

PS: Упомянутая структура PDP выглядит сложной, но фреймворк состоит всего из 5 строк кода с использованием Bootstrap.

Используйте переменный параметр Flask URL для создания PDP в масштабе

В маршруте Flask мы можем использовать < > для создания переменной в URL-адресе. Эта переменная соединяется с определением в маршруте и базе данных. Вот образец

@ app .route ( "/<abc>"  , methods =[ 'GET'  , 'POST' ])\n def abc ( variableURL ):\n product = mongoDB .abc. find_one (\n { 'ABC' : abc })\n return render_template ( '/abc.html'  , product  = product  , user  = current_user )

Из этого кода видно, что если в базе данных создана переменная ABC, скрипт может подключиться к этому набору данных о продукте и передать необходимые данные на главную страницу.

Подключитесь к MongoDB с помощью Jinja2, чтобы отобразить сведения о продукте в PDP.

Сценарии маршрута приложения показывают, что в продукте есть набор данных, возвращаемый во внешний интерфейс. Поскольку мы используем MongoDB, набор данных находится в формате JSON. Поэтому я беру фотографию PDP для примера, используя Jinja2 для динамического отображения контента {{ }}

 < div class = "col-md-6" >\n < div id = "imageABC" >\n < image src = "{{ product['imageabc']}}" width = "600" height = "600" ></ image >\n </ div >\n < div id = "imageSSSSS" >\n < img src = "{{ product['imagecde']}}" width = "120" height = "120" class = "p-3" >\n < img src = "{{ product['imageefg']}}" width = "120" height = "120" class = "p-3" >\n < img src = "{{ product['imagehaha']}}" . width = "120" height = "120" class = "p-3" >\n < img src = "{{ product['imageGG']}}" width = "120" height = "120" class = "p-3" >\n </ div >\n </ div >

Этот результат кода показывает пример Shopify, который мы использовали выше. Одно большое фото плюс несколько маленьких фото прикреплены под большим.

Дополнительные сведения об использовании MongoDB во Flask см. в следующих статьях:

Глава 69. Создание системы входа пользователя Flask с использованием PyMongo

Глава 66. База данных приложения Flask с использованием MongoDB Atlas и Python для улучшения управления большими данными

Добавьте Javascript для взаимодействия с фотографиями продуктов на PDP.

Теперь фотографии по-прежнему не интерактивны, что не является окончательным результатом, которого мы ожидаем. Основная функция, которую мы ожидаем, заключается в том, что большая фотография может быть изменена, когда клиенты нажимают на маленькую. Здесь нам нужна функция во внешнем интерфейсе, использующая Javascript. Вот пример кода

< script >\n var imageABC = document . getElementById ( 'imageABC' );\n var imageSSSSS = document . getElementById ( 'imageSSSSS' ). getElementsByTagName ( 'img' );\n for ( var i = 0 ; i < imageSSSSS . length  ; i ++) {\n imageSSSSS [ i ]. addEventListener ( 'click'  , full_image );\n }\n function full_image () {\n var ImageSRC = this . getAttribute ( 'src' );\n imageABC . innerHTML = "<img src=" + ImageSRC + " width='600' height='600'>"  ;\n }\n </ script >

Интеграция с платежным шлюзом

И последнее, но не менее важное: обязательно подключитесь к странице оформления заказа, потому что это первоначальная цель создания интернет-магазина. Здесь есть два скрипта, которые необходимы.

Прежде всего, это путь к кассе. Мы можем снова использовать переменный параметр в маршруте приложения, потому что каждый продукт должен иметь уникальный идентификатор, связанный с платежным шлюзом. Таким образом, платежный шлюз может идентифицировать информацию о продукте, включая цены, рекламные акции, страну, валюту и т. д.

Вот пример кода. Кстати, я бы предложил добавить логин, необходимый для всех клиентов, которые готовы оформить заказ.

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

Затем в разделе внешнего интерфейса мы можем снова использовать Jinga2 для подключения к базе данных и сообщить системе, к какому продукту мы должны направить.

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

Для получения более подробной информации о платеже Stripe, пожалуйста, обратитесь к этой статье.

Глава 53. Интеграция Stripe API для проведения онлайн-платежей из веб-приложений

Полный Python для разработки страницы сведений о продукте с использованием Flask, Javascript и Bootstrap

Есть много функциональных разделов, которые вы можете добавить, например, обзор клиентов, количество, ползунок рекомендаций по релевантности продукта и т. Д. Это не сложно, поскольку вы можете добавить расширение на основе этой структуры. Пожалуйста, попробуйте и исследуйте.

Если вас интересует Глава 71. Создание страниц сведений о продукте в интернет-магазине или PDP с использованием Flask, Javascript, Bootstrap, пожалуйста , подпишитесь на нашу рассылку , добавив сообщение «Глава 71» . Мы отправим вам сценарий немедленно на ваш почтовый ящик.

Надеюсь, вам понравится читать главу 71 — Создание страниц сведений о продукте в интернет-магазине или PDP с использованием Flask, Javascript, Bootstrap. Если вы это сделали, пожалуйста, поддержите нас, выполнив одно из перечисленных ниже действий, потому что это всегда помогает нашему каналу.

• Поддержите и пожертвуйте нашему каналу через PayPal ( paypal.me/Easy2digital )
• Подпишитесь на мой канал и включите колокольчик уведомлений канала Easy2Digital Youtube .
• Подписывайтесь и лайкайте мою страницу Страница Easy2Digital в Facebook
• Поделитесь статьей в своей социальной сети с хэштегом #easy2digital
• Вы подписываетесь на нашу еженедельную рассылку, чтобы получать последние статьи, видео и коды скидок Easy2Digital.
• Подпишитесь на наше ежемесячное членство через Patreon, чтобы пользоваться эксклюзивными преимуществами ( www.patreon.com/louisludigital )