Hi,
I recently did a little modification on my shop
terrajaponica.com (timer is on a 8000ms basis, sorry) that might interest somebody.
I found my UI not fancy enough and having text in the banner picture absolutely not SEO friendly.
So I wanted to integrate NivoSlider on a 4.5.4 installation.
This is how I did it and if a guru can make it better it's welcome, but as it is right now, it works on every platform.
I will use the Default skin on a copy of Books&Magazines template.
0-Work on your local copy!!!!! I cannot be liable for you messing up your site.
Also use a versioning tool so that you will easily know which files to upload once you are done with your job (just make a diff patch or whatever).
1-Download
NivoSlider
2-Check the policy and make sure you comply or if ever you have to pay for your usage or not.
3-Make a folder at [httpdocs\skin\common_files] called "nivoslider"
4-Copy the files from the package into it following this structure:
[EDIT: style.css is not necessary]
5-In the nivoslider folder, create "load.js" and paste in:
$('#slider').nivoSlider($(this));
$(document).ready(function() {
$('#slider').nivoSlider();
});
6-Go to httpdocs\skin\{your copy of Book&Magazines}\customer\home.tpl and add:
<link rel="stylesheet" href="{$SkinDir}/nivoslider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{$SkinDir}/nivoslider/themes/default/default.css" type="text/css" media="screen" />
just after the <head>
and
<script type="text/javascript" src="{$SkinDir}/nivoslider/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="{$SkinDir}/nivoslider/load.js"></script>
just before the </body>
7- Go to httpdocs\skin\{your copy of Book&Magazines}\customer\main\welcome.tpl and replace the banner picture by the <div> section provided in the demo file.
8- Edit the img tags like this:
src="{$AltImagesDir}/custom/nivoslider/1.jpg" ...
9- Put the pictures you want into the folder httpdocs\skin\{your copy of Book&Magazines}\images\custom\nivoslider\
following the obvious pattern 1.jpg, 2.jpg...
10- Normally it should be good to go but there are 2 big errors due to jquery being outdated on xcart. I tried to update but it messes up everything. Instead, replace in jquery.nivo.slider.js all the instances of ".on(" with ".live(" which is the former syntax.
11- At line 356 there is a random effect function that is also incompatible with older jquery. I did not bother fixing it, I just removed it all, so erase or fix that:
// Run random effect from specified set (eg: effect:'fold,fade')
if(settings.effect.indexOf(',') !== -1){
anims = settings.effect.split(',');
currentEffect = anims[Math.floor(Math.random()*(anims.length))];
if(currentEffect === undefined) { currentEffect = 'fade'; }
}
12- It should work! Just put your text into localized variables so that it switches when you change language and you are good to go
13- A bit of CSS magic powder to make the size match and the text pretty as you wish it to look like.
14- also, read this
thread to make it look better during page loading (overflow part)
15- best, for people who know what they are doing is to declare css in service-css file and put it in commonfiles' css so that it's serialized with the whole CSS avoiding one extra http connection. but for most it's over-engineering.