Гиркало Вадим - программист фрилансер и разработчик (freelancer, developer) сайтов на TYPO3

Есть такое замечательное и оригинальное двухуровневое меню под названием SlideDownBoxMenu. Данное меню хорошо тем, что каждому пункту меню 1-го уровня сопоставляется тематическая картинка, которая делает меню интуитивно-понятным. Ну, а про прикольную popup-анимацию я уже и не говорю.



Поглядеть и познакомиться со SlideDownBoxMenu поближе можно здесь или на одном из моих заброшенных (по вине очень занятого хозяина) сайтов.

Для того, чтобы такое меню заработало на сайте Typo3 даже написан специальный экст - t3s_slidedownboxmenu. Однако, я не сторонник применять эксты там, где можно обойтись TypoScript-ом. Тем более, что верстка самого меню не так уж и сложна, но и не тривиальна.

Сверстанное меню должно иметь следующий вид:


<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Меню</span>
<span class="sdt_descr">Короткое описание</span>
</span>
</a>
</li>

<li>
<a href="#">
<img src="images/2.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Меню2</span>
<span class="sdt_descr">Короткое описание2</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Подменю1</a>
<a href="#">Подменю2</a>
<a href="#">Подменю3</a>
</div>
</li>

<li>...</li>
</ul>

Тут основная загвоздка в картинке. Но это все ерунда при наличии небольшого количества серого вещества! Привожу хорошо задокументированный рабочий вариант скрипта:


lib.slidemenu = COA
# Создаем контейнер для пунктов меню - UL
lib.slidemenu.wrap = <ul id="sdt_menu" class="sdt_menu"> | </ul>
lib.slidemenu.10 = HMENU
lib.slidemenu.10 {
  noBlur = 1
  # Берем для меню только корневые страницы сайта
  entryLevel = 0
  # Данные страницы из меню исключаем
  excludeUidList = 14,23,25
  1 = TMENU
  1 {
    noBlur = 1
    expAll=1

    NO {
  # Каждый пункт меню это  - LI
 wrapItemAndSub = <li> | </li>
  # Запрещаем Typo3 делать ссылку для данного пункта меню
  # (т.к. верстаем все сами)
  doNotLinkIt = 1
  # Ссылку делаем сами (тут только её начало)
 allWrap.stdWrap.dataWrap = <a href="{field:alias}.html"> |
  # Первой внутри ссылки будет картинка (откуда она берется описывается ниже)
 beforeImg.import = uploads/media/
  beforeImg.import.field = media
  beforeImg.import.listNum = 0
  # Перед именем страницы, согласно верстке, должна быть такая конструкция:
 before.stdWrap.dataWrap = <span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link"> |
  # После имени страницы, согласно верстке, должна быть такая конструкция:
 after.stdWrap.dataWrap = | </span><span class="sdt_descr">{field:subtitle}</span></span></a>
    }
 
    # Для текущего пункта меню все делается аналогично. Только добавляется класс - current
    ACT = 1
    ACT {
      wrapItemAndSub = <li class="current active"> | </li>
 allWrap.stdWrap.dataWrap = <a href="{field:alias}.html"> |
 beforeImg.import = uploads/media/
  beforeImg.import.field = media
  beforeImg.import.listNum = 0
 before.stdWrap.dataWrap = <span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link"> |
 after.stdWrap.dataWrap = | </span><span class="sdt_descr">{field:subtitle}</span></span></a>
 doNotLinkIt = 1
    }

    CUR = 1
    CUR {
      wrapItemAndSub = <li class="current active"> | </li>
 allWrap.stdWrap.dataWrap = <a href="{field:alias}.html"> |
 beforeImg.import = uploads/media/
  beforeImg.import.field = media
  beforeImg.import.listNum = 0
 before.stdWrap.dataWrap = <span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link"> |
 after.stdWrap.dataWrap = | </span><span class="sdt_descr">{field:subtitle}</span></span></a>
 doNotLinkIt = 1
    }
 
  }
  # Верстка пунктов меню второго уровня. Тут все просто и без комментариев.
  2 = TMENU
  2 {
    noBlur = 1
    expAll=1
    wrap = <div class="sdt_box"> | </div>

    NO {
      linkWrap = |
    }

    CUR = 1
    CUR {
      linkWrap = |
 ATagParams = class="current"
    }

  }

}


Теперь о сопоставлении картинок и страниц.

Каждый начинающий тайпер наверняка видел, что страница сайта в админке имеет ряд свойств, которые разделены на закладки. Причем закладка Ресурсы/Resources часто вызывает недоумение - что это за файлы которые можно атачить к странице? Ответ: можно присоединять  любые файлы в том числе и картинки, для решения таких задач как эта (а можно, например, приатаченные картинки использовать и как фон для данной страницы).

