Пожелание: динамические поп-апы в CMS
Пожелание|Идет голосование за этот запрос
В настоящее время невозможно сделать поп-апы динамическими, подключив их к коллекциям CMS. Однако вы можете подключить прикрепленные элементы всплывающего окна к контенту коллекции CMS, чтобы сделать элементы динамическими (например, текст, изображения, кнопки).
Мы постоянно работаем над улучшением наших продуктов, поэтому ваши отзывы очень важны для нас.
Альтернативное решение
С помощью Velo можно создать поп-ап, который открывается со страницы динамического элемента и отображает тот же элемент, что и на исходной странице.
Например, если у вас есть динамические страницы элементов, на которых отображаются предлагаемые услуги, вы можете связать кнопку на странице с поп-апом. В поп-апе вы можете подключить такие элементы, как текст, изображения и кнопки к набору данных, который подключается к той же коллекции. В результате, когда посетители нажимают кнопку на динамической странице элемента, открывается поп-ап с дополнительной информацией о том же элементе, отображаемом на странице.
Прежде чем начать:
Убедитесь, что на вашем сайте есть:
- Поп-ап.
- Динамическая страница элемента с кнопкой, которая ведет на поп-ап
- Поля коллекции для контента, который будет отображаться во всплывающих элементах.
Редактор Wix
Редактор Studio
- Перейдите в редактор.
- Перейдите на соответствующую динамическую страницу элемента.
- Включите режим Velo для разработчиков:
- Нажмите Разработчику в верхней части редактора.
- Нажмите Активировать.
- Скопируйте сниппет кода ниже и вставьте его в верхнюю часть кода страницы:
1import wixWindowFrontend from 'wix-window-frontend';
- Скопируйте сниппет кода ниже и вставьте его после: $w.onReady(function () {
1$w('#openLightbox').onClick(async () => { const item = await $w('#dynamicDataset').getCurrentItem(); const id = item._id; wixWindowFrontend.openLightbox("Dynamic Lightbox", id); })
2
- Во вставленном примере кода замените идентификаторы, перечисленные ниже, на идентификаторы, используемые на вашем сайте:
- OpenLightbox: замените на идентификатор кнопки, которая открывает поп-ап.
- dynamic Dataset: замените на идентификатор набора данных динамической страницы элемента.
- Dynamic Lightbox: замените названием поп-апа.
- Перейдите к поп-апу в редакторе.
- Добавьте набор данных и подключите его к той же коллекции, к которой подключена динамическая страница элемента:
- Нажмите на CMS
в левой части редактора. - Нажмите Элементы контента.
- Нажмите Набор данных.
- Нажмите на раскрывающийся список Выберите коллекцию и выберите ту же коллекцию, которая подключается к динамической странице элементов.
- Нажмите Создать.
- Нажмите на CMS
- Нажмите на поле Кол-во загруженных элементов в настройках набора данных и введите число 1.
- Подключите элементы в поп-апе (например, текст, изображения, кнопки) в набор данных:
- Нажмите на соответствующий элемент в поп-апе.
- Нажмите на значок Подключить к CMS
. - Нажмите на раскрывающиеся списки в разделе Подключения и выберите соответствующие поля коллекции или действия с набором данных.
- Повторите эти шаги для каждого элемента поп-апа, который хотите подключить.
- Скопируйте сниппет кода ниже и вставьте его в верхнюю часть кода поп-апа:
1import wixWindowFrontend from 'wix-window-frontend'; import wixData from 'wix-data';
- Скопируйте сниппет кода ниже и вставьте его после: $w.onReady(function () {
1const getData = async () => { const id = await wixWindowFrontend.lightbox.getContext(); $w('#dataset1').setFilter(wixData.filter().eq('_id', id)); } getData();
- Во вставленном примере кода замените dataset1 на идентификатор набора данных поп-апа.
- Перейдите в режим предпросмотра, чтобы протестировать функциональность.
- Когда все будет готово, опубликуйте сайт.