Dynamic promo in Magento
Disclaimer: this article is not intended for "bison". Its main audience is novice web-masters who have a desire to do everything “grown-up”, but not always enough ideas on how to do it.
So, it all started with the fact that I wanted to somehow revive the first page of my store, which I designed, and also to get a normal tool for presenting important promotions, goods, etc.
In “big” stores like http://www.lookfantastic.com/ a beautiful block is made, in which these most dynamic promo are presented.
Of course, first of all I rushed to dig MagentoConnect for ready-made modules, but I found only Teaserbox , which absolutely did not suit me: firstly, flash, secondly, you can only advertise goods (you can only go to the product description), and - third, vague buttons, on which, moreover, the inscriptions in Russian were not displayed.
')
Just at that time, I came across a message that a free Magento module from Mxperts appeared, which allowed you to connect jQuery Tools . Before that, I did not come across jQuery Tools, so it’s useful to see what it is. To say that I was fascinated by the possibilities of the library is to say nothing. Of course, the idea immediately earned in the direction of the implementation of my idea with the help of a new tool.
I was too lazy to write and debug a full-fledged module, so there was no time, so I did everything in a hurry, but the decision is quite working and, with a rare change of promotions, is completely entitled to life.
So. We assume that you have already installed and configured a Magento-based store. I will give the titles of sections in the admin panel in Russian, the localization unit 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 . Immediately I warn you: in the version that now lies on MagentoConnect (1.2.5 from 09.10.2009), there is an error. You need to download the circular plugin from the original jQuery Tools website (tools.scrollable.circular-0.5.1.js and tools.scrollable.circular-0.5.1.min.js files) and replace them with the versions that will be installed after installing the modules in the / js / jquery / jquerytools /.
The jQuery Tools website provides very detailed and very clear documentation , so I will not mention the basics. The bottom line is that we need to create a control structure and blocks that will be directly responsible for the “pages” of promo.
To do this, we create a static CMS block in the admin panel, which will be responsible for the binding (CMS -> Static blocks, click the button “Add new block”):
Call the block so that it is convenient, set the identifier, for example, home-page-promo, set the status to Enabled and save. As can be seen from the code, here we have described the bookmarks (shortcuts) of the system for navigating through the pages of promo and page binding.
Next, create promotional pages (as you can guess from the text, the identifiers will be home-page-promo-XX).
home-page-promo-01:
home-page-promo-02:
home-page-promo-03:
Inside each element, you can place whatever your heart desires, i.e. any html markup. For example, in the live example given 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:
It's time to set up the jQuery library itself and the plugins for it. Go to System -> Configuration -> jQuery.
Set the value to Enabled in Yes. I recommend putting Minified and Gzipped in Yes as well (of course, if you don’t plan on debugging, if something goes wrong). There is also a wonderful point that allows you to verify the correctness of the jQuery installation: jQuery functionality check. If you set it to Yes, then after saving the configuration and updating the store's main page, you should see the new text in the search field. If this happens, then the jQuery library is installed and functioning correctly.
In order not to return to this item, set the jQuery Script1 block status to Enabled in Yes and place the following code in jQuery-Code:
Set the Ready parameter to Yes.
Now we’ll configure jQuery Tools (System -> Configuration -> jQuery Tools). Because I do not currently use any other plug-ins except Scrollable, then the library itself and the required module remained active, I turned off all the rest:
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 the changes in this section.
Now there is the final touch - to bring the binding unit to the main page. For this purpose, I took advantage of Magento's options for changing the page view settings. Go to CMS -> Manage Pages -> Home Page.
Actually, in the Content block we insert the call tag of a static block:
After that, if you have never made a mistake anywhere, you should see a block with a promotional module on the first page, which not only is not inferior to an externally similar block on lookfantastic.com , but, in my opinion, due to the visible movement dynamics even surpasses it.
Live all of the above works on http://lecompre.ru . I really hope that the server will endure (this is a separate headache, the hands never reached the normal optimization). Huge request - the resource is recently launched and quite lively, so don’t indulge too much, please. Well, and do not pay much attention to design: there is no money for a designer yet.
I will answer any questions with pleasure.
_________
The text was prepared in Habra Editor
So, it all started with the fact that I wanted to somehow revive the first page of my store, which I designed, and also to get a normal tool for presenting important promotions, goods, etc.
In “big” stores like http://www.lookfantastic.com/ a beautiful block is made, in which these most dynamic promo are presented.
Of course, first of all I rushed to dig MagentoConnect for ready-made modules, but I found only Teaserbox , which absolutely did not suit me: firstly, flash, secondly, you can only advertise goods (you can only go to the product description), and - third, vague buttons, on which, moreover, the inscriptions in Russian were not displayed.
')
Just at that time, I came across a message that a free Magento module from Mxperts appeared, which allowed you to connect jQuery Tools . Before that, I did not come across jQuery Tools, so it’s useful to see what it is. To say that I was fascinated by the possibilities of the library is to say nothing. Of course, the idea immediately earned in the direction of the implementation of my idea with the help of a new tool.
I was too lazy to write and debug a full-fledged module, so there was no time, so I did everything in a hurry, but the decision is quite working and, with a rare change of promotions, is completely entitled to life.
So. We assume that you have already installed and configured a Magento-based store. I will give the titles of sections in the admin panel in Russian, the localization unit 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 . Immediately I warn you: in the version that now lies on MagentoConnect (1.2.5 from 09.10.2009), there is an error. You need to download the circular plugin from the original jQuery Tools website (tools.scrollable.circular-0.5.1.js and tools.scrollable.circular-0.5.1.min.js files) and replace them with the versions that will be installed after installing the modules in the / js / jquery / jquerytools /.
The jQuery Tools website provides very detailed and very clear documentation , so I will not mention the basics. The bottom line is that we need to create a control structure and blocks that will be directly responsible for the “pages” of promo.
To do this, we create a static CMS block in the admin panel, which will be responsible for the binding (CMS -> Static blocks, click the button “Add new block”):
< 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 .Call the block so that it is convenient, set the identifier, for example, home-page-promo, set the status to Enabled and save. As can be seen from the code, here we have described the bookmarks (shortcuts) of the system for navigating through the pages of promo and page binding.
Next, create promotional pages (as you can guess from the text, the identifiers will be 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 .Inside each element, you can place whatever your heart desires, i.e. any html markup. For example, in the live example given 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;
}
/* < 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 .It's time to set up the jQuery library itself and the plugins for it. Go to System -> Configuration -> jQuery.
Set the value to Enabled in Yes. I recommend putting Minified and Gzipped in Yes as well (of course, if you don’t plan on debugging, if something goes wrong). There is also a wonderful point that allows you to verify the correctness of the jQuery installation: jQuery functionality check. If you set it to Yes, then after saving the configuration and updating the store's main page, you should see the new text in the search field. If this happens, then the jQuery library is installed and functioning correctly.
In order not to return to this item, set the jQuery Script1 block status to Enabled in Yes and place 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" ,
// , <a> ( «» )
naviItem : 'a' ,
// "current" <a>
activeClass : 'current'
}).autoscroll( {
//
autoplay : true ,
interval : 5000
//
});
* This source code was highlighted with Source Code Highlighter .Set the Ready parameter to Yes.
Now we’ll configure jQuery Tools (System -> Configuration -> jQuery Tools). Because I do not currently use any other plug-ins except Scrollable, then the library itself and the required module remained active, I turned off all the rest:
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 the changes in this section.
Now there is the final touch - to bring the binding unit to the main page. For this purpose, I took advantage of Magento's options for changing the page view settings. Go to CMS -> Manage Pages -> Home Page.
Actually, in the Content block we insert the call tag of a static block:
{{block type="cms/block" block_id="home-page-promo"}}After that, if you have never made a mistake anywhere, you should see a block with a promotional module on the first page, which not only is not inferior to an externally similar block on lookfantastic.com , but, in my opinion, due to the visible movement dynamics even surpasses it.
Live all of the above works on http://lecompre.ru . I really hope that the server will endure (this is a separate headache, the hands never reached the normal optimization). Huge request - the resource is recently launched and quite lively, so don’t indulge too much, please. Well, and do not pay much attention to design: there is no money for a designer yet.
I will answer any questions with pleasure.
_________
The text was prepared in Habra Editor
Source: https://habr.com/ru/post/76743/
All Articles