Как программно добавить товар в корзину Tilda с определённым количеством

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

Стандартный механизм добавления в корзину Tilda

В Tilda каждый товар на странице имеет кнопку «В корзину», которая генерирует ссылку вида #order:Название товара=Цена:::image=URL_картинки. При клике по такой ссылке товар попадает в корзину с количеством 1. Чтобы изменить количество, нужно модифицировать саму ссылку или использовать JavaScript.

Способ 1: Прямая ссылка с параметрами

Вы можете добавить товар в корзину, сформировав ссылку вручную. Формат для одного товара с количеством 2:

#order:Товар=500*2:::image=https://static.tildacdn.com/example.jpg

Звездочка и число после цены задают количество. Если нужно несколько товаров, используйте символ | как разделитель:

#order:Товар1=500*2|Товар2=300*1:::image=...

Этот метод работает для статичных страниц, но не подходит для динамического изменения корзины без перезагрузки.

Способ 2: Использование JavaScript и Tilda API

Tilda предоставляет глобальный объект tilda и методы для работы с корзиной. Чтобы добавить товар программно, выполните в консоли браузера или в своём скрипте:

tilda.basket.add({ title: 'Товар', price: 500, quantity: 2, image: 'https://static.tildacdn.com/example.jpg' });

Этот способ позволяет обновлять корзину без перезагрузки страницы и задавать любое количество. Убедитесь, что скрипт выполняется после загрузки библиотеки Tilda.

Способ 3: Имитация клика по кнопке

Если предыдущие варианты не сработали (например, из-за кастомной вёрстки), можно эмулировать клик по кнопке. Найдите элемент кнопки «В корзину» через селектор и вызовите .click(). Однако количество при этом останется равным 1 - для изменения числа придётся предварительно менять атрибуты кнопки или использовать комбинацию с tilda.basket.update.

Рекомендации по выбору метода

• Для разовых задач (тестирование, прототип) - используйте прямую ссылку с количеством.
• Для динамических страниц (SPA, кастомные формы) - применяйте JavaScript API Tilda.
• Если нет доступа к API (например, на старых версиях Tilda) - имитируйте клик и затем корректируйте количество через tilda.basket.update.

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