Переключатель контента в зеро блоке через селект стандартной формы
Модификатор добавляет переключение контента в зеро блоке через селект в стандартной форме зеро блока
jQuery
Для корректной работы блоков подключите библиотеку jQuery:
Код скопирован!
Скопировать код
Шаг 1
Создаем блок T123 и копируем в него код
Инструкция с подключением кода
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
  1. Изменяем текст
  2. Добавляем ссылки на изображения
Шаг 2
Настраиваем код
Шаг 3
Создаем Zero Block и открываем редактор
  1. Добавляем 2 первоначальных изображения
  2. Задаем им классы pic1 и pic2
  3. Добавляем первый текстовый элемент
  4. Задаем ему класс n-size-el
  5. Добавляем второй текстовый элемент
  6. Задаем ему класс razmer
  7. Добавляем третий текстовый элемент
  8. Задаем ему класс info
  9. Добавляем форму
  10. В форме добавляем Выпадающий список/Dropdown
  11. Задаем ему variable name: n-size
<script>
// Создаем объединенный массив данных
var data = [
{
size: '39',
info: 'Здесь меняется описание 1',
pics: [
'https://static.tildacdn.com/tild3366-3336-4136-b562-313762633664/pexels-alleksana-427.jpg',
'https://static.tildacdn.com/tild3534-3361-4533-b336-663534353764/pexels-alleksana-427.jpg',
]
},
{
size: '40',
info: 'Здесь меняется описание 2',
pics: [
'https://static.tildacdn.com/tild6136-3335-4764-a439-666561323830/pexels-alleksana-427.jpg',
'https://static.tildacdn.com/tild3564-3332-4533-b536-663431383163/pexels-alleksana-427.jpg',
]
},
{
size: '41',
info: 'Здесь меняется описание 3',
pics: [
'https://static.tildacdn.com/tild6535-3635-4730-a265-396564373966/pexels-alleksana-427.jpg',
'https://static.tildacdn.com/tild3564-3138-4239-b266-613765643761/pexels-alleksana-427.jpg',
]
}
];

$(function(){
var sizen_n = $('.n-size-el .tn-atom');
var razmer = $('.razmer .tn-atom');
var info_el = $('.info .tn-atom');

var pic1_el = $('.pic1 .tn-atom');
var pic2_el = $('.pic2 .tn-atom');
var pic3_el = $('.pic3 .tn-atom');

// Устанавливаем значения по умолчанию для первого элемента
updateData(0);

$(document).on('change', 'select[name="n-size"]', function(){
var num = $('select[name="n-size"] option:selected').index();
updateData(num);
});

// Функция для обновления данных на странице
function updateData(index) {
sizen_n.text(data[index].size);
razmer.text("Размер " + data[index].size);
info_el.text(data[index].info);

// Обновляем изображения
pic1_el.css('background-image', 'url('+ data[index].pics[0] + ')');
pic2_el.css('background-image', 'url('+ data[index].pics[1] + ')');
pic3_el.css('background-image', 'url('+ data[index].pics[2] + ')');
}
});

</script>
Шаблон страницы
Код скопирован!
67400439
Нажми, чтобы скопировать номер
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!
Вам также может быть интересно:
Pro подписка
Pro подписка
Модификации
Модификации
Модификации
Pro подписка
Подпишитесь на наши обновления в телеграм