Using Jquery Cycle Plug-In for Welcome Image

lLAVISH · #1 04-29-2010, 08:53 AM

Hi everyone, I'm new to X-Cart and I'm trying to understand the system. I'm building a site starting from the Green Fashion Mosaic Template and I have a question about adding in a lightweight function to cycle promotional images in the place of the large welcome page image.

To achieve this on a regular site I would normally just implement the JQuery Cycle All plug-in (http://plugins.jquery.com/project/cycle) which is a very lightweight solution for creating a rotating image gallery, and then just create a container div with a class name used to trigger the cycle function. All of the images within that div would automatically be rotated through. Here's a simple demo - http://jquery.malsup.com/cycle/basic.html.

I am just so new to X-Cart that I don't even know which tpl files control the customer side header content on the homepage. I need to get into that file to link to the JQuery repository via Google Libraries, and call the plug in files on my server. I guess that I would also need to modify the template file that controls the welcome page as well. It looks like that image is just positioned inside of the welcome-top div so I would need to either add a new class for the images or rotate all images in the welcome-top div. Either way, this looks like it is very possible.

I' m just trying to be very careful not to royally screw anything up on the site otherwise I would just dig in and start experimenting. X-Cart has been a little tough to navigate so far. It seems as though the new version is very bloated with multiple style sheets that contain the same styles and so many space hogging scheme files, but it is also seems very powerful once you learn it top to bottom.

If anyone can point me in the right direction it would be greatly appreciated. Thank You!

cflsystems · #2 04-29-2010, 11:53 AM

Start here
http://forum.x-cart.com/showthread.php?t=21529
http://forum.x-cart.com/showthread.php?t=8881
http://forum.x-cart.com/showthread.php?t=20303&highlight=million+times

Even though these threads are old and not for your cart version they still can help you a lot.

In 4.3.x all customer side templates are in skin1/customer. Header is in head.tpl, <head> section is in home.tpl

lLAVISH · #3 04-29-2010, 04:47 PM

Thanks for the help!

The information is very helpful. I'll post a link to the finished product when I'm done.

lLAVISH · #4 05-07-2010, 11:24 AM

So far I've had no luck with this.

Here's what I've done so far.

1. Created a directory on the server for promos with sub-folders for scripts and images.

2. I went into customer/home.tpl and added this code between the head tags:

-Calling jQuery via google and the plug in file on the server
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://lookinglavish.com/promos/scripts/jquery.cycle.all.2.72.js"></script>

-Firing the jQuery function
<script type="text/javascript">
$(document).ready(function(){
$('.welcome-top').cycle({
fx: 'fade'
});
});
</script>

3. Added 2 images into customer/main/welcome.tpl

-I've only pasted the top part of the file where the images were added.

<div class="welcome-top">
<img src="promos/images/may10/may10_1.jpg" class="welcome" alt="" />
<img src="promos/images/may10/may10_2.jpg" class="welcome" alt="" />
{if $categories && ($active_modules.Flyout_Menus || $config.General.root_categories eq "Y" || $subcategories)}
{include file="customer/categories.tpl" }
{else}
<img src="{$ImagesDir}/spacer.gif" alt="" class="empty-height-extender" />
{/if}
</div>

The images are showing up but the cycle function is not firing up and I'm getting the following error:

Error: Smarty error: [in customer/home.tpl line 19]: syntax error: unrecognized tag: $('.welcome-top').cycle({fx: 'fade' (Smarty_Compiler.class.php, line 446) in lookinglavish.com/include/lib/smarty/Smarty.class.php on line 1093

I don't have a lot of experience with PHP or smarty templates so I'm not sure what the problem is. I am guessing that the JS code calling the cycle function is trying to processed by smarty and there's a conflict because the tag is similar to smarty format or something along those lines?

Here's the site: http://lookingLAVISH.com

joncampbell · #5 05-07-2010, 11:50 AM

I am pretty sure you should put some literal tags around your js. Not sure if that will fix everything but thats one problem.

<script type="text/javascript">
{literal}
$(document).ready(function(){
$('.welcome-top').cycle({
fx: 'fade'
});
});
{/literal}
</script>

lLAVISH · #6 05-07-2010, 12:15 PM

That did it! Thanks a lot.

BBM_ · #7 08-27-2010, 02:17 AM

I am attempting to do the same as ILAVISH above and have completed all the steps as per the above but the images appear in a line down the page.

It would appear that the cycle function is not starting, yet i have no errors being generated.

EDIT: I have hidden the other images using overflow:hidden in the css file but still can not get it to start?

Here is my code for reference.

From home.tpl

HTML Code:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1/xcart/promos/scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
{literal}
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' 
    });
});
{/literal}
</script>
 </head>

and from welcome.tpl

HTML Code:

<div class="slideshow">
        <img src="http://127.0.0.1/xcart/promos/images/LandingA.jpg" width="500" height="334" class="first" />
        <img src="http://127.0.0.1/xcart/promos/images/LandingB.jpg" width="500" height="334" />
        <img src="http://127.0.0.1/xcart/promos/images/LandingA.jpg" width="500" height="334" />
        <img src="http://127.0.0.1/xcart/promos/images/LandingB.jpg" width="500" height="334" />
        </div>

Any suggestions would be appreciated.

BBM_ · #8 08-31-2010, 12:46 AM

If i remove the literal tags and place this in a blank file the code works fine, yet adding in literal fails to start the script.

Any suggestions?

Fixed!

I moved the java script to an external file and called it via the header.