Редактор Studio Two: об источниках данных

Используйте источники данных, чтобы показывать актуальный контент в любом месте сайта. Источником данных может быть коллекция CMS, приложение Wix (например, Wix Блог) или пользовательский код. Вы сами выбираете, какой контент будет отображаться в каждом элементе, например заголовок поста или изображение товара.

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

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

• Страница: для большинства элементов.
• Сам элемент: для элементов, которые могут содержать источник, например репитеров.
• Ключевая секция: для элементов в ключевой секции, например в верхней части сайта.

Во время работы над дизайном подключенные элементы показывают реальный контент из источника. Если подходящего элемента нет, вместо него отображаются данные-заполнители, например «Заголовок поста», чтобы вы могли настроить дизайн элемента.

1. Откройте редактор.
2. Выберите элемент, который хотите подключить.
3. Нажмите значок Открыть Инспектор в правом верхнем углу редактора.
4. Если вкладка еще не открыта, нажмите Настройки.
5. Нажмите значок Подключить к данным рядом с нужным свойством, например Текст, Ссылка или Alt-текст.
6. Нажмите Выбрать источник и выберите источник нужного контента.
7. Нажмите Выбрать поле и выберите поле, которое должен показывать элемент.
8. При необходимости заполните параметры, которые появятся под полем, например Параметр ссылки на страницу.
9. Нажмите Применить.

Выберите источник, в котором хранится контент для показа. В списке Подключить источник доступны следующие типы источников:

• Коллекция CMS: любая коллекция, созданная в CMS (системе управления контентом).
• Приложения Wix: такие приложения, как Wix Stores и Wix Блог, добавляют собственные источники под названием приложения. Например, Wix Блог добавляет источники Пост (один пост), Посты (список постов) и Похожие посты.
• Пользовательский код: источник, созданный с помощью кода. Опишите, что вам нужно, и создайте его с помощью ИИ или напишите код самостоятельно.

В этом же списке можно создать новый источник или настроить его с помощью ИИ. Добавьте на страницу или в секцию несколько источников, если нужен контент из разных мест. Например, на одной странице можно показать портфолио из коллекции CMS и последние посты блога.

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

Проверить, какие источники может использовать контейнер, можно на вкладке Настройки панели «Инспектор»:

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

Источник, подключенный к странице, доступен всем ее секциям и контейнерам. Хедер и футер не являются частью страницы, поэтому ее источники им недоступны. Подключите источник непосредственно к ним.

Источники контейнера нельзя использовать для элементов за его пределами. Например, чтобы подключить кнопку Показать еще к списку репитера, подключите источник к секции, содержащей репитер и кнопку. Затем подключите репитер и кнопку к источнику секции.

Розовые метки на холсте показывают, что подключено к данным. На метке контейнера с подключенным источником отображается название источника. Статические элементы отмечены синими метками.

1. Перейдите в редактор.

2. Выберите нужную страницу, секцию или контейнер.

3. Нажмите значок Открыть Инспектор в правом верхнем углу редактора.

4. Если вкладка еще не открыта, нажмите Настройки.

5. Нажмите + Подключить источник в разделе Источники данных.

6. Выберите источник:

   • Коллекция CMS: выберите одну из своих коллекций. Если коллекций пока нет, нажмите Создать.

   • Пользовательский код: выберите один из источников пользовательского кода. Если таких источников пока нет, нажмите Создать.

   • Приложения Wix: выберите источник из списка приложения, например Посты в разделе Wix Блог.

Можно изменить настройки источника, перейти к его контенту или удалить источник из контейнера. Источники, подключенные к контейнеру, находятся на вкладке Настройки Инспектора в разделе Подключенные источники.

1. Перейдите в редактор.
2. Выберите страницу, секцию или контейнер, к которым подключен источник.
3. Нажмите значок Открыть Инспектор в правом верхнем углу редактора.
4. Если вкладка еще не открыта, нажмите Настройки.
5. Нажмите значок Другие действия рядом с источником в разделе Подключенные источники.
6. Выберите нужное действие:
   • Настройки данных: измените настройки источника, например фильтры, сортировку и количество элементов, отображаемых одновременно. Эти настройки применяются ко всем элементам, подключенным к источнику. Этот параметр доступен только для источников с настройками.
   • Управление данными: перейдите к управлению контентом источника: в коллекцию CMS, панель управления приложения, например к постам блога, или к коду источника.
   • Удалить: отключите источник от этого контейнера. Подключенные элементы останутся на странице, но перестанут отображать контент источника.

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

Подробнее о добавлении и настройке репитеров.

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

Вы также можете добавить страницу с репитером, в котором перечислены все элементы коллекции. Подробнее о добавлении и настройке страниц элементов.

Добавьте элементы из приложения Wix, чтобы сразу использовать данные из него. Их можно найти на панели Добавить элементы в разделе с названием приложения, например Wix Bookings. Например, лента Wix Блога и список постов показывают посты сайта сразу после добавления. Список услуг Wix Bookings показывает услуги. Элементы на новой странице коллекции также уже подключены. То же относится к элементам внутри репитера после его подключения.

Дизайн и макет этих элементов можно настроить на панели действий или прямо на холсте.

Добавьте стандартные элементы, например текст и изображения, и подключите их самостоятельно, если вам нужен полный контроль над расположением контента. Подробнее о настройке страницы товара Wix Stores в Studio Two.

Задайте условие, чтобы скрывать элемент в зависимости от значения поля «истина/ложь» в контенте. В настройке Скрыть, если выберите Истина или Ложь, чтобы указать, когда скрывать элемент. Например, можно скрывать метку «Продано» на каждой картине, которая еще продается. Параметр Условная видимость находится в разделе Дополнительно на вкладке Настройки Инспектора.

• Доступные поля: только поля «истина/ложь», включая поля, в которых вычисляется значение «истина» или «ложь».
• Где нельзя добавить условие: на саму страницу или ключевую секцию, например хедер или футер. При этом условия можно добавлять к элементам внутри них.
• Скрытые элементы на холсте: если редактор определяет, что элемент будет скрыт, например на странице коллекции или в репитере, на нем появляется штриховка. Она исчезает, когда вы выбираете элемент.

Используйте обработчики событий, чтобы запускать функцию из одного из источников, когда посетители взаимодействуют с элементом. Можно выбрать При нажатии, При двойном нажатии, При наведении курсора, При отведении курсора, При получении фокуса или При потере фокуса.

1. Перейдите в редактор.
2. Выберите элемент.
3. Нажмите значок Открыть Инспектор в правом верхнем углу редактора.
4. Если вкладка еще не открыта, нажмите Настройки.
5. Прокрутите вниз до раздела Обработчики событий в меню Дополнительно.
6. Нажмите Выбрать функцию под нужным событием, например При нажатии.
7. Нажмите Выбрать источник и выберите источник данных.
8. Нажмите Выбрать поле и выберите функцию, которую хотите выполнить.
9. При необходимости заполните параметры, которые появятся под функцией.
10. Нажмите Применить.

Нажмите на вопрос ниже, чтобы подробнее узнать об источниках данных в редакторе Studio Two.