Создание и редактирование виджета

Виджет — это настроенная версия карты Mapfolio, которую можно разместить на сайте.

Для каждого виджета отдельно выбираются:

• внутреннее название;
• способ установки;
• API-ключ Яндекс Карт;
• размеры и поведение;
• внешний вид;
• код для установки.

Созданный виджет можно в любое время открыть и отредактировать.

Перед началом рекомендуется:

1. Создать хотя бы одну точку.
2. Указать её адрес и положение на карте.
3. Добавить описание и фотографии.
4. Опубликовать точку.
5. Настроить основные поля и фильтры.
6. Добавить API-ключ Яндекс Карт в Mapfolio.

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

1. Войдите в личный кабинет Mapfolio.
2. Откройте раздел «Виджеты».
3. Найдите карточку с большим знаком «+».
4. Нажмите на неё.
5. Откроется редактор нового виджета.

Настройки расположены сверху вниз. Заполняйте их по порядку.

В блоке «1. Способ установки» выберите доступный тип:

«Встроенный блок»

Этот тип размещает карту внутри выбранного места страницы.

Вариант «Pop-up» может отображаться рядом с пометкой «В разработке». Пока такой вариант выбрать нельзя.

Ниже находится поле:

«Название виджета (видно только в админ-панели виджетов)».

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

Например:

• «Карта магазинов на главной»;
• «Карта объектов — example.ru»;
• «Виджет для страницы контактов».

Название обязательно для заполнения и может содержать до 255 символов.

После выбора типа и ввода названия нажмите «Подтвердить выбор».

Откроются остальные разделы редактора.

В блоке «2. API карты» выберите API-ключ Яндекс Карт.

1. Нажмите на поле выбора.
2. Найдите сохранённый ключ.
3. Выберите «Яндекс карты #1».

Если ключ ещё не подключён, нажмите «Добавить новое API». Mapfolio откроет раздел «Настройки» → «API ключи».

После добавления ключа вернитесь к созданию виджета и выберите его в списке.

В блоке «3. Параметры» настраиваются размеры и поведение виджета.

Параметры могут определять:

• отображение виджета на компьютере;
• отображение на телефоне;
• размеры блока;
• расположение карты и списка;
• начальное состояние элементов;
• поведение при взаимодействии с картой.

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

В блоке «4. Дизайн» настраивается внешний вид карты и карточек.

Здесь можно:

• выбрать готовую цветовую схему;
• настроить собственные цвета;
• изменить оформление маркеров;
• выбрать отображаемые элементы;
• использовать сохранённый дизайн.

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

Блок «5. Предпросмотр» показывает, как виджет будет выглядеть для посетителей.

Проверьте:

1. Загружается ли Яндекс Карта.
2. Видны ли опубликованные точки.
3. Открываются ли карточки.
4. Работают ли поиск и фильтры.
5. Помещаются ли названия и адреса.
6. Подходят ли выбранные цвета.
7. Удобно ли пользоваться списком.
8. Корректно ли отображаются фотографии.

После заполнения настроек нажмите кнопку «Сохранить» в нижней части редактора.

При первом сохранении Mapfolio:

• создаст виджет;
• назначит ему уникальный идентификатор;
• сделает его активным;
• сохранит API-ключ, параметры и дизайн;
• сформирует код для установки.

После успешного сохранения появится сообщение:

«Виджет создан».

После первого сохранения откройте блок «6. Код для установки».

В нём появится готовый код, содержащий уникальный идентификатор вашего виджета.

1. Нажмите кнопку копирования рядом с кодом.
2. Откройте редактор своего сайта.
3. Добавьте код в место, где должна появиться карта.
4. Опубликуйте изменения сайта.
5. Откройте страницу и проверьте результат.

1. Откройте раздел «Виджеты».
2. Найдите нужный виджет по названию.
3. Нажмите в любое место его карточки.
4. Откроется редактор с сохранёнными настройками.

У существующего виджета тип уже выбран и заблокирован. Остальные доступные настройки можно изменять.

В существующем виджете можно изменить:

• внутреннее название;
• выбранный API-ключ;
• параметры отображения;
• настройки для компьютеров и телефонов;
• цветовую схему;
• оформление маркеров;
• другие доступные элементы дизайна.

Тип существующего виджета изменить нельзя.

1. Измените необходимые настройки.
2. Проверьте результат в предварительном просмотре.
3. Прокрутите страницу вниз.
4. Нажмите «Сохранить».
5. Дождитесь сообщения:

«Изменения сохранены».

После этого обновите страницу сайта с установленным виджетом.

Сохранённые изменения применяются к установленному виджету.

Если вы не видите новый результат:

1. Убедитесь, что нажали «Сохранить».
2. Обновите страницу сайта.
3. Нажмите Ctrl + F5 для полного обновления.
4. Проверьте, что открыт нужный виджет.
5. Убедитесь, что виджет включён.

В нижней части редактора находится кнопка «Отмена».

Если настройки были изменены, Mapfolio покажет окно:

«Выйти из виджета? Несохраненные изменения будут потеряны».

В окне доступны две кнопки:

• «Выйти» — закрыть редактор без сохранения;
• «Остаться» — вернуться к настройкам.

В верхней части редактора находится кнопка «Вернуться назад». Она возвращает к общему списку виджетов.

Если есть несохранённые изменения, Mapfolio предупредит об их потере.

Перед возвращением в список нажмите «Сохранить», если хотите оставить внесённые изменения.

Отключённый виджет можно открыть и редактировать так же, как активный.

Вы можете:

• изменить название;
• выбрать другой API-ключ;
• изменить параметры;
• настроить дизайн;
• сохранить изменения;
• проверить предварительный просмотр.

Но на сайте он не начнёт работать, пока вы не нажмёте «Включить».

Редактор виджета изменяет способ показа данных, но не редактирует сами точки.

Например:

• изменение цвета меняет внешний вид виджета;
• изменение размера меняет размер карты;
• смена API-ключа меняет ключ загрузки Яндекс Карты;
• изменение точки выполняется отдельно в разделе «Главная».

Если нужно изменить адрес, название, фотографию или описание объекта, откройте саму точку.

Перед установкой убедитесь, что:

• выбран «Встроенный блок»;
• указано понятное название;
• выбор типа подтверждён;
• выбран API-ключ;
• настроены параметры;
• выбран дизайн;
• предварительный просмотр работает;
• видны опубликованные точки;
• виджет сохранён;
• появился код для установки.

После изменения существующего виджета убедитесь, что:

• открыт правильный виджет;
• изменения видны в предпросмотре;
• нажата кнопка «Сохранить»;
• появилось сообщение об успешном сохранении;
• виджет включён;
• страница сайта обновлена;
• повторная установка кода не выполнялась без необходимости.