Вот так это делается:


Все что мы здесь атачим Typo3 автоматически сохраняет в папке uploads/media/. Нумерация файлов в списке начинается с нуля. Имя поля которое содержит список имеет имя - media.
Думаю, что теперь ясны 3 магические строки скрипта:
beforeImg.import = uploads/media/
beforeImg.import.field = media
beforeImg.import.listNum = 0


Для лучшего понимания работы скрипта советую почитать мануал.

P.S. Я абсолютно не претендую на оптимальность кода и с радостью погляжу на более совершенный скрипт.

Нужно было мне получить название категории новостей по её id, а точнее по значению регистра - register:newsCategoryUid (для бредкрамба на странице единичной новости).

Делал примерно так:

20 = RECORDS
20 {
source = {register:newsCategoryUid}
source.insertData = 1
tables = tt_news_cat
conf.tt_news_cat = TEXT
conf.tt_news_cat.field = title
wrap = <li> | </li>
}

И не работает, хоть убей! После нескольких часов мук, решение все же было найдено.
В шаблон единичной новости добавил следующий HTML-код:
<div style="display:none;">###NEWS_CATEGORY###</div>

После этого, регистр сразу же начал заполняться значением, а мой запрос начал нормально отрабатывать.

Поясню, style="display:none;" написал лишь для того, чтобы на детальной странице новостей категория была скрыта, здесь она мне не нужна.

Возможно, для кого-то это и само-собой понятно, но лично я был уверен, что этот регистр tt_news заполняется всегда и при любых условиях.

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

Внешне все выглядит так:


Теперь по функционалу:

1. Данное меню отображает названия и изображения всех подкатегорий, которые
входят в состав категории - parent_category, которая у меня задана в константах шаблона страницы.


2. Клик по картинке или названию категории выводит записи новостей, относящиеся только к данной категории.
3. Т.к. сайт многоязычный, то при смене языка меняются и названия категорий. Это был самый трудный момент реализации, т.к. локализация категорий в новостях выполнена довольно странно и нетрадиционно для Typo3.



Вот готовый typoscript для решения данной задачи:

lib.catmenu >
lib.catmenu = COA
lib.catmenu {
10 = CONTENT
10 {
wrap = |
table = tt_news_cat
select {
# CONCAT(title,"|",title_lang_ol) - сливает все языки в одну строку
# разделителем служит символ палка - "|"
selectFields = uid, image, CONCAT(title,"|",title_lang_ol) AS catname
pidInList = {$news_folder_id}
orderBy = uid
where = parent_category={$parent_category} AND deleted=0 AND hidden=0
}
renderObj = COA
renderObj {
wrap = <div class="category">|</div>
10 = COA
10 {
# задаем id страницы которая будет отображать новости
# данной категории
stdWrap.typolink.parameter.dataWrap = {$view_page_id}
# чтобы наша следующая страница со списком новостей знала
# id категории с которой нужно работать передаем ей
# в качестве параметра - tx_ttnews[cat]={field:uid}
stdWrap.typolink.additionalParams.dataWrap = &no_cache=1&tx_ttnews[cat]={field:uid}
stdWrap.typolink.wrap = |
stdWrap.typolink.ATagParams =
# вывод картинки
10 = IMAGE
10{
required=1
wrap = |
file.import=uploads/pics/
file.import.field=image
file.width=235c
file.height=235c
}
# вывод названия категории
20 = COA
20 {
wrap = <h3>|</h3>
10 = TEXT
10 {
field = catname
# разбиваем поле catname на элементы массива
# за счет разделителя - | (char code = 124)
# и берем нужный элемент по коду языка сайта - GP:L
split {
token.char = 124
returnKey.data = GP:L
}
}
}
}
}
}
}

P.S. Как это выглядит в живую можно посмотреть здесь, в видео ролике или на действующем сайте.
P.S. (2) Не забудьте настроить RealUrl (realurlconf.php) для красивого отображения категорий в адресной строке браузера. Вот необходимые для этого строки:
// news categories
'category_name' => array (
array(
'GETvar' => 'tx_ttnews[cat]',
'lookUpTable' => array(
'table' => 'tt_news_cat',
'id_field' => 'uid',
'alias_field' => 'title',
'addWhereClause' => ' AND NOT deleted',
'useUniqueCache' => 1,
'useUniqueCache_conf' => array(
'strtolower' => 1,
'spaceCharacter' => '-',
),

),

),

),

Решил посвятить пост не TYPO3, а jQuery и довольно известной карусели - jcarousel.

На днях пришлось решать следующую задачку. Есть jcarousel и у нее порядка 10 страниц. С помощью стрелочек "влево" и "вправо" мы гуляем по ней то туда, то сюда. Зашли на страницу - 7. Потом вдруг переходим на другую страницу сайта, после чего опять возвращаемся к странице с каруселью. И что мы имеем в данной ситуации? А имеем:

