С чего начать

Эта статья объясняет, как добавить команду к ссылке или кнопке. Это основной способ — он покрывает большинство задач и не требует программирования.

Куда вставлять HTML

Команды работают в любом поле, где вы вводите HTML:

• блок на главном экране;
• HTML-вставки в карточке товара — до и после картинки, описания, кнопки покупки;
• кнопка в истории;
• текст записи или новости;
• статическая страница.

Если редактор показывает текст «как в приложении» (визуальный режим), переключитесь в режим HTML / Исходный код — иначе редактор может убрать нестандартные теги и атрибуты.

Атрибут data-mobius

Чтобы элемент что-то делал при нажатии, добавьте к нему атрибут data-mobius со словом-командой:

<a data-mobius="navigation.goBack">Назад</a>

Работает на любом элементе, по которому можно нажать, — чаще всего это ссылка <a> или кнопка <button>.

Как передать данные команде

Большинству команд нужны данные: какой товар открыть, сколько штук добавить. Есть три способа их передать — выбирайте любой удобный.

Способ 1. Прямо в команде (в скобках)

<a data-mobius="catalog.openProduct('15')">Открыть товар</a>
<a data-mobius="catalog.openSection('320', 'Новинки')">Новинки</a>

Значения пишите в кавычках, через запятую, в том порядке, в котором они указаны в справочнике команд.

Способ 2. Отдельными атрибутами data-

То же самое, но каждое значение — в своём атрибуте. Имя атрибута — это data- плюс название параметра:

<button data-mobius="basket.add" data-id="15" data-qty="2">
    Добавить 2 штуки в корзину
</button>

Способ 3. Атрибут data-params (для сложных данных)

Если данных много или они вложенные, передайте их одним атрибутом data-params в формате JSON:

<a data-mobius="catalog.openSectionFiltered"
   data-params='{"id":"320","title":"Распродажа","filter":{"sale":"Y"}}'>
    Товары со скидкой
</a>

Обратите внимание: внутри data-params используются двойные кавычки, а сам атрибут берётся в одинарные.

Ссылки через mobius://

Если вам удобнее работать обычными ссылками, используйте адрес, начинающийся с mobius://:

<a href="mobius://catalog.openHome">Перейти в каталог</a>

Это полностью равнозначно data-mobius. Удобно, когда редактор разрешает менять только адрес ссылки, но не добавлять произвольные атрибуты.

Оформление: блок уже выглядит «как приложение»

Вставленный текст автоматически наследует шрифт приложения, базовый размер и цвет текста — специально ничего настраивать не нужно. Если хотите изменить оформление кнопки или блока, добавляйте обычный CSS:

<a data-mobius="catalog.openHome"
   style="display:inline-block;padding:12px 20px;border-radius:10px;
          background:#1D8673;color:#fff;text-decoration:none;text-align:center;">
    Перейти в каталог
</a>

Короткий чек-лист

1. Вставьте HTML в режиме исходного кода.
2. Добавьте к ссылке или кнопке атрибут data-mobius с нужной командой.
3. Передайте данные одним из трёх способов.
4. Сохраните и проверьте на демо-стенде.

Что дальше

• Справочник команд — полный список того, что можно вызвать.
• Примеры — готовые блоки, которые можно скопировать и доработать.
• Программный доступ — для сложных сценариев с обратной связью от приложения.