Итак, на данный момент мы заполняем контентом раздел Галерея сортов для растения, которое называется Шлюмбергера.

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

Изменим немного структуру модели: создадим дочерний элемент к строке таблицы, описывающей сорт шлюмбергеры.

Присвоим этому элементу роль Section. А в родительском элементе не забудем установить параметр Section Style в положение Action Group.

В поле Title напишем “Фото”, а в поле Text не будем ничего писать. Вместо этого вставим код иконки с фотоаппаратом. Он у нас уже есть в разделе Галерея сортов, который мы делали для Адениума.

На вкладке Markdoun свойств элемента “Фото” мы встроим изображение. Как это делается мы узнали на прошлом уроке.

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

Создадим еще одну секцию со стилем Action Group и в нее перенести описание из родительской Action. Заполним поле Title и перенесем код иконки из другого раздела.

Теперь мы можем сгенерировать сайт и посмотреть: что у нас получилось.

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

Давайте думать дальше. Мы планировали сделать раздел Растения в наличии и Растения на продажу. И это имеет смысл для Адениумов, потому что каждый взрослый адениум уникален - за счет формы ствола, особенностей прививки и так далее.

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

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

Создадим еще одну дочернюю Action, назовем ее В наличии и вставим какую нибудь иконку.

Я выбрала иконку с растением, и кому-то может показаться непонятным, что значит эта иконка.

Специально для таких случаев, в Nasdanika Vinci имеется возможность создавать всплывающие подсказки. Давайте найдем на вкладке Main поле Tooltip и в него напишем текст подсказки.

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

Создадим еще одну дочернюю Action, назовем ее Заказать. Так как для того, чтобы сделать заказ посетителю необходимо будет перейти на другую страницу - присвоим Action “Заказать” роль Контекст. Форму заказа мы создадим в одном из следующих уроков.

Сгенерируем сайт и посмотрим на получившийся результат.

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

Так же у кнопок появились подсказки, всплывающие при наведении на кнопку.