Listing 2.0. Большое обновление. Принцип работы и краткий экскурс

+17
998
Listing 2.0. Большое обновление. Принцип работы и краткий экскурс

Первым делом, как это принято — компонент нужно установить. Это делается стандартными средствами системы. После установки компонента обязательно обновите события в базе данных. Картинки в посте кликабельны.

1. Начало работы.

В предыдущей версии вся работа происходила внутри настроек типа контента. В новой версии вся работа происходит внутри компонента. Вот так он выглядит после установки:

Изображение

Первым делом начнем работу со списком типа контента «Объявления». В разделе «Шаблоны списков» добавьте новый шаблон.

Изображение

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

Изображение

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

Перейдем в раздел «Типы контента» и выберем «Объявления». Компонент добавил в настройки новую вкладку:

Изображение

В поле «Шаблон списка типа контента» загрузился шаблон, который мы ранее создали внутри компонента. Выберите его. Или выберите другой, если вы создали несколько шаблонов. Обратите внимание — если вы попытаетесь подключить к типу контента «Объявления» шаблон в котором подключен другой тип контента — то компонент уведомит Вас об этом и сохранить настройки не получится.

Также, во вкладке «Просмотр списка» необходимо подключить шаблон «default_list_listing»:

Изображение

Первоначальная настройка закончена, и теперь можно посмотреть — каким стал список в разделе «Объявления».

Изображение

Как видно — шаблон успешно подключился, и теперь предстоит вторая часть настройки — расстановка полей и их настройка для стилизации списка.

2. Расстановка полей.

Вернемся в компонент Listing и отредактируем созданный шаблон. Расставим нужные поля на позициях:

Изображение

Вернемся в объявления и посмотрим, как это выглядит сейчас.

Изображение

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

Изображение

Давайте предположим, что текущий вид полей вас совсем не устраивает и вы хотите поменять их внешний вид, добавить иконку или что-то еще. Для этого — внутри каждого поля появились новые настройки от компонента Listing:

Изображение

О пресетах немножко позже, а пока настроим поле «Город». Добавим к нему иконку, а также я хочу чтобы оно было в виде ссылки, причем вместо названия города я хочу видеть надпись «Показать город». Listing позволяет производить такие манипуляции с полями. Выставим настройки поля так:

Изображение

После сохранения настроек мы увидим что поле город стало выглядеть вот так:

Изображение

Если нажать на ссылку, то отобразится модальное окно с содержимым поля:

Изображение

Удобно, когда нужно скрыть телефон или цену. Или вывести в модальном окне видео. Или форму. В общем — тут уже кто на что горазд. Но, перейдем к самому интересному — к пресетам. Как было видно из скриншотов выше — поля могут содержать какие-то пресеты.

Перейдем обратно в компонент Listing и откроем вкладку «Пресеты». Нажмите кнопку «Добавить», чтобы создать пресет:

Задайте название пресета, класс пресета (класс должен быть уникальным) и выставьте необходимые настройки в соседних вкладках «Стиль пресета» и «Стиль пресета при наведении»

Изображение

Я выставила такие настройки — изменила фон, изменила цвет текста и добавила отступов справа и слева.

Также я добавлю дополнительный пресет для самой ссылки — в нем изменим цвет на белый и уберем подчеркивание при наведении.

Настройки внутри пресета визуально просты — достаточно включить тот раздел настроек, который вам нужен и заполнить необходимое.:

Изображение

После создания пресетов мы можем применить их к полю. Обратите внимание — созданные пресеты можно применять абсолютно ко всем полям, однако работать они будут только в шаблонах компонента.

Изображение

Теперь, если вернуться к объявленим, то можно увидеть что пресет успешно применился и все работает:

Изображение

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

3. Кнопки.

К некоторым спискам можно добавить кнопку. Кнопки создаются внутри компонента Listing. К каждой кнопке также можно применить пресет и стилизовать под себя. Задать иконку, текст на кнопке и др.

Для примера — создадим кнопку для объявлений и применим к ней пресет, который мы создавали для города:

Изображение

И теперь внутри шаблона списка подключим кнопку:

Изображение

Теперь список станет выглядеть так:

Изображение

Как видите, настройки не так сложны, чтобы разобраться в них. Но, краткая экскурсия не помешала. Аналогичным образом настраиваются шаблоны для записей (сейчас их два на выбор).

Уже практически на подходе — Drag-N-Drop конструктор, в котором можно создавать свои позиции, менять позиции местами и стилизовать внутри при помощи удобных инструментов.

Как всегда — если что-то непонятно или работает неккоректно — милости прошу в мой телеграм: ТЫЦ

Listing. Управление списками и записями типов контента
Компонент

Listing. Управление списками и записями типов контента

Купить 1000 руб.

+1
Goose Goose 2 месяца назад #

Замечательная работа!👍

0
skewes skewes 2 месяца назад #

Здравствуйте.

А подскажите пожалуйста, есть ли возможность сделать на мобильном телефоне 2 колонки например для списка контента?

И ещё вопрос. Мы можем благодаря вашему компоненту прикрутить «В корзину» например. Слово «скидка» или любое другое слово я так понял не проблема вывести. А вот с корзиной как обстоять будут дела?

0
Anastasia Anastasia 2 месяца назад #

А подскажите пожалуйста, есть ли возможность сделать на мобильном телефоне 2 колонки например для списка контента?

Нет, такой возможности нет.

А вот с корзиной как обстоять будут дела?

Точно также — как и с любым другим полем. Компонент выводит сторонние поля ровно так, как их задумал автор. Если что-то идет не так — то можно подключить к полю пресет и стилизовать его на свое усмотрение.

0
skewes skewes 2 месяца назад #

Появился ещё такой вопрос.

Могу ли я использую шаблон списка интернет магазина от Парвиза, добавить к этому шаблону поля благодаря вашему компоненту?

То есть у меня уже 4сть корзина, избранное, отзывы в списке и я просто добавляю некоторые значения.

+1
Def Def 2 месяца назад #

шаблон вы формируете с нуля с этом компоненте. 

0
Anastasia Anastasia 2 месяца назад #

На данный момент вы можете использовать только те шаблоны, которые есть внутри компонента. Если нужные вам поля присутствуют как отдельные поля — то да, вы можете их вывести. Если же, скажем корзина, не поставляется в виде поля, а зашита в шаблон — то здесь увы, никак...

0
popkorn popkorn 2 месяца назад #

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

Изображение

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

Изображение

0
ParadoX ParadoX 10 дней назад #

Очень интересно! А когда ориентировочно ждать Drag-N-Drop конструктор?

+1
Anastasia Anastasia 10 дней назад #

К сожалению, не в этом месяце — большая загрузка

+1
ParadoX ParadoX 9 дней назад #

К концу марта дождёмся?)

0
Anastasia Anastasia 9 дней назад #

Не буду загадывать. С большой долей вероятности — да.

Еще от автора

Виджет "Конструктор модальных окон"
Конструктор модальных окон — функциональный виджет, который позволяет создавать на сайте модальные окна с различным содержимым и управлять их поведени
Виджет "Гонка пользователей"
Дополнительный виджет для компонента «Пользователи», позволяющий выводить юзеров в виде прогресс-бара, устраивая соревновательный эффект.
Компонент "Coming Soon"
Бесплатный компонент, позволяющий переопределить дефолтную страницу отключенного сайта на более динамичную и настроить её на своё усмотрение
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.