Как делать галерею / магазин / каталог / карусель / в телеграм боте
Делать будем в конструкторе ботов Salebot.
Показываю на примере товаров. Но можно также сделать и для услуг и для хоть чего.
Основной принцип в применении функции изменения сообщения.
Структура бота следующая 👇
Бот состоит из следующих частей:
1) Блоков отображения. Есть основной и блоки с первым товаром и последним. Эти блоки различаются только наличием кнопок "вперед" и "назад". В первом отображении нет "назад", в последнем - "вперед".Можно реализовать кольцевой показ, чтобы карточки показывались по кругу. Но не в этом примере :)
2) Блоки с изменением переменных "+1" и "-1". О них позже.
3) Условия перехода в основной блок отображения или первый/последний
Запись информации о товарах в переменные
Функция изменения сообщения с картинкой имеет два важных параметра: саму картинку и ее описание (текст под картинкой). Всю информацию о товарах записываем в переменные. Соответственно, их будет минимум 2, если нужно описание. Либо 1, если описание не нужно.
В этом примере я использую 3 переменные. В отдельную переменную сохранил цену. Сама цена тоже относится к описанию. Можно было обойтись и двумя переменными. Тут кому как удобно.
Сохраняем переменные в константы проекта 👇
Фото указываются просто ссылкой на них. У меня они сохранены просто в облаке.
Важно! Помните, что фото должны быть легкими. Для этого нужно их оптимизировать. Можно загуглить "оптимизировать фото" и выйдет много сайтов, где это можно сделать.
Также достаточно использовать картинки с бОльшим размером 1000 пикселей.
Другой простой вариант: скиньте себе в Телеграм в избранное фото со сжатием. И Телеграм сделает все за вас. Останется только скачать.
И да, нужно сохранить токен телеграм бота в переменную, как указано в первой строке на скриншоте 👆 это пригодится.
Описания товаров я сохранял в стартовом блоке. Потому что, сохраняя в константах проекта, не получится сделать переносов строки. А в калькуляторе можно: + "\n" + как раз обозначает "добавить перенос строки" 👇
Другой вариант сохранения описаний. Делаете отдельную ветку сообщений для администратора. И там делаете выбор нужных переменных и сохранение данных в переменную. Отправляете нужное описание, которое записывает в нужную переменную.
В чем суть записи в переменные?
Есть три типа переменных: photo (фото), desc (описание), price (цена).
Есть три категории: столы, кресла, светильники.
И есть порядковый номер товара.
Меняя категорию и порядковый номер мы получим нужный товар 👇
А теперь по порядку
Стартовый блок
Тип запроса в этом и во всех следующих блоках POST-data
Сохраняемые значения
result|message_id -> message_id
JSON-параметры
{
"chat_id":"#{platform_id}",
"photo":"https://cloud.mail.ru/public/T9zA/GtfRb9ag6",
"caption":"Стартовая страница каталога. Выбирайте нужные категории и нажимайте на кнопки.",
"reply_markup":"{\"inline_keyboard\":[[{\"text\":\"Столы\", \"callback_data\":\"stol\"}],[{\"text\":\"Кресла\", \"callback_data\":\"kreslo\"}],[{\"text\":\"Светильники\", \"callback_data\":\"svet\"}]]}"
}
Калькулятор тут сохранил описания товаров, скрин выше.
Код я рекомендую записывать вручную для тренировки. Сначала можеть показаться сложно, но со временем набьете руку и разберетесь в синтаксисе. И будете лучше разбираться.
Результат 👇
Разбор кода
Настройки кнопок разберем позже.
При нажатии на кнопку бот получит callback. Упрощенно можно сказать, что колбек это ключевое слово, которое уходит при нажатии на кнопку. Текст на ней может быть любым, а колбек настраиваем мы в настройках кнопок. И его мы сохраняем в переменную category. Для этого в условии перехода достаточно сделать как на скриншоте
Блок Первое отображение
Тип запроса POST-data
JSON-параметры
{
"chat_id": "#{platform_id}",
"message_id": "#{message_id}",
"media":"{\"type\":\"photo\",\"media\":\"#{photo_tovar}\",\"caption\":\"#{desc_tovar}\n\nЦена товара: #{price_tovar}\"}",
"reply_markup": "{\"inline_keyboard\":[[{\"text\":\">>\", \"callback_data\":\">>\"}], [{\"text\":\"Выбрать\", \"callback_data\":\"vibor\"}], [{\"text\":\"В начало\", \"callback_data\":\"catalog\"}]]}"
}
Калькулятор
number = 1
photo_tovar = #{photo_#{category}_#{number}}
desc_tovar = #{desc_#{category}_#{number}}
price_tovar = #{price_#{category}_#{number}}
Параметры в коде те же, что и в первом блоке. Здесь поменялся URL, где мы уже "говорим" не отсылать сообщение, а редактировать его.В калькуляторе задаем порядковый номер товара. И задаем переменные с фото, описанием и ценой.
Переход в блок "+1"
Тут только указываем в условии колбек, который приходит при нажатии на кнопку.
Блок "+1"
Используем только калькулятор
number = number + 1
photo_tovar = #{photo_#{category}_#{number}}
desc_tovar = #{desc_#{category}_#{number}}
price_tovar = #{price_#{category}_#{number}}
number_plus = number + 1
desc_tovar_proverka_plus = #{desc_#{category}_#{number_plus}}
Добавляем порядковый номер товара и переназначаем переменные, отвечающие за отображение товара (1-4 строчки).
Что в 5 и 6 строке - об этом ниже.
В чём суть определения, когда отправлять пользователя в первый или последний блок?
Если в каждой категории одинаковое кол-во товаров, то можно было бы просто сделать условие по переменной number. Когда она равна 1, то отправляй в Первый блок. Когда равна номеру последнего товара, то отправляй в последний.
Но сделаем вариант для разного кол-ва товаров в категориях. И даже когда будет меняться кол-во товаров, нам не придется лезть и менять условие.
В самом начале как раз показал пример: столов 5, а светильников 4. И все работает как надо.
Суть условия простая:
Проверяем есть ли фото следующего товара. Если нет, значит этот товар последний. Тогда отправляем в Последний блок. И аналогично с Первым блоком.
Можно проверять не только по фото, но и по описанию или цене. Без разницы.
Для этого и есть запись в калькуляторе:
Блок "-1"
Тут все аналогично блоку "+1", только + меняем на -.
Основной блок отображения
Тип запроса POST-data
JSON-параметры
{
"chat_id": "#{platform_id}",
"message_id": "#{message_id}",
"media":"{\"type\":\"photo\",\"media\":\"#{photo_tovar}\",\"caption\":\"#{desc_tovar}\n\nЦена товара: #{price_tovar}\"}",
"reply_markup": "{\"inline_keyboard\":[[{\"text\":\"<<\", \"callback_data\":\"<<\"}, {\"text\":\">>\", \"callback_data\":\">>\"}], [{\"text\":\"Выбрать\", \"callback_data\":\"vibor\"}], [{\"text\":\"В начало\", \"callback_data\":\"catalog\"}]]}"
}
Комментарий к добавлению абзацев 👇
Разбор кода кнопок
Настройка одной кнопки заключается в {}
Кнопки, находящиеся в одной строке, заключаются в [ ]
Все настройки кнопок заключаются в [ ]
Поэтому тут так много скобок :-)
По колбеку "catalog" попадаем в стартовый блок
Блок последнего отображения
Он такой же, как и основной блок отображение, только в нем есть только кнопка "Назад". Вставлю только скрин кода.
Условия попадания в блоки
В последний блок попадаем по условию: desc_tovar_proverka_plus == None
То есть, если описание следующего товара пустое, тогда переходим в последний блок.
Если описание следующего не пустое desc_tovar_proverka_plus != None, то переходим в основной блок.Аналогично и с первым блоком.
Всё! Бот готов!
Теперь можно добавлять любое кол-во товаров, редактировать цены и описание. А бот будет работать сам!
После выбора товара есть два варианта:
1) перейти к оформлению заказа
2) добавлять товар в корзину и только потом оформлять заказ
Но это отдельная история, поэтому тут не разбирал.