Кейс модификации сайта на Tilda: множественный выбор опций товара с ограничением количества вариантов

Исходные данные:
На сайте клиента, созданном на Tilda, требовалось реализовать возможность выбора нескольких вариантов для одной опции товара с ограничением количества.

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

Решение:
Была разработана модификация, которая преобразовала обычные дополнительные опции товара в элементы с множественным выбором через выпадающий список.

Основные этапы создания модификации

1. Множественный выбор опций

За основу был взят функционал одной из существующих модификаций (mo-ti.ru), который был существенно переработан и дополнен.

На момент реализации возможности множественного выбора в Tilda ещё не было. В исходной модификации выпадающий список заменялся на набор чекбоксов. Однако заказчику требовался именно выпадающий список с ограничением количества вариантов. Для этого была переработана логика работы модификации.

2. Ограничение количества выбранных вариантов

Для удобства клиента параметры настройки, включая ограничение количества вариантов, были интегрированы в панель управления Tilda.

Так как добавление новых полей в стандартную панель управления невозможно, настройка осуществлялась через указание параметров в названии опции, например, в формате «ключ=значение». Модификация считывала эти параметры и скрывала их от пользователей.

3. Установка модификации

Модификация состояла из двух частей:

1. Конвертация выпадающего списка в элементы с множественным выбором (чекбоксы).
2. Логика инициализации, учитывающая особенности открытия товаров через всплывающие окна или отдельные страницы.

Чтобы модификация работала корректно, код необходимо было размещать в блоке HEAD сайта.

4. Отображение выбранных опций в заказе

Для удобства клиента:

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

Все данные о заказе отправляются через заявку Tilda и могут быть интегрированы в CRM.

Итоговый результат

Созданная модификация позволила:

• Добавить возможность множественного выбора для опций товара.
• Ограничить максимальное количество выбираемых вариантов.
• Обеспечить обновление стоимости товара в зависимости от выбора.

Весь функционал легко настраивается через стандартный интерфейс Tilda, что упрощает управление для клиента.

Читать полный кейс на vc.ru