Перейти к содержанию

Карусели

Чтобы создать карусель, вам нужно сделать соответствующий генератор его элементов

Question

Если вы не знакомы с терминами генератор и yield, ознакомиться можно здесь

import vkquick as vq


@vq.Cmd(names=["tp"])
@vq.Reaction("message_new")
def tp():
    return vq.Message(
        "Your template",
        template=carousel()
    )

@vq.Template()
def carousel():
    titles = ["Foo", "Bar"]
    descs = ["Foo desc", "Bar desc"]
    kbs = [
        [vq.Button.text("foo")],
        [vq.Button.text("bar")]
    ]
    for title, desc, kb in zip(
        titles, descs, kbs
    ):
        elem = vq.Element(
            title=title,
            description=desc,
            buttons=kb
        )
        yield elem.open_link("https://google.com")

Шаг 1: Создайте генератор

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

@vq.Template()
def carousel():
    titles = ["Foo", "Bar"]
    descs = ["Foo desc", "Bar desc"]
    kbs = [
        [vq.Button.text("foo")],
        [vq.Button.text("bar")]
    ]
    for title, desc, kb in zip(
        titles, descs, kbs
    ):
        elem = vq.Element(
            title=title,
            description=desc,
            buttons=kb
        )
        yield elem.open_link("https://google.com")

Вы также можете конкретно указать тип шаблона. По умолчанию он "carousel"

@vq.Template(type_="carousel")
def carousel():
    ...

Шаг 2: Соберите данные для элементов

Ваша задача — сделать yield элементов карусели. Что для этого нужно? Алгоритмом в примере мы создаем список заголовков, описаний и клавиатур (здесь без Keyboard, только список Button'ов). После чего проходимся for'ом по zip'ованным спискам (на каждый n-ный элемент списка возвращается кортеж из всех)

@vq.Template()
def carousel():
    titles = ["Foo", "Bar"]
    descs = ["Foo desc", "Bar desc"]
    kbs = [
        [vq.Button.text("foo")],
        [vq.Button.text("bar")]
    ]
    for title, desc, kb in zip(
        titles, descs, kbs
    ):
        elem = vq.Element(
            title=title,
            description=desc,
            buttons=kb
        )
        yield elem.open_link("https://google.com")

Шаг 3: Создаем объект элемента

После того, как мы получили данные для каждого из элементов — создаем соответствующий инстанс

@vq.Template()
def carousel():
    titles = ["Foo", "Bar"]
    descs = ["Foo desc", "Bar desc"]
    kbs = [
        [vq.Button.text("foo")],
        [vq.Button.text("bar")]
    ]
    for title, desc, kb in zip(
        titles, descs, kbs
    ):
        elem = vq.Element(
            title=title,
            description=desc,
            buttons=kb
        )
        yield elem.open_link("https://google.com")

Шаг 4: Назначаем действие

Элемент имеет одно из следующих действий:

  • open_link
  • open_photo

Поэтому нужно вызвать соответсвующий метод (у меня при нажатии на элемент открывается страница гугла)

@vq.Template()
def carousel():
    titles = ["Foo", "Bar"]
    descs = ["Foo desc", "Bar desc"]
    kbs = [
        [vq.Button.text("foo")],
        [vq.Button.text("bar")]
    ]
    for title, desc, kb in zip(
        titles, descs, kbs
    ):
        elem = vq.Element(
            title=title,
            description=desc,
            buttons=kb
        )
        yield elem.open_link("https://google.com")

Шаг 5: yield Элемента

Последним этапом нам нужно yield'нуть элемент

Шаг 6: Вызов карусели

Теперь нам нужно лишь вызвать карусель и ее можно прикреплять к полю template в классе Messsage

return vq.Message(
    "Your template",
    template=carousel()
)

Вы также можете создать карусель через метод by, передав туда словарь, описывающий схему карусели

Todo

Планируется сделать еще более упрощенный генератор каруселей, которому нужно будет лишь скармливать списки

Note

На момент напсиания статьи карусели поддерживаются только в мобильных клиентах. На веб версии вк такого функционала еще нет

Example

Карусель с принимаемым заголовками из текста пользователя (пример использования аргуменов)

import vkquick as vq


@vq.Cmd(names=["tp"])
@vq.Reaction("message_new")
def tp(titles: vq.List(vq.Word, min_=2, max_=2)):
    return vq.Message(
        "Your template",
        template=carousel(titles)
    )

@vq.Template()
def carousel(titles):
    descs = ["Foo desc", "Bar desc"]
    kbs = [
        [vq.Button.text("foo")],
        [vq.Button.text("bar")]
    ]
    for title, desc, kb in zip(
        titles, descs, kbs
    ):
        elem = vq.Element(
            title=title,
            description=desc,
            buttons=kb
        )
        yield elem.open_link("https://google.com")

Содержимая схема в виде словаря находится в поле info