Disclaimer: эта статья не предназначена для «зубров». Ее основная аудитория – начинающие web-мастеры, у которых появляется желание сделать все «по-взрослому», но не всегда хватает идей, как именно это сделать.
Итак, началось все с того, что мне захотелось как-то оживить первую страницу своего магазина, который я проектировал, а кроме того, получить нормальный инструмент для представления важных промо-акций, товаров и т.п.

В «больших» магазинах вроде http://www.lookfantastic.com/ сделан красивый блок, в котором эти самые динамические промо и представлены.

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

Как раз в это время мне на глаза попалось сообщение о том, что появился бесплатный модуль для Magento от Mxperts, который позволял подключать jQuery Tools. До этого с jQuery Tools я не сталкивался, поэтому полез смотреть, что же это такое. Сказать, что меня очаровали возможности библиотеки – значит ничего не сказать. Конечно, мысль сразу же заработала в направлении реализации моей идеи с помощью нового инструмента.

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

Итак. Предполагаем, что у вас уже установлен и настроен магазин на базе Magento. Названия разделов в админке я буду давать на русском языке, блок локализации установлен от niro (см. русский форум на www.magentocommerce.com).

Для начала необходимо установить через MagentoConnect два модуля: Mxperts jQuery и Mxperts jQuery-Tools. Сразу предупреждаю: в той версии, что сейчас лежит на MagentoConnect (1.2.5 от 09.10.2009), есть ошибка. Необходимо скачать с оригинального сайта jQuery Tools плагин circular (файлы tools.scrollable.circular-0.5.1.js и tools.scrollable.circular-0.5.1.min.js) и заменить ими те версии, которые окажутся после установки модулей в директории /js/jquery/jquerytools/.

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

Для этого в админке создаем статический CMS-блок, который будет отвечать за обвязку (CMS -> Статичные блоки, жмем кнопку «Добавить новый блок»):

<div id="promobox">  <ul id="flowtabs"> <li><a id="t1" href="#"><span>Заголовок 1</span><br />Привет, здесь 1!</a></li> <li><a id="t2" href="#">="#"><span>Заголовок 2</span><br />Привет, а здесь уже 2!</a></li> <li><a id="t3" href="#"><span>Заголовок 3</span><br />И, наконец, 3!</a></li> </ul>  <div id="flowpanes"> <div class="items"> {{block type="cms/block" block_id="home-page-promo-01"}} {{block type="cms/block" block_id="home-page-promo-02"}} {{block type="cms/block" block_id="home-page-promo-03"}} </div> </div> </div> * This source code was highlighted with Source Code Highlighter.

Обзываем блок так, чтобы было удобно, идентификатор ставим, например, home-page-promo, устанавливаем статус Включено и сохраняем. Как видно из кода, здесь описываются у нас закладки (ярлыки) системы навигации по страницам промо и обвязка страниц.

Далее создаем страницы промо (как можно догадаться из текста, идентификаторы будут home-page-promo-XX).

home-page-promo-01:

<div> <div style="background: #F0F1F2; color:black"> <h2>Forget about scrollbars</h2> <p>The purpose of this library is to make it extremely easy to add scrolling functionality to a website. Whenever you wish to scroll HTML elements in a visually-appealing manner, this is the only library you need. The main design goals of this library are to provide <em>visual customization</em> functionality and <em>programmability</em>. Here are some example scenarios where you would benefit from using the library:</p> <ul> <li>Home pages, like this one right here</li> <li>Product catalogues</li> <li>News tickers</li> <li>Custom select boxes in forms</li> <li>Image galleries</li> <li>Video playlists</li> <li>All kinds of navigational systems</li> </ul> <p>The first version of the library was released on January 3, 2008. Since then, this tool has come a long way and it is now a stable and mature product.</p> </div> </div> * This source code was highlighted with Source Code Highlighter.

home-page-promo-02:

<div> <div style="background: #F0F1F2; color:black"> <h2>Extendable architecture</h2> <p>Just like other tools this tool can be extended with plugins. Currently available plugins include:</p> <ul> <li><a href="http://flowplayer.org/tools/scrollable.html#circular">circular</a> makes an infinite loop from the Scrollable items so they continue cycling back to the beginning once the last item is reached.</li> <li><a href="http://flowplayer.org/tools/scrollable.html#autoscroll">autoscroll</a> makes the scrolling behaviour automatic and is highly configurable.</li> <li><a href="http://flowplayer.org/tools/scrollable.html#navigator">navigator</a> provides navigation buttons for switching between pages in Scrollable.</li> <li><a href="http://flowplayer.org/tools/scrollable.html#mousewheel">mousewheel</a> enables mousewheel support for Scrollable.</li> </ul> <p>You can also write <a href="http://flowplayer.org/tools/using.html#plugins">your own plugins</a>. Another way to alter the default behaviour is the ability to make your <a href="http://flowplayer.org/tools/demos/scrollable/easing.html">own animation effects</a>. There is lots of room for experimentation!</p> </div> </div> * This source code was highlighted with Source Code Highlighter.

home-page-promo-03:

<div> <div style="”background: #F0F1F2; color:black"> <h2>Rich yet simple</h2> <ul style="font-size: 12px"> <li>Horizontal and vertical scrolling.</li> <li>Scrolling using navigational buttons, API calls, keyboard arrow keys, and the mouse scroll wheel.</li> <li>The number of items scrolled at once is customizable.</li> <li>The navigational buttons are setup without a single line of JavaScript.</li> <li>Tabbed navigation like this one can be setup without any programming.</li> <li>Programmatic actions are available, such as: <samp>next</samp>, <samp>prev</samp>, <samp>nextPage</samp>, <samp>prevPage</samp>, <samp>seekTo</samp>, <samp>begin</samp>, and <samp>end</samp>.</li> <li>Dynamic addition and removal of Scrollable items.</li> <li>The ability to customize the scrolling experience with <samp>onBeforeSeek</samp> and <samp>onSeek</samp> listeners.</li> </ul> </div> </div> * This source code was highlighted with Source Code Highlighter.

