Как сделать конструктор (конфигуратор) вариантов товара в Зеро блоках на Тильде

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

Такая механика подходит для интернет-магазинов на Тильде: она помогает показать вариации товара без лишних экранов, удерживает внимание, повышает вовлечённость, CTR и время на странице.

Если вам нужен «конструктор» или «слайдер вариаций» на Тильде, используйте модификацию NLM079.

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

• Табы выбора типа дисков получают последовательные ссылки: #bullet1, #bullet2, #bullet3.
• Табы выбора цвета получают ссылки с шагом в три слайда: #bullet1, #bullet4, #bullet7.

Так мы задаём логику переключения между вариантами.

Проверяем, что блок собран корректно, затем адаптируем его под все разрешения экрана. После этого копируем блоки, меняем контент и активные табы. Чтобы пользователь ясно видел текущий выбор, делаем активные табы крупнее и добавляем галочку.

В итоге получаем 9 состояний конструктора:

• 3 блока красного цвета с тремя типами колёс,
• 3 блока оранжевого цвета с тремя типами колёс,
• 3 блока жёлтого цвета с тремя типами колёс.

Каждое состояние — уникальная комбинация цвета и типа колеса.

Теперь назначаем ссылки для табов оставшихся блоков. В уме делим блоки на три группы: красные, оранжевые и жёлтые. Присваиваем им порядковые номера:

• красные блоки — 1, 2, 3;
• оранжевые блоки — 4, 5, 6;
• жёлтые блок — 7, 8, 9.

Далее ссылки присваиваются по этой логике:

Для табов цвета:

• красный — ссылки #bullet1, #bullet2, #bullet3;
• оранжевый — #bullet4, #bullet5, #bullet6;
• жёлтый — #bullet7, #bullet8, #bullet9.

Для табов типа колеса:

для первого типа — ссылки #bullet1, #bullet4, #bullet7;
для второго типа — #bullet2, #bullet5, #bullet8;
для третьего типа — #bullet3, #bullet6, #bullet9.

Так создаётся полная матрица выбора: при нажатии на любой таб пользователь всегда попадает в нужный блок с нужной комбинацией параметров.

Используем модификацию NLM079.

• Указываем ID Зеро блоков через запятую.
• В этом примере кнопок нет, поэтому ссылки на кнопки игнорируем.
• В пункте с табами оставляем дефолтный #bullet.
• В настройке «Зацикливать переключение» выбираем «Не зацикливать».
• И отключаем пролистывание экрана вверх при переключении слайдера.

Дополните статью, заполнив форму ниже