Installing NivoSlider with Xcart

terrajaponica · #1 03-15-2013, 08:40 AM

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.



	X-Cart forums © 2001-2020