Документация
Главная Документация Backend-API
Кнопки покупки в описании

Кнопки покупки в описании

Блок с кнопками «В корзину» и «В избранное», который можно вставить прямо в описание товара или в рекламный блок «Хит продаж». Во втором примере добавлен живой счётчик корзины.

Где разместить

HTML-вставка в карточке товара или блок на главном экране.

Простой вариант

Две кнопки. Работают везде, где можно вставлять HTML.

HTML 
<div style="display:flex;gap:10px;margin:12px 0;">
  <button data-mobius="basket.add" data-id="15" data-qty="1"
          style="flex:1;padding:14px;border:none;border-radius:12px;
                 background:#1D8673;color:#fff;font-size:15px;font-weight:600;">
    В корзину
  </button>
  <button data-mobius="favorites.toggle" data-id="15"
          style="padding:14px 16px;border:1px solid #E0E0E0;border-radius:12px;
                 background:#fff;font-size:15px;">
    В избранное
  </button>
</div>

Вариант со счётчиком корзины

Кнопка добавляет товар и показывает, сколько всего товаров в корзине. Счётчик обновляется сам. Этот вариант работает в блоках на главном экране, в карточке товара и в историях.

HTML 
<div style="margin:12px 0;">
  <button id="add-15"
          style="width:100%;padding:14px;border:none;border-radius:12px;
                 background:#1D8673;color:#fff;font-size:15px;font-weight:600;">
    В корзину
  </button>
  <p style="text-align:center;margin-top:8px;color:#7A7A7A;">
    В корзине: <b id="basket-count">0</b>
  </p>
</div>

<script>
  document.getElementById('add-15').addEventListener('click', async () => {
    await Mobius.basket.add('15', 1);
  });

  Mobius.on('basket:changed', data => {
    document.getElementById('basket-count').textContent = data.basketCount;
  });
</script>

Как адаптировать

  • data-id="15" и Mobius.basket.add('15', 1) — замените 15 на ID вашего товара.
  • data-qty — количество, которое добавляется за одно нажатие.
  • Цвета и отступы меняйте в style.

Используемые команды

Обновлено 10.07.2026 09:36
Помогла ли статья?