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

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

Постановка задачи
Множественный выбор опций
Ограничение количества выбранных вариантов
Установка модификации на сайт
Отображение вариантов при оформлении заказа
Конечный результат

Дано

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

Проблема

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

Решение

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

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

Теперь в Tilda есть возможность добавления множественного выбора для опции товара, однако на момент разработки этого кейса данная функция ещё не была выпущена. Кроме того, как будет видно дальше, клиенту требовался дополнительный функционал, который можно было добавить только с помощью модификации.

Изначально модификация с mo-ti.ru конвертировала выпадающий список в набор чекбоксов, однако клиенту нужен был выпадающий список с множественным выбором и ограничением на количество выбираемых вариантов.

С помощью CSS список с галочками был оформлен в виде стандартного выпадающего списка опций Tilda:

Чекбоксы для множественного выбора опций в виде выпадающего списка

В исходной модификации нельзя было ограничить количество выбранных вариантов, при этом требовалось ограничить выбор до 3-х вариантов. Для этого необходимо было изменить логику поведения готовой модификации.

Чтобы определить настройки для дополнительных опций товара, такие как максимальное количество вариантов, необходимо было найти способ сохранения этих настроек.

Конечно, можно было бы задавать эти настройки через код, но это создало бы неудобства для клиента в будущем. Если потребовалось бы изменить эти настройки, ему пришлось бы редактировать код, что не очень хорошо с точки зрения пользовательского опыта. Гораздо более удобный вариант — это задавать эти настройки через панель управления Tilda.

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

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

Тогда название опции примет следующий вид:

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

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

С помощью ChatGPT был сделан прототип функции, которая достает эти данные из названия опции в виде объекта JavaScript:

// Функция парсинга строки с именем и параметрами опции function parseTitle(input) { const [namePart, paramPart] = input.split(';'); const config = { name: namePart.trim(), parameters: {} }; // Если есть параметры, парсим их с помощью регулярного выражения if (paramPart) { const regex = /(\w+)(?:\s*=\s*("[^"]*"|\S*))?/g; let match; while ((match = regex.exec(paramPart.trim())) !== null) { const key = match[1]; let value = match[2]; // Убираем кавычки, если они есть if (value !== undefined && value.startsWith('"') && value.endsWith('"')) { value = value.slice(1, -1); } else { // Преобразуем значение в число или логическую переменную, если возможно const maybeNumber = isNaN(Number(value)) ? value : Number(value); const maybeBoolean = String(maybeNumber).toLowerCase() === 'true' ? true : String(maybeNumber).toLowerCase() === 'false' ? false : maybeNumber; value = maybeBoolean; } config.parameters[key] = value !== undefined ? value : true; } } return config; }

Например, для такого названия:

Weiteren Gemüse:; multiple max=3

Функция вернет следующий результат:

{ name: "Weiteren Gemüse:", parameters: { multiple: true, max: 3, } }

Остается дело за малым — дополнить функционал списка и связать его с этими параметрами.

В коде модификации есть две основные части:

Код, который конвертирует выпадающий список в чекбоксы и синхронизирует опцию товара при снятии/добавлении галочки
Инициализация и запуск кода для конвертации опций в список

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

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

В этом случае верстка останется практически идентичной, однако точка входа для запуска кода находится в совершенно разных местах.

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

В результате при открытии любой страницы на сайте выполняется следующий код:

// Реализация утилиты для ожидания элементов на странице: waitForElement ... // Реализация initializeDropdowns ... // Инициализация выпадающих списков при клике на товар $(document).on('click', async function (e) { let prodElem = e.target.closest('a[href*="/tproduct/"]'); if (prodElem != null) { await initializeDropdowns(); }; }); // Инициализация выпадающих списков при загрузке страницы setTimeout(async () => { const snippet = await waitForElement('.t-store__product-snippet', 3000) if (!snippet) return; await initializeDropdowns(); }, 250);

При открытии страницы происходит попытка найти карточку товара. Вместе с этим добавляется обработчик события открытия всплывающего окна с товаром. В обоих случаях вызывается функция, которая инициализирует всплывающие списки в карточке товара — initializeDropdowns. Это переработанная функция инициализации списка из чекбоксов, взятая из примера mo-ti.ru.

Также необходимо, чтобы:

1. при выборе опций изменялась стоимость товара:

Стоимость товара меняется при выборе каждого варианта опции

2. выбранные варианты отображались на странице оформления заказа — в корзине.

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

Информация о заказе поступает в виде заявки в Tilda и при необходимости далее в CRM систему клиента.

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

Все варианты суммируются и влияют на конечную стоимость товара. Эта информация отображается на странице оформления заказа и в заявке, которая приходит в Tilda и CRM систему клиента.

Результат модификации до/после

Если вам понравилась статья — поставьте лайк 🔥 или напишите комментарий. Так я пойму, что подобные посты с кейсами интересны и буду писать больше таких статьей.

Если вам нужна разработка уникальной модификации или интеграции Tilda с CRM или сторонним сервисом по API: Telegram-ботом, искуственным интеллектом / ChatGPT или даже маркетплейсом — примеры моих работ и контакты доступны по ссылке: codly.cc

codly.cc

Codly — интеграция Tilda с любыми сервисами под ключ

Кроме того, в своем блоге «Код без тайн» я периодически пишу о веб-разработке, информатике и других сферах, которые меня вдохновляют (искусственный интеллект, дизайн и многое другое).

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

Содержание

1. Постановка задачи

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

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

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

5. Отображение вариантов при оформлении заказа

6. Конечный результат