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 -> Статичные блоки, жмем кнопку «Добавить новый блок»):
Обзываем блок так, чтобы было удобно, идентификатор ставим, например, home-page-promo, устанавливаем статус Включено и сохраняем. Как видно из кода, здесь описываются у нас закладки (ярлыки) системы навигации по страницам промо и обвязка страниц.
Далее создаем страницы промо (как можно догадаться из текста, идентификаторы будут home-page-promo-XX).
home-page-promo-01:
home-page-promo-02:
home-page-promo-03:
Внутри каждого элемента можно размещать все, что душе угодно, т.е. любую html-разметку. Например, в живом примере, приведенном в конце статьи, используются просто изображения.
Пришло время заняться css.
Приведу свою таблицу css, при этом в коде есть комментарии:
Настало время настроить саму библиотеку jQuery и плагины к ней. Переходим в Система -> Конфигурация -> jQuery.
Выставляем значение Включено в Да. Рекомендую поставить Minified and Gzipped так же в Да (конечно, если Вы не планируете заниматься отладкой, если что-то пойдет не так). Там же есть замечательный пункт, который позволит проверить корректность установки jQuery: jQuery functionality check. Если Вы выставите его в Да, то после сохранения конфигурации и обновления главной страницы магазина в поле для поиска Вы должны увидеть новый текст. Если это произошло – значит, библиотека jQuery установлена и функционирует корректно.
Чтобы не возвращаться к этому пункту, выставьте в блоке jQuery Script1 статус Включено в Да и поместите в jQuery-Code следующий код:
Ставим параметр 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.
Собственно, в блок Содержание вставляем тег вызова статичного блока:
После этого, если Вы нигде не допустили ошибку, на первой странице у Вас должен появиться блок с промо-модулем, который не только совсем не уступает внешне подобному блоку на lookfantastic.com, но и, по моему мнению, за счет видимой динамики движения даже превосходит его.
Вживую все вышеприведенное работает на http://lecompre.ru. Очень надеюсь, что сервер выдержит (это отдельная головная боль, до нормальной оптимизации руки так и не дошли). Огромная просьба – ресурс недавно запущен в плавание и вполне живой, поэтому не балуйтесь особо, пожалуйста. Ну, и на дизайн сильно внимание не обращайте: нет пока денег на дизайнера.
На любые вопросы с удовольствием отвечу.
_________
Текст подготовлен в ХабраРедакторе
Итак, началось все с того, что мне захотелось как-то оживить первую страницу своего магазина, который я проектировал, а кроме того, получить нормальный инструмент для представления важных промо-акций, товаров и т.п.
В «больших» магазинах вроде 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"><!-- jQuery tools promo box: tabs with autoscroll --> <!-- tabs work as navigator for scrollable -->
<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>
<!-- panes -->
<div id="flowpanes"><!-- wrapper for scrollable items -->
<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. Очень надеюсь, что сервер выдержит (это отдельная головная боль, до нормальной оптимизации руки так и не дошли). Огромная просьба – ресурс недавно запущен в плавание и вполне живой, поэтому не балуйтесь особо, пожалуйста. Ну, и на дизайн сильно внимание не обращайте: нет пока денег на дизайнера.
На любые вопросы с удовольствием отвечу.
_________
Текст подготовлен в ХабраРедакторе