Этот урок посвящен встраиванию Edit-in-Place на сайт с помощью технологии iDidItInPlace. Речь идет о кнопке «Редактировать», позволяющей изменять контент сайта непосредственно на странице: добавлять каталоги, подкаталоги, новости, изменять текст и т.д. Например, добавим слово «с» после «предложение»: нажимаем на блок, пишем «с», сохраняем – и изменения видны всем пользователям. Это удобно для внесения большинства изменений на готовом сайте (до 90-95% всех правок, включая добавление товаров). Рассмотрим внедрение этой технологии, её настройку без глубокого погружения в код. Ссылка на документацию будет предоставлена.
Что такое iDidItInPlace?
Документация Edit-in-Place описывает технологию редактирования на месте. Редактирование доступно не для всех элементов (например, слайдеры). Редактируемые объекты выделены жёлтым цветом и объединены рамкой. Возможность редактирования определяется кодом и специальными атрибутами. Эти атрибуты, например, yummi-элементы, могут вызывать ошибки валидации HTML, но это не влияет на отображение и скорость загрузки сайта.
Условия работы Edit-in-Place
Для работы Edit-in-Place необходимы:
- Авторизация: Пользователь должен быть авторизован и иметь права на использование Edit-in-Place. Администратор сайта имеет такой доступ.
- Шаблонизатор: Урок рассматривает работу с шаблонизатором Smarty; XSLT-шаблоны не рассматриваются.
Атрибуты пространства имён yummi
Атрибуты, позволяющие редактировать элементы:
yummiElementId
Создает область для редактирования (например, для картинки логотипа). Без этого атрибута поле редактирования не появится.
yummiObjectId
Аналогичен yummiElementId, но идентифицирует объект, а не элемент страницы. Функционал идентичен yummiElementId.
yummiFieldName
Указывает идентификатор свойства элемента или объекта (текст, картинка и т.д.). Работает только с yummiElementId или yummiObjectId. При их отсутствии, yummiFieldName наследуется от родительского объекта.
yummiModule и yummiMethod
Указывают модуль и метод, соответствующие редактируемой области. При наличии обоих атрибутов появляется возможность добавлять объекты или элементы, которые наследуют идентификаторы от родительского элемента. Пример: добавление пунктов в боковое меню.
yummiDelete
Удаляет объект или страницу. По умолчанию объекты попадают в корзину. В файле config.ini можно настроить скрытие объектов вместо удаления, добавив параметр system.delete_mode = hide. Работает со ссылками и абзацами.
yummiRegion, yummiRegionList, yummiRegionRow
yummiRegion используется для обозначения списков элементов. yummiRegionList позволяет управлять списком в целом (добавление, удаление, перемещение элементов), а yummiRegionRow – для отдельных элементов списка. Пример: перетаскивание пунктов в меню.
yummiButtonPosition
Указывает положение кнопки «Добавить»: topLeft, topRight, bottomLeft, bottomRight.
yummiEmpty
Указывает значение, отображаемое в редактируемом поле вместо пустого значения (например, «Название каталога»).
Пример: редактируемое меню в Smarty
Урок содержит пример создания редактируемого меню в шаблоне Smarty, демонстрирующий добавление, удаление и изменение пунктов меню.
Настройка внешнего вида
Внешний вид панелей редактирования настраивается через CSS-файл (edit-in-place.css).
Система Edit-in-Place в UMI.CMS реализуется с помощью простых атрибутов, что упрощает настройку. Они позволяют гибко управлять контентом сайта, добавляя, удаляя и перемещая элементы прямо на странице.