Виджет списка игр QQ — инструкция по встраиванию

Виджет QQ позволяет разместить на вашем сайте список игр с фильтрацией по городу, формату, режиму, последовательности и виду транспорта. Можно также вывести конкретные игры по ID.

1. Как подключить виджет

Вставьте в нужное место внутри <body> HTML-код виджета:

<qq-list-games
  records="3"
  city="Владимир"
  format="street, urban"
  transport="car, any"
></qq-list-games>

Подключите JavaScript-файл виджета, после HTML-элемента виджета:

<script type="module" crossorigin src="https://qq.land/widget/index.js"></script>

2. Настройка фильтров

Все фильтры указываются в виде HTML-атрибутов тега <qq-list-games>.

• Если атрибут не указан, фильтрация по нему не применяется.
• Для нескольких значений одного фильтра перечислите их через запятую.
• По умолчанию указанные фильтры используются совместно (И). Для условия ИЛИ используйте атрибут or.
• В названии города учитывается регистр: Владимир и владимир — разные значения.

records — количество игр

Ограничивает количество игр в списке.

<qq-list-games records="3"></qq-list-games>

city — город

<qq-list-games city="Владимир"></qq-list-games>

Важно: название города указывайте с точным соблюдением регистра букв.

format — формат игры

Значение	Описание
street	Лёгкие квесты по улицам
urban	Сложные квесты по заброшенным объектам
brain	Виртуальные игры
snoop	Детективные квесты
maze	Квесты-лабиринты
tour	Экскурсии
combat	Межкомандные сражения
photo	Фотоигры

Пример: вывести форматы Street и Urban.

<qq-list-games format="street, urban"></qq-list-games>

type — режим игры

Значение	Описание
run	Соревновательный режим
fun	Развлекательный режим без итогового распределения мест

<qq-list-games type="run"></qq-list-games>

schema — последовательность заданий

Значение	Описание
linear	Линейная последовательность
random	Случайная последовательность
all	Все задания открываются сразу
custom	Сложная пользовательская последовательность

<qq-list-games schema="linear, random"></qq-list-games>

transport — вид транспорта

Значение	Описание
none	Без транспорта (виртуальные игры)
any	Любой транспорт
car	На автомобилях
foot	Пешком
bike	На велосипедах

<qq-list-games transport="car, foot"></qq-list-games>

or — условие «ИЛИ» между фильтрами

Позволяет выводить игры, соответствующие хотя бы одному из перечисленных в or фильтров, вместо обязательного совпадения всех этих условий.

<qq-list-games
  city="Владимир"
  transport="none"
  or="city, transport"
></qq-list-games>

В этом примере отобразятся игры, которые проходят во Владимире ИЛИ не требуют транспорта.

3. Вывод конкретных игр по ID

Чтобы показать одну или несколько выбранных игр, укажите их ID в атрибуте id через запятую.

Одна игра:

<qq-list-games id="118"></qq-list-games>

Несколько игр:

<qq-list-games id="118, 119"></qq-list-games>

4. Готовые примеры

Вывод ближайших трех игр во Владимире

<qq-list-games records="3" city="Владимир"></qq-list-games>

Вывод только соревновательных игр на автомобилях

<qq-list-games type="run" transport="car"></qq-list-games>

Все игры Москвы и все виртуальные игры

Этот вариант использует ИЛИ: показываются игры из Москвы, а также игры без транспорта независимо от города.

<qq-list-games
  city="Москва"
  transport="none"
  or="city, transport"
></qq-list-games>

Несколько виджетов на одной странице

Можно разместить несколько элементов <qq-list-games> с разными параметрами. Скрипт index.js подключайте только один раз.

<qq-list-games city="Владимир" records="3"></qq-list-games>
<qq-list-games id="118, 119"></qq-list-games>

<script type="module" crossorigin src="https://qq.land/widget/index.js"></script>

5. Если виджет не отображается

Проверьте следующее:

1. В HTML присутствует элемент <qq-list-games>...</qq-list-games>.
2. Скрипт подключён именно через src="https://qq.land/widget/index.js" и имеет type="module".
3. В атрибутах нет опечаток: schema="linear", а не type="linear".
4. Название города написано с правильным регистром.
5. Фильтры не исключают все игры из выдачи.
6. Если код вставляется через конструктор сайта или CMS, она действительно разрешает пользовательские HTML-теги и выполнение JavaScript. Некоторые редакторы удаляют <script> или не запускают его в содержимом страницы — в таком случае скрипт требуется подключить через шаблон сайта или специальный раздел для пользовательского JavaScript.