Dynamic Promotions at Magento

Disclaimer: This article is not intended for "bison." Its main audience is novice webmasters who have a desire to do everything “in an adult way” but do not always have enough ideas on how to do this.
So, it all started with the fact that I wanted to somehow revive the first page of my store, which I designed, and in addition, get a normal tool for presenting important promotions, goods, etc.

In the “big” stores like http://www.lookfantastic.com/ a beautiful block has been made in which these same dynamic promotions are presented.

Of course, first of all I rushed to dig MagentoConnect for ready-made modules, but I only found Teaserboxwhich didn’t suit me at all: firstly, a flash, secondly, you can only advertise products (switching is possible only to the description of the goods), and thirdly, slurred buttons, on which, in addition, there are no inscriptions in Russian displayed.



Just at this time, I came across a message that a free module for Magento from Mxperts appeared, which allowed connecting jQuery Tools . I haven’t encountered jQuery Tools before, so I’ve got to see what it is. To say that I was fascinated by the capabilities of the library is to say nothing. Of course, the thought immediately worked in the direction of realizing my idea with the help of a new tool.

I was too lazy to write and debug a full-fledged module, and I don’t have time, so I did everything in a hurry, but the solution is quite working and with a rare change of promotions it has a right to life.

So. We assume that you have already installed and configured a Magento-based store. I will give the names of sections in the admin panel in Russian, the localization block is installed from niro (see the Russian forum at www.magentocommerce.com ).

First you need to install two modules through MagentoConnect: Mxperts jQuery and Mxperts jQuery-Tools . I warn you right away: in the version that now lies on MagentoConnect (1.2.5 dated 10/09/2009), there is an error. Need to downloadfrom the original jQuery Tools website, the circular plugin (tools.scrollable.circular-0.5.1.js and tools.scrollable.circular-0.5.1.min.js files) and replace with them the versions that will appear after installing the modules in the / js directory / jquery / jquerytools /.

The jQuery Tools website provides very detailed and very clear documentation , so I will not mention the very basics. The bottom line is that we need to create a control structure and blocks that will be directly responsible for the “pages” of the promo.

To do this, create a static CMS block in the admin panel, which will be responsible for binding (CMS -> Static blocks, click the "Add a new block" button):

 

  
• Заголовок 1
  Привет, здесь 1!

  
• ="#">Заголовок 2
  Привет, а здесь уже 2!

  
