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

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"><!-- 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. Очень надеюсь, что сервер выдержит (это отдельная головная боль, до нормальной оптимизации руки так и не дошли). Огромная просьба – ресурс недавно запущен в плавание и вполне живой, поэтому не балуйтесь особо, пожалуйста. Ну, и на дизайн сильно внимание не обращайте: нет пока денег на дизайнера.

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

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