Главная » MODx- профессиональный инструмент для разработки сайтов » Сниппет Ditto: способы вызова в MODx Evo
    РейтингРейтингРейтингРейтингРейтинг

Сниппет Ditto: способы вызова в MODx Evo

Ditto — сниппет для создание ленты новостей или блога, вывод каталога товаров, сортировка и т. д.

Разберем самые основные:

Создание ленты новостей сниппет Ditto

Создадим новостную ленту с помощью сниппета Ditto. 

Вызов сниппета будет осуществляться непосредственно на странице новости. Синтаксис вызова:

[ [Ditto? &пар1=`значение` &пар2=`значение`] ]

Как говорил выше, для вывода новостей будем использовать шаблон для сниппета (обычный чанк с html кодом). Создаем чанк с названием «vid-news».

Нам понадобятся следующие теги:

В чанк vid-news добавляем следующий html-код:

<div id="news">
<h2><a href="[~~]" title=""></a></h2>
<div class="introtext"><span class="date"></span>  </div>
<div class="readmore" ><a href="[~~]" 
title="Перейти к полному тексту новости">Читать дальше →</a></div>
</div>

Как видите, в шаблоне были использованы стили, которые еще не описаны в файле style.css.

Исправим это, и добавим в наш файл CSS следующий код:

#news {padding:0; margin:0 0 15px 0;}
#news h2 {padding:0px; margin:0px; border:none}
#news .introtext{padding:5px 0 0 0}
#news .introtext .date {font-weight:bold;}
#news .readmore {text-align:right}

Редактируем ресурс «Новости», вставив в поле «Содержимое ресурса» вызов сниппета Ditto:

[ [ Ditto? &tpl=`vid-news` &dateSource = `pub_date` &dateFormat=`%d.%m.%Y` ] ]

В этом вызове были использованы следующие параметры:

Посмотрим результат. Заходим на страницу «Новости»:

Наша страница с новостями приобрела добротный вид.

Для разбиения станиц, когда их будет много, понадобится добавить в конструкцию вызова сниппета следующие параметры:

Для реализации навигации между страницами, будем использовать плэйсхолдеры Ditto:

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

После всех изменений, наш вызов Ditto на странице с новостями приобретает вид:

[ [Ditto? &tpl=`vid-news` &dateSource = `pub_date` 
&dateFormat=`%d.%m.%Y` &paginate=`1` &display=`2` ] ]
Страницы: [ +previous+ ][ +pages+ ][ +next+ ]

Результат данной конструкции:

Вид ссылок навигации можно изменить с помощью CSS. Для этого добавим класс paginat:

  

[ [Ditto? &tpl=`vid-news` &dateSource = `pub_date` &dateFormat=`%d.%m.%Y`
&paginate=`1` &display=`2` ] ]
<div class="paginat">
Страницы: [ +previous+ ][ +pages+ ][ +next+ ]
</div>

Для простоты верстки вынесем этот код в чанк innews. Создаем чанк с таким названием, и помещаем вышеуказанный код. А на странице «Новости» делаем вызов чанка .

Исходный HTML код ссылок навигации при этом будет следующим:

<div class="paginat">
Страницы: <a href='/news.html?start=0' class='ditto_previous_link'>&lt; назад</a>
<a class='ditto_page' href='/news.html?start=0'>1</a>
<span class='ditto_currentpage'>2</span>
<a class='ditto_page' href='/news.html?start=4'>3</a>
<a href='/news.html?start=4' class='ditto_next_link'>далее &gt;</a>
</div>

Здесь прописаны CSS классы для каждой ссылки:

Изменим внешний вид, прописав следующий код в стиле CSS:

.paginat a {text-decoration:underline;}
.paginat a:hover {text-decoration:none;}
.paginat .ditto_currentpage {color:#fff; background-color:#008080;
border:1px solid #6f7b1a;
padding: 1px 3px; font-weight:bold; margin:2px; }
.paginat .ditto_previous_link, .paginat .ditto_next_link{margin:0 10px;}
.paginat .ditto_page{ padding: 2px 5px;}

результат:

Работу с новостной лентой можно заканчивать!


Сортировка по дате Ditto 

1. Сниппет

Для начала создадим сниппет convertDate.
(Вкладка «Ресурсы» -> «Управление ресурсами» -> «Сниппеты» -> Нажмите «Создать сниппет»)
Вставьте в поле этот код:

<? php
$monthes =
array('','января','февраля','марта','апреля','мая','июня',
'июля','августа','сентября','октября','ноября','декабря');
$day = date("j",$MyDate);
$month = $monthes[date("n",$MyDate)];
$year = date("Y",$MyDate);
echo $day.' '.$month.' '.$year.' года';
?>

и нажмите сохранить, теперь вы создали сниппет, который будет конвертировать нашу дату. При минимальном знании PHP вы легко сможете исправить стиль вывода даты сами.

2. TV-параметр даты

Теперь создадим новый TV-параметр для ввода даты.
(как создать: выбираем вкладку «Ресурсы» -> «Управление ресурсами» -> «Параметры TV» -> создаём новый TV параметр даты)
В название tv-параметра пишем date, тип ввода из списка выбираем также Date, далее визуальный компонент обязательно меняем на Unixtime.

3. Чанки и шаблоны

Когда мы подготовили все «технические ресурсы» для вывода, сделаем шаблон вывода.
Он может быть любым, на ваше усмотрение, главное в месте даты прописать вывод сниппета конвертера даты, который мы написали в 1 части и подставить ему параметр TV даты из 2 части.
[ [ convertDate? MyDate=`параметр` ] ]
Пару важных моментов:

В итоге мы получим или

4. Вывод Ditto

И последнее, выводим наши статьи или иную инфу с параметром даты:
[ [ Ditto? &startID=`id` &tpl=`tpl` &sortBy=`date` ] ]
где id — идентификатор документа, так же можно использовать [ *parent* ],
tpl — чанк шаблона вывода контента.
&sortDir — тут передаются 2 вариант параметров ASC или DESC ,которые означают сортировку по убыванию или возрастанию.




css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!