• Заголовок 3
  И, наконец, 3!

 

 

  

   {{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"}}
  

 

* This source code was highlighted with Source Code Highlighter.

We call the block so that it is convenient, set the identifier, for example, home-page-promo, set the status to Enabled and save. As you can see from the code, here we describe the bookmarks (shortcuts) of the navigation system for promo pages and page binding.

Next, create promo pages (as you might guess from the text, the identifiers will be home-page-promo-XX).

home-page-promo-01:

  

    

Forget about scrollbars

    
    

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 visual
    customization functionality and programmability. Here are some
    example scenarios where you would benefit from using the library:

    
    

      
• Home pages, like this one right here

      
• Product catalogues

      
• News tickers

      
• Custom select boxes in forms

      
• Image galleries

      
• Video playlists

      
• All kinds of navigational systems

    

    
    

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.

  

* This source code was highlighted with Source Code Highlighter.

home-page-promo-02:

  

    

Extendable architecture

    
    

Just like other tools this tool can be extended with plugins.
    Currently available plugins include:

    
    

      
• circular
          makes an infinite loop from the Scrollable items so they
        continue cycling back to the beginning once the last item is reached.

      
•         href="http://flowplayer.org/tools/scrollable.html#autoscroll">autoscroll
          makes the scrolling behaviour automatic and is highly
        configurable.

      
•         href="http://flowplayer.org/tools/scrollable.html#navigator">navigator
          provides navigation buttons for switching between pages in
        Scrollable.

      
•         href="http://flowplayer.org/tools/scrollable.html#mousewheel">mousewheel
          enables mousewheel support for Scrollable.

    

    
    
    

You can also write       href="http://flowplayer.org/tools/using.html#plugins">your own
    plugins. Another way to alter the default behaviour is the ability to
    make your       href="http://flowplayer.org/tools/demos/scrollable/easing.html">own
    animation effects. There is lots of room for experimentation!

  

* This source code was highlighted with Source Code Highlighter.

home-page-promo-03:

  

    

Rich yet simple

    
    

      
• Horizontal and vertical scrolling.

      
• Scrolling using navigational buttons, API calls, keyboard
        arrow keys, and the mouse scroll wheel.

      
• The number of items scrolled at once is customizable.

      
• The navigational buttons are setup without a single line of
        JavaScript.

      
• Tabbed navigation like this one can be setup without any
        programming.

      
• Programmatic actions are available, such as: next,
        prev, nextPage, prevPage, seekTo,
        begin, and end.

      
• Dynamic addition and removal of Scrollable items.

      
• The ability to customize the scrolling experience with onBeforeSeek
        and onSeek listeners.

    

  

* This source code was highlighted with Source Code Highlighter.

Inside each element, you can place whatever your heart desires, i.e. any html markup. For example, in the live example at the end of the article, just images are used.

It's time to do css.

I will give my css table, while the code has comments:

/* 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;
}

/* Стиль -тега внутри закладки */
#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.

It's time to set up the jQuery library itself and its plugins. Go to System -> Configuration -> jQuery.

Set the value to Enabled to Yes. I recommend setting Minified and Gzipped to Yes as well (of course, if you do not plan to debug, if something goes wrong). There is also a wonderful item that will allow you to check the correctness of the installation of jQuery: jQuery functionality check. If you set it to Yes, then after saving the configuration and updating the store’s main page in the search field, you should see a new text. If this happens, it means that the jQuery library is installed and functioning correctly.

In order not to return to this item, set the jQuery Script1 block to Enabled in Yes and put the following code in jQuery-Code:

  // Выбираем #flowplanes и делаем его листаемым. Воспользуемся плагинами circular и navigator
  jQuery("#flowpanes").scrollable( {
    vertical : true, // укажем, что листать по вертикали
    size : 1, // количество одновременно видимых на экране страниц промо
    clickable : false
  // по клику мыши НЕ перемещаться на следующий элемент, т.к. нам нужно обеспечить корректность перехода в нужном нам направлении
      }).circular().mousewheel(400).navigator( {
    // для использования в качестве навигатора выберем блок с id #flowtabs
    navi : "#flowtabs",

    // укажем, что тег внутри навигатора должен использоваться как рабочий объект (а не непосредственные «дети» контейнера)
    naviItem : 'a',

    // укажем название класса "current" для активного тега в навигаторе
    activeClass : 'current'

  }).autoscroll( {
    // запускаем листание непосредственно при старте плагина
    autoplay : true,
    interval : 5000
  // указываем в миллисекундах интервал листания
      });

* This source code was highlighted with Source Code Highlighter.

Set the Ready parameter to Yes.

Now configure jQuery Tools (System -> Configuration -> jQuery Tools). Because I do not use any other plug-ins at the moment, except for Scrollable, then the library itself and the desired module remained active, I turned off all the others:

Flowplayer Enabled: No
jQuery-Tools Enabled: Yes
Minified and Gzipped: Yes

Tabs: No
Slideshow plugin: No
History plugin: No

Tooltip: No
Slide effect: No
Dynamic positioning plugin: No

Scrollable: Yes
Circular plugin: Yes
Autoscroll plugin: Yes
Navigator plugin: Yes
Mousewheel plugin: Yes

Overlay: No
Gallery plugin: No
Apple effect: No

Expose: No

Flashembed: No

Save changes in this section.

Now the last touch remains - display the strapping block on the main page. To do this, I took advantage of Magento's ability to change the page view settings. Go to CMS -> Page Management -> Home Page.

Actually, in the Content block we insert the call tag of the static block:

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

After that, if you haven’t made a mistake anywhere, on the first page you should see a block with a promo module, which not only is not inferior in appearance to a similar block on lookfantastic.com , but also In my opinion, due to the visible dynamics of movement, it even surpasses it.

Live all of the above works on http://lecompre.ru . I really hope that the server can stand it (this is a separate headache, the hands did not reach normal optimization). A huge request - the resource has recently been launched into swimming and is quite lively, so do not indulge particularly, please. Well, do not pay much attention to design: there is no money for a designer yet.

I will answer any questions with pleasure.

_________
The text is prepared in HabraRedaktor