Первый неприятный момент - карусель показывает нам свою 1-ю страницу, вместо той с которой мы до этого ушли (номер 7). Ну, и мы начинаем пролистывание нашей карусели сначала...

Второй неприятный момент заключается в том, что нельзя отослать кому-то ссылку показывающую 7-ю страницу карусели, т.к. все страницы имееют один и тот же url.

Чтобы избавиться от этих двух недостатков нам нужно как-то запоминать состояние карусели. Сделать это можно с помощью якорей или иначе - хеш-ссылок. Например, http://www.domain.com/page.html#watch1, http://www.domain.com/page.html#watch7 и т.д.

Первое, что нужно сделать, это менять строку адреса браузера при пролистывании карусели. На выручку приходит параметр jcarousel - itemVisibleInCallback (другие параметры мне не подошли, хотя напрашивались, например itemFirstInCallback), который определяет пользовательскую функцию, далее цитирую мануал: "вызываемую (по завершению анимации) когда элемент находится в зоне видимости поля карусели". В данную функцию передается 4 параметра: экземпляр карусели, ссылка на элемент LI этого объекта, индекс, указывающий позицию элемента в списке и состояние карусели (prev, next, init). Итак, готовый кусочек кода выглядит так:

// carouselStart - номер элемента карусели с которого начинается показ
var carouselStart = 3;
var watchPos = -1;
var anchor = ( jQuery.url.attr('anchor') == null ? '' : jQuery.url.attr('anchor') );
watchPos = anchor.indexOf('watch');
if ( watchPos >= 0 ) {
carouselStart = anchor.substring(watchPos+5);
}
if(jQuery.isFunction(jQuery.fn.jcarousel)) {
jQuery('#mycarousel').jcarousel({
easing: 'easeOutQuart',
animation: 900,
scroll: 3,
wrap: 'last',
start: (carouselStart - 2),
itemVisibleInCallback: function (carousel, liElement, itemIndex, action) {
window.location.hash = "watch"+itemIndex;
}
});
}

Поясню кое-что.
1. #mycarousel - id тега UL, который является контейнером элементов карусели - LI;
2. scroll: 3 - у меня на одной странице карусели отображается 3 её элемента;
3. start: (carouselStart - 2) - номер элемента карусели с которого начинается показ
4. itemVisibleInCallback - определяет функцию которая меняет адресную сроку браузера. Самый ценный параметр, который поступает на вход этой функции - itemIndex. Т.к. у меня на каждой странице карусели отображается по 3 её элемента, то при нажатии на кнопку Next itemIndex принимает следующие значения: 3, 6, 9... и т.д.
Так, мы запоминаем состояние карусели.

Для того, чтобы карусель начала показ с нужного места, используется переменная - carouselStart. Значение этой переменной берется из адресной строки браузера.

Ну вот, собственно и все. Надеюсь кому-то помог и сэкономил время.

P.S. Рабочий вариант карусели можно посмотреть здесь.

Зачастую у верстальщика или разработчика сайта возникает необходимость присвоить тегу BODY какой-нибудь class и(или) id.
Чтобы сделать это в TYPO3, лично меня спасает следующий TypoScript код:

page.bodyTag >
page.bodyTagCObject = COA
page.bodyTagCObject {
5 = TEXT
5.value = <body
10 = TEXT
10.field = uid
10.noTrimWrap = | id="page_|" |
20 = TEXT
20.field = alias
20.noTrimWrap = | class="|"|
20.required = 1
25 = TEXT
25.value = >
}

Что мы получаем на выходе? А получаем два варианта тега body:
1. <body id="page_ID"> - когда странице не задан алиас
2. <body id="page_ID" class="page-alias"> - когда странице задан алиас

Как видно из скрипта, в качестве id страницы используется поле uid, а в качестве ее класса - поле alias. Имена полей всегда можно изменить для собственных нужд.

А иногда бывает необходимость одним страницам сайта иметь один фон, а остальным - другой фон. Как быть в таком случае? Можно немного доработать последний скрипт и воспользоваться свойством "Шаблон страницы/Frontend Layout", который будет служить переключателем фона.



page.bodyTag >
page.bodyTagCObject = COA
page.bodyTagCObject {
10 = TEXT
10.field = uid
10.noTrimWrap = | id="page_|" |
20 = TEXT
20.field = alias
#20.required = 1
wrap = <body |>
}
[globalVar=TSFE:page|layout=1]
page.bodyTagCObject.20.noTrimWrap = | class="gray-bg |"|
[else]
page.bodyTagCObject.20.noTrimWrap = | class="white-bg |"|
[global]