Внутри каждого элемента можно размещать все, что душе угодно, т.е. любую html-разметку. Например, в живом примере, приведенном в конце статьи, используются просто изображения.

Пришло время заняться css.

Приведу свою таблицу css, при этом в коде есть комментарии:

/* Promobox styles */ #promobox { width: 560px; height: 290px; margin: 0; padding: 0; } /* Главный элемент для закладок */ #flowtabs { float: right; /* dimensions */ width:172px; height: 0 !important; margin:0 !important; padding:0; /* IE6 specific branch (prefixed with "_") */ _margin-bottom:-2px; } /* Стиль для закладки */ #flowtabs li { margin:0; padding:0; text-indent:0; list-style-type:none; } /* Стиль <a>-тега внутри закладки */ #flowtabs li a { background:#fbfaf6; display:block; height: 50px; width: 168px; padding:18px 0 0 4px; margin:1px 0 1px 0; border-left: 5px solid #fbfaf6; /* font decoration */ color:#000; text-align:left; text-decoration:none; } #flowtabs li a span { text-transform:uppercase; font-weight:bold; } /* Стиль для активной закладки */ #flowtabs a.current { cursor:default; border-left: 5px solid #59111e; } /* Страницы промо – стиль контейнера */ #flowpanes { background: #fff; width:388px; height:290px; /* from html */ position:relative; overflow:hidden; } /* Стиль отдельной страницы */ #flowpanes div { display:none; color:#e65505; background: #fff; padding: 0 10px 0 0; /* from html */ float:left; display:block; width:378px; height: 290px; cursor:pointer; font-size:14px; } #flowpanes div h2 { color:#e65505; } /* Стиль дополнительного вспомогательного контейнера */ #flowpanes .items { height:20000em; /* необходимо выделить достаточно пространства для всех – включая невидимые - страниц */ position:absolute; clear:both; margin:0; padding:0; } * This source code was highlighted with Source Code Highlighter.

Настало время настроить саму библиотеку jQuery и плагины к ней. Переходим в Система -> Конфигурация -> jQuery.

Выставляем значение Включено в Да. Рекомендую поставить Minified and Gzipped так же в Да (конечно, если Вы не планируете заниматься отладкой, если что-то пойдет не так). Там же есть замечательный пункт, который позволит проверить корректность установки jQuery: jQuery functionality check. Если Вы выставите его в Да, то после сохранения конфигурации и обновления главной страницы магазина в поле для поиска Вы должны увидеть новый текст. Если это произошло – значит, библиотека jQuery установлена и функционирует корректно.

Чтобы не возвращаться к этому пункту, выставьте в блоке jQuery Script1 статус Включено в Да и поместите в jQuery-Code следующий код:

// Выбираем #flowplanes и делаем его листаемым. Воспользуемся плагинами circular и navigator jQuery("#flowpanes").scrollable( { vertical : true, // укажем, что листать по вертикали size : 1, // количество одновременно видимых на экране страниц промо clickable : false // по клику мыши НЕ перемещаться на следующий элемент, т.к. нам нужно обеспечить корректность перехода в нужном нам направлении }).circular().mousewheel(400).navigator( { // для использования в качестве навигатора выберем блок с id #flowtabs navi : "#flowtabs", // укажем, что тег <a> внутри навигатора должен использоваться как рабочий объект (а не непосредственные «дети» контейнера) naviItem : 'a', // укажем название класса "current" для активного тега <a> в навигаторе activeClass : 'current' }).autoscroll( { // запускаем листание непосредственно при старте плагина autoplay : true, interval : 5000 // указываем в миллисекундах интервал листания }); * This source code was highlighted with Source Code Highlighter.

Ставим параметр Ready в Да.

Теперь настроим jQuery Tools (Система -> Конфигурация -> jQuery Tools). Т.к. я не использую в настоящий момент никаких других плагинов, кроме Scrollable, то активной осталась сама библиотека и нужный модуль, все остальные я отключил:

Flowplayer Enabled: Нет
jQuery-Tools Enabled: Да
Minified and Gzipped: Да

Tabs: Нет
Slideshow plugin: Нет
History plugin: Нет

Tooltip: Нет
Slide effect: Нет
Dynamic positioning plugin: Нет

Scrollable: Да
Circular plugin: Да
Autoscroll plugin: Да
Navigator plugin: Да
Mousewheel plugin: Да

Overlay: Нет
Gallery plugin: Нет
Apple effect: Нет

Expose: Нет

Flashembed: Нет

Сохраняем изменения и в этом разделе.

Теперь остался последний штрих – вывести блок обвязки на главную страницу. Я для этого воспользовался возможностями Magento по изменению в настройках вида страницы. Переходим в CMS -> Управление страницами -> Home Page.

Собственно, в блок Содержание вставляем тег вызова статичного блока:

{{block type="cms/block" block_id="home-page-promo"}}

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

Вживую все вышеприведенное работает на http://lecompre.ru. Очень надеюсь, что сервер выдержит (это отдельная головная боль, до нормальной оптимизации руки так и не дошли). Огромная просьба – ресурс недавно запущен в плавание и вполне живой, поэтому не балуйтесь особо, пожалуйста. Ну, и на дизайн сильно внимание не обращайте: нет пока денег на дизайнера.

На любые вопросы с удовольствием отвечу.

_________
Текст подготовлен в ХабраРедакторе

Динамические промо в Magento