Создавайте страницы сведений о продукте или PDP с помощью Flask, Javascript, Bootstrap
Создавайте страницы сведений о продукте с помощью flask, Javascript, Python. Если вы заинтересованы в строительстве магазинов, эта статья поможет вам в этом.
Страницы сведений о продукте являются основными функциональными элементами для нескольких важных целей в бизнес-операциях. Клиенты узнают о вашем продукте и 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" >
< div class = "row" >
< div class = "col-md-6" ></div>
< div class = "col-md-6" ></div>
</div>
PS: Упомянутая структура PDP выглядит сложной, но фреймворк состоит всего из 5 строк кода с использованием Bootstrap.
Используйте переменный параметр Flask URL для создания PDP в масштабе
В маршруте Flask мы можем использовать < > для создания переменной в URL-адресе. Эта переменная соединяется с определением в маршруте и базе данных. Вот образец
@ 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, скрипт может подключиться к этому набору данных о продукте и передать необходимые данные на главную страницу.
Подключитесь к MongoDB с помощью Jinja2, чтобы отобразить сведения о продукте в PDP.
Сценарии маршрута приложения показывают, что в продукте есть набор данных, возвращаемый во внешний интерфейс. Поскольку мы используем MongoDB, набор данных находится в формате JSON. Поэтому я беру фотографию PDP для примера, используя Jinja2 для динамического отображения контента {{ }}
< 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, который мы использовали выше. Одно большое фото плюс несколько маленьких фото прикреплены под большим.
Дополнительные сведения об использовании MongoDB во Flask см. в следующих статьях:
Глава 69. Создание системы входа пользователя Flask с использованием PyMongo
Добавьте 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 >
Интеграция с платежным шлюзом
И последнее, но не менее важное: обязательно подключитесь к странице оформления заказа, потому что это первоначальная цель создания интернет-магазина. Здесь есть два скрипта, которые необходимы.
Прежде всего, это путь к кассе. Мы можем снова использовать переменный параметр в маршруте приложения, потому что каждый продукт должен иметь уникальный идентификатор, связанный с платежным шлюзом. Таким образом, платежный шлюз может идентифицировать информацию о продукте, включая цены, рекламные акции, страну, валюту и т. д.
Вот пример кода. Кстати, я бы предложил добавить логин, необходимый для всех клиентов, которые готовы оформить заказ.
@ 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 для проведения онлайн-платежей из веб-приложений
Полный 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 )
