Выпадающий список – это элемент пользовательского интерфейса, который позволяет сократить количество отображаемой информации до клика по элементу. В Wix этот функционал реализуется с помощью компонентов из редактора Wix или через Velo (бывший Corvid) – встроенной среды разработки для добавления кастомной логики.
Если вы используете стандартный редактор Wix, добавление выпадающего списка начинается с элемента «Меню и списки». Выберите «Выпадающий список» в разделе «Формы», перетащите его на страницу и настройте параметры: список опций, значение по умолчанию, отображаемое имя и связанные действия при выборе.
Для более гибкого поведения, например – автозаполнение, фильтрация или связь с базой данных, необходим Velo. В редакторе включите Velo через меню Dev Mode, добавьте элемент Dropdown с панели элементов и свяжите его с коллекцией данных через Dataset или с помощью кода на JavaScript.
Пример кода для заполнения списка из базы данных:
import wixData from 'wix-data';
$w.onReady(function () {
wixData.query("Категории")
.find()
.then((results) => {
const options = results.items.map(item => {
return { label: item.название, value: item._id };
});
$w("#dropdown1").options = options;
});
});Этот подход особенно полезен, если данные должны обновляться динамически, например – список городов, категорий товаров или пользователей. Использование Velo позволяет также обрабатывать выбор значения и реагировать на него: фильтровать повторители, отображать скрытые секции, отправлять данные в CRM или в базы данных Wix.
Добавление пользовательского элемента через редактор Wix
Откройте редактор Wix и перейдите в раздел «Элементы» на боковой панели. Пролистайте вниз до блока «Встраиваемые элементы» и выберите пункт «HTML-фрейм».
Перетащите фрейм на нужную область страницы. В появившемся окне нажмите «Вставить код» и добавьте HTML-разметку выпадающего списка, например:
<select id="customDropdown">
<option value="option1">Первый пункт</option>
<option value="option2">Второй пункт</option>
<option value="option3">Третий пункт</option>
</select>
Чтобы добавить логику, подключите JavaScript через тот же HTML-фрейм. Ниже кода выпадающего списка вставьте:
<script>
document.getElementById("customDropdown").addEventListener("change", function() {
console.log("Выбрано:", this.value);
});
</script>
Проверьте отображение и работоспособность через режим предпросмотра. Обновите сайт для публикации изменений. Убедитесь, что размеры HTML-фрейма соответствуют содержимому, иначе элементы могут отображаться некорректно.
Настройка базового выпадающего списка с помощью элементов формы
Для создания выпадающего списка в редакторе Wix откройте вкладку Элементы, выберите раздел Интерактивные и перетащите на страницу компонент Выпадающий список (Dropdown).
Кликните на элемент и выберите Настройки. В поле Параметры добавьте нужные варианты – каждый на отдельной строке. Эти значения будут отображаться пользователю при открытии списка.
В разделе Значения и метки укажите внутренние значения (value), если планируется отправка данных через форму. Метки (label) – это текст, который видит пользователь. Они могут различаться, что особенно полезно для обработки на стороне сервера.
Чтобы связать список с формой, убедитесь, что он находится внутри контейнера Форма. Перейдите в свойства поля и задайте Имя поля – оно потребуется для получения значения при отправке формы.
Включите опцию Обязательное поле, если пользователь должен выбрать один из пунктов перед отправкой. Без этого списка данные могут быть отправлены с пустым значением.
Для проверки работы формы нажмите Просмотр и заполните список, отправив форму на тестовый email или подключённую коллекцию данных. Убедитесь, что передаются правильные значения, особенно если используются нестандартные метки и значения.
Привязка значений выпадающего списка к базе данных
Чтобы связать выпадающий список с базой данных в Wix, необходимо использовать динамический контент через Wix Data и редактор Velo. Начните с создания коллекции в разделе «Контент-менеджер», где будут храниться значения списка. Например, создайте коллекцию «Категории» с полем «название».
Добавьте на страницу элемент Dropdown. В панели свойств выберите опцию «Подключить к данным». Привяжите его к нужному источнику данных, выбрав созданную коллекцию. В качестве поля отображения укажите поле, содержащее нужные значения (например, «название»).
Если необходимо отобразить значения только при определённом условии, добавьте фильтр в источнике данных. Например, можно отфильтровать только активные элементы, установив фильтрацию по полю «активен» с условием «true».
Для использования выбранного значения в логике сайта (например, для фильтрации повторителя), добавьте обработчик события `onChange` через панель кода Velo. Внутри функции получите значение с помощью `event.target.value` и используйте его для вызова фильтрации через `setFilter()` на подключённом `DataSet`.
Все изменения, сделанные в базе данных, автоматически обновляют содержимое выпадающего списка без необходимости ручного редактирования интерфейса.
Настройка отображения по условию выбора
Для отображения элементов страницы в зависимости от выбранного значения выпадающего списка, используется редактор Velo by Wix. Ниже – пошаговая настройка:
- Активируйте Velo: в редакторе Wix включите «Разработчик» в верхнем меню.
- Добавьте выпадающий список (Dropdown) на страницу. Присвойте ему ID, например,
#dropdown1. - Разместите элементы, которые должны появляться или скрываться в зависимости от выбора. Убедитесь, что у каждого установлен уникальный ID.
Пример: у вас три блока с ID #box1, #box2, #box3. Отображение каждого зависит от значения в списке.
Добавьте следующий код в редактор Velo:
$w.onReady(function () {
$w("#dropdown1").onChange(() => {
const value = $w("#dropdown1").value;
$w("#box1").hide();
$w("#box2").hide();
$w("#box3").hide();
if (value === "Опция 1") {
$w("#box1").show();
} else if (value === "Опция 2") {
$w("#box2").show();
} else if (value === "Опция 3") {
$w("#box3").show();
}
});
});
- Значения
"Опция 1","Опция 2","Опция 3"должны совпадать с value опций в списке, а не с текстом. - Скрытые по умолчанию элементы нужно установить как невидимые в панели свойств (Unchecked «Показать при загрузке»).
- Для плавной анимации используйте методы
show("fade")иhide("fade").
Этот подход позволяет динамически управлять контентом, не перегружая страницу и не требуя переходов между страницами.
Создание динамического списка с помощью Wix Velo
Для создания выпадающего списка, данные которого загружаются из коллекции базы данных Wix, необходимо использовать функциональность Velo и элементы интерфейса редактора.
Сначала добавьте на страницу элемент Dropdown из панели компонентов. Назовите его #myDropdown через свойства элемента, чтобы использовать в коде.
Откройте вкладку Velo и включите режим разработчика. Перейдите в раздел “Базы данных”, создайте новую коллекцию, например, “Categories”. Добавьте в неё поле типа Текст, например, “title”, и заполните строки значениями.
На вкладке “Код” вставьте следующий скрипт:
import wixData from 'wix-data';
$w.onReady(function () {
wixData.query("Categories")
.ascending("title")
.find()
.then((results) => {
const options = results.items.map(item => {
return { label: item.title, value: item._id };
});
$w("#myDropdown").options = options;
})
.catch((err) => {
console.error('Ошибка загрузки данных:', err);
});
});
Значения будут автоматически подгружаться из коллекции каждый раз при загрузке страницы. Для использования выбранного значения можно обратиться к $w("#myDropdown").value.
Чтобы список обновлялся при добавлении новых элементов в коллекцию, убедитесь, что разрешения коллекции позволяют чтение данных посетителями. Настройте это в параметрах доступа коллекции.
Обработка событий выбора в выпадающем списке
Для отслеживания выбора пользователя в выпадающем списке на Wix используется событие onChange. Это событие срабатывает при каждом изменении значения списка. Подключение логики обработки осуществляется через редактор Wix Code (Velo).
Пример подключения обработчика:
import wixWindow from 'wix-window';
$w.onReady(function () {
$w('#dropdown1').onChange((event) => {
const selectedValue = event.target.value;
wixWindow.openLightbox("Детали", { выбор: selectedValue });
});
});
Значение элемента можно получить через $w('#dropdown1').value. Оно представляет собой строку, соответствующую одному из value в параметрах списка. Это позволяет использовать условные конструкции для динамического отображения контента или изменения состояния других элементов страницы.
Если необходимо изменить поведение в зависимости от конкретного выбора, используйте конструкцию switch или объект сопоставлений:
const действия = {
'вариант1': () => $w('#текст1').show(),
'вариант2': () => $w('#контейнер2').collapse()
};
$w('#dropdown1').onChange((event) => {
const выбор = event.target.value;
if (действия[выбор]) {
действия[выбор]();
}
});
Рекомендуется проверять, не является ли значение пустым, особенно если предусмотрен дефолтный невыбранный пункт. Для этого добавьте проверку:
if (выбор && действия[выбор]) {
действия[выбор]();
}
Все обработчики следует размещать внутри $w.onReady(), чтобы гарантировать доступность элементов DOM. Несоблюдение этого требования может привести к ошибкам выполнения.
Проверка и тестирование работы выпадающего списка на сайте
После добавления выпадающего списка в редактор Wix необходимо убедиться в его корректной работе на всех этапах взаимодействия. Тестирование проводится в редакторе и в режиме предпросмотра, а затем – на опубликованной версии сайта.
- Откройте режим предпросмотра в редакторе Wix и взаимодействуйте со списком:
- Проверьте, появляется ли список при нажатии на область выбора.
- Выберите каждый пункт и проверьте, отображается ли выбранное значение корректно.
- Убедитесь, что список закрывается после выбора пункта или повторного нажатия.
- Перейдите в режим публикации сайта и выполните те же действия на разных устройствах:
- Проверьте адаптивность на смартфоне и планшете: элементы должны быть нажимаемыми, не выходить за границы экрана.
- Откройте сайт в разных браузерах: Chrome, Firefox, Safari, Edge. Список должен работать идентично.
- Если к выпадающему списку привязана логика (например, фильтрация контента), проверьте:
- Корректность работы фильтра при выборе каждого значения.
- Отсутствие задержек при обновлении контента.
- Работу в сочетании с другими элементами, например, кнопками или формами.
- Проверьте доступность:
- Можно ли управлять списком с клавиатуры (Tab, Enter, стрелки)?
- Присутствуют ли подписи и aria-атрибуты для экранных читалок?
- Заключительный этап – проверка консоли разработчика:
- Откройте DevTools (F12) и убедитесь в отсутствии ошибок при взаимодействии со списком.
- Проверьте, что при выборе значений не появляются предупреждения или сбои JavaScript.
Вопрос-ответ:
Как добавить выпадающий список в редакторе Wix?
Откройте редактор Wix и нажмите на кнопку «Добавить» (значок «+» на панели слева). Перейдите в раздел «Элементы пользовательского интерфейса» и выберите пункт «Выпадающий список» или «Dropdown». Перетащите его на нужное место на странице. После этого вы сможете настроить его внешний вид, содержимое и поведение.
Можно ли связать выпадающий список с базой данных?
Да, в редакторе Wix с включенной функцией Velo вы можете привязать выпадающий список к коллекции данных. Для этого подключите элемент к источнику данных через панель «Настройка данных» (Data Binding), выберите нужную коллекцию и укажите поле, данные из которого будут отображаться в списке. Это удобно для автоматического обновления содержимого списка при изменении данных в базе.
Как сделать так, чтобы при выборе пункта из списка выполнялось действие?
Для реализации такой функции потребуется включить Velo — среду для добавления пользовательского кода. После этого выберите элемент выпадающего списка, нажмите на него правой кнопкой мыши и выберите «Событие» → «onChange». В открывшемся редакторе кода можно прописать действия, которые будут выполняться при выборе одного из значений, например, переход на другую страницу или фильтрация контента на текущей.
Можно ли изменить стиль выпадающего списка?
Да, вы можете изменить шрифт, цвет текста, фон, рамки и другие параметры через панель «Дизайн». Выберите список, нажмите на иконку кисточки, затем выберите подходящий шаблон или настройте параметры вручную. Также можно применять собственные CSS-стили, если используется Velo.
Сколько пунктов можно добавить в выпадающий список?
Ограничений по количеству пунктов в выпадающем списке нет, однако для удобства пользователей лучше не перегружать его слишком большим числом значений. Если данных много, можно использовать динамическую подгрузку из коллекции или разбить их на группы.
Загрузка...
