Создание плагина - часть 2. Frontend.

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

Вывод списка книг

Сперва нам нужно создать страницу, на которой мы разместим компонент по выводу списка книг. Сделать это можно через пункт меню CMS->Pages->Add

Страничку я назвал "Список книг", а сам файл "books". Теперь нужно создать для неё маршрут, то есть грубо говоря правило, в соответствии с которым CMS будет связывать HTTP-запрос с той или иной страницей сайта. У меня прописано такое правило:

/books/

Теперь если сохранить страничку и набрать в браузере http://название_сайта/books/ то можно убедиться что открывается именно она. 

Далее, не выходя из раздела CMS, переходим в подраздел Components, открываем группу Builder и мышкой перетаскиваем компонент Record List в окно с кодом. 

Щёлкаем по самому компоненту и заполняем настройки: 

  • Model class - название модели с книгами (в моём случае это Cmsdev.Library - Book)
  • Display column - колонка для отображения (например title)

Если нужно кастомизировать отображение (обернуть в тэги, вывести другие поля из таблицы), то ставим курсор на слово component в коде и в правом нижнем углу экрана щёлкаем по значку слева от лупы. 

Теперь по адресу http://название_сайта/books/ будет открываться список книг. 

Вывод детальной страницы книги

Принцип ровно тот же, как и в случае создания страницы со всем списком книг. То есть нам так же нужно будет создать страничку через CMS->Pages->Add

Только соответственно название страницы и роут у неё уже будут свои, а за вывод информации будет отвечать совсем другой компонент. 

Файл называется у меня "book", а роут я указал такой:

/book/:slug

что означает, что если у книги в поле slug указано first, то если я введу в адресную строку http://название_сайта/books/first, в url-параметр slug попадёт строка "first".

На этой странице уже необходимо будет разместить компонент Record details. Настройки у него будут следующие:

  • Model class - здесь всё так же без изменений (Cmsdev.Library - Book)
  • Display column - колонка для отображения (например, description)
  • Identifier value - url-параметр, значение которого будем передавать в компонент. Указываем в таком формате:
    :slug
  • Key column - поле в таблице (в данном случае slug), в котором будет производиться поиск нужной записи. По значению, которое попало в url-параметр с именем slug (это мы прописывали в поле Identifier value). 

Как формировать URL детальной страницы книги на странице списка книг?

Для этого необходимо будет вернуться к компоненту Record List и открыть его параметры. Там есть такая группа Link to the details page. Здесь нам нужны такие настройки: 

  • Details page - здесь указываем название файла, в котором прописан роут для детальной страницы. Как я уже указывал ранее, у меня этот файл называется book
  • URL parameter name - url-параметр, в который будет подставляться значение при формировании адреса. В моём случае, параметр называется slug.
  • Details key column - значение, которое будет подставляться в указанный url-параметр роута. Как и в предыдущем случае, это slug

То есть по такому правилу "/book/:slug" после всех подстановок url получится таким:

http://название_сайта/books/first

Собственно, на этом всё. Надеюсь данная информация будет полезна.

Комментарии ()

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