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

#кейс #модификация #тильда #tilda #javascript #веб #web #frontend

Слайдеры с фото и описание меняются в зависимости от выбранной комплектации

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

Постановка задачи
Замена активного слайдера с помощью кода
Ассоциирование фото и описания с вариантом товара
Конечный результат

Дано

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

Проблема

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

Решение

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

Чтобы изменять фото и описания, логично, что их надо где-то определить. Поскольку в административной панели Tilda это сделать невозможно, воспользуемся небольшой хитростью: добавим необходимые нам фото и описание в блок GL21 "Галерея с текстовой информацией". Как будет видно дальше — это также поможет при повторной инициализации слайдера, поскольку структура HTML-кода для слайдера у блоков ST200 и GL21 идентичная.

Создадим два блока GL21 с разными фото и описанием:

Блок GL21 с первым слайдером и тексто описания — #rec823142810 в коде<br />

Блок GL21 со вторым слайдером и текстом описания — #rec823163609 в коде<br />

Далее напишем небольшой скрипт, который бы перемещал слайдер из нужного нам блока GL21 в блок ST200. Для простоты, сделаем переключение по нажатию на кнопки. Код представлен ниже:

$(document).ready(() => { const block = $('#rec823147906'); const sliders = ['#rec823142810', '#rec823163609'].map(id => $(id).find('.t-slds')); // Установка слайдера: копирование, очистка атрибутов и инициализация const setSlider = (index) => { const slider = sliders[index].clone() .find('.t-slds__items-wrapper') .removeAttr('data-slider-initialized data-swiper-initialized').end(); block.find('.t744__col').first().empty().append(slider); t_sldsInit('823147906'); t_lazyload_update?.(); // Инициализация Tilda }; // Привязка кнопок к переключению слайдеров $('#rec823164226 .t142A__btn').on('click', function () { setSlider($(this).index()); }); setSlider(0); // Установка начального слайдера });

Важно заметить, что недостаточно просто клонировать элемент слайдера и вставить его внутрь блока ST200. Необходимо также сделать его вновь интерактивным. Для этого надо выполнить код, который Tilda выполняет при загрузке страницы, а именно — функцию t_sldsInit. Я нашел эту функцию через отладчик Firefox. На самом деле, у Tilda множество функций открыты для выполнения в любой момент, что значительно облегчает разработку подобных модификаций. Про JavaScript API Tilda я уже упоминал ранее в одном из своих прошлых постов:

Алексей

Разработка

12.11.2024

Создание нестандартных модификаций с помощью JavaScript API Tilda

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

В результате получим интересующий нас функционал: при вызове функции setSlider будет склонирован элемент слайдера из блока GL21, "очищен" от атрибутов и дополнительных слайдов, после чего он будет вставлен вместо текущего слайдера в блоке ST200. Чтобы сделать его вновь интерактивным будет вызвана функция t_sldsInit JS API Tilda, которая инициализует необходимую логику для переключения слайдов.

Переключение слайдера внутри карточки товара ST200 по нажатию кнопки

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

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

Варианты комплектации и цвета, заданные в редакторе товара Tilda<br />

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

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

Структура названия блока GL21 выглядит следующим образом:

<опция1>: <значение1>, <значение2>; <опция2>: <значение3>

Например:

"комплектация: Задний привод 500Вт; цвет: серый"
"комплектация: Передний привод 750Вт; цвет: черный, серый"

/** * Нахождение блока GL21 для варианта товара * @param {Object} variant - Характеристики товара (ключ: значение) * @returns {Element} - Соответствующий блок */ const getVariantBlock = (variant) => { const blocks = document.querySelectorAll('.uc-product-info'); for (const block of blocks) { const text = block.querySelector('.js-product-name').innerText.toLowerCase(); let includesAllText = Object.keys(variant).every(key => { const chunk = text.split(';').find(item => item.includes(key.toLowerCase())); return chunk?.split(':')[1]?.split(',').some( value => value.includes(variant[key].toLowerCase()) ); }); if (includesAllText) return block; } };

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

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

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

Создадим блоки GL21 для каждого варианта:

<b>Вариант: </b>комплектация: <b>Задний привод 500Вт</b>; цвет: <b>серый</b>

<b>Вариант: </b>комплектация: <b>Задний привод 500Вт</b>; цвет: <b>черный</b>

и так далее для всех возможных комбинаций вариантов товара...

Чтобы все работало автоматически, при выборе вариантов товара добавляем обработчики события change на все селекты с вариантами:

// Ждем загрузки карточки товара и элементов с вариантами const block = await waitForElement('.uc-product-card'); await waitForChildren(block, '.js-product-edition-option'); const options = block.querySelectorAll('.js-product-edition-option'); /** * Отображает текущий вариант товара и обновляет слайдер */ const render = () => { const variant = Array.from(options).reduce((acc, option) => { const el = option.querySelector('.js-product-edition-option-variants'); acc[option.dataset.editionOptionId] = el.value; return acc; }, {}); const variantBlock = getVariantBlock(variant); if (variantBlock) { block.querySelector('[field="descr"]')?.innerHTML = variantBlock.querySelector('[field="descr"]')?.innerHTML || ''; updateSlider(variantBlock); // Обновляем слайдер } }; // Навешиваем обработчики на изменение вариантов options.forEach(option => { option.querySelector('.js-product-edition-option-variants') .addEventListener('change', render); }); render(); // Первоначальная отрисовка

Стоит отметить некоторые важные особенности реализации:

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

Для контент-менеджера такой подход максимально удобен:

Не надо запоминать или искать ID блоков;
Достаточно просто правильно назвать блок GL21 в соответствии с форматом;
Можно создавать общие наборы фотографий для нескольких вариантов товара.

Слайдеры с фото и описание меняются в зависимости от выбранной комплектации

Пример того, как работает данная модификация можно посмотреть на странице магазина Медведь Электро.

medved-electro.ru

Электровелосипеды Медведь Fold

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

При этом для пользователя весь процесс выглядит абсолютно естественно — будто это стандартный функционал Tilda. Модификация органично встраивается в существующий интерфейс и не требует никаких дополнительных действий от пользователя.

Для контент-менеджера решение также получилось максимально удобным. Не надо запоминать никакие технические детали или ID блоков — достаточно просто правильно назвать блок GL21, указав в его названии комплектацию и цвет.

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

Если вам нужна разработка уникальной модификации или интеграция Tilda со сторонним сервисом — мое портфолио и контакты доступны по ссылке: codly.cc

codly.cc

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

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

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

Содержание

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

2. Замена активного слайдера с помощью кода

3. Ассоциирование фото и описания с вариантом товара

Смена слайдера при выборе варианта

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