X-Cart forums - Adding Javascript to the frontpage

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Adding Javascript to the frontpage (https://forum.x-cart.com/showthread.php?t=58073)

Adding Javascript to the frontpage

So I found this image slideshow and it works well with what my client wants.
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I've got it running in a stand alone HTML file, but when I started adding it to the welcome.tpl things went wrong. The Category.tpl displays and so does my Facebook Like button, but the slide show is a no show :?

Anyway here's the basis of the code in the HTML file.

This portion is supposed to go above the </head> which I placed in my service_head.tpl file.

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



<script type="text/javascript" src="fadeslideshow.js">



/***********************************************

* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

***********************************************/



</script>



<script type="text/javascript">





var mygallery1=new fadeSlideShow({

    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

    dimensions: [480, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image

    imagearray: [

        ["images/Apples.jpg", "", "", "Creative Additions to the Classic Candy Apple"],

        ["images/Chocolate_Covered_Potato_Chips.jpg", "", "", "Making Chocolate Covered Potato Chips"],

        ["images/Party_Room.jpg", "", "", "Celebrate Your Birthday or Special Occasion With The Peanut Man"],

        ["images/Strawberries.jpg", "", "", "Beautiful Fresh Strawberries Dipped in Chocolates"],

        ["images/Popcorn.jpg", "", "", "Stop By for Freshly Popped Popcorn Everyday"],

        ["images/Gift_Backets.jpg", "", "", "Custom Made Gift Baskets For Your Friends or Your Employees"],

        ["images/Chocolate_Covered_Pecan_Clusters.jpg", "", "", "Order Your Pecans Any Way You Like Them"],

        ["images/Peanut_Girl.jpg", "", "", "Children Enjoy Picking Through Our Traditional and Custom Candies"]

         //<--no trailing comma after very last image element!

    ],

    displaymode: {type:'auto', pause:3800, cycles:0, wraparound:false, randomize:true},

    persist: true, //remember last viewed slide and recall within same session?

    fadeduration: 500, //transition duration (milliseconds)

    descreveal: "always",

    togglerid: ""

})



</script>

This is the portion of the HTML that displays the slideshow and the other things I want on the welcome page.

Code:

<table width="600" border="0" cellspacing="0" cellpadding="1">

  <tr>

    <td rowspan="3">{include file="customer/categories.tpl"}</td>

    <td colspan="2"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

        <fb:like href="http://www.facebook.com/#!/pages/Savannahs-Candy-Kitchen/173098054471" show_faces="false" width="450" float: center></fb:like></td>

  </tr>

  <tr>

    <td><div id="fadeshow1">    </div></td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

</table>

I know I should be using {literal} in a few places, I'm just not sure. And it's late, I'm tired :D

Thanks,
Mike

Re: Adding Javascript to the frontpage

The googleapis should already be included in meta.tpl or meta_css.tpl. Including multiple jQuery versions will produce silent errors.
Fadeslideshow should be in root skin and referenced in meta.tpl or meta_js.tpl

There </script> after the comments is unneeded, and so is the opening script afterwards. Move the opening script up to above the comments and throw literals in it.

Code:

<script type="text/javascript">

{literal}

/***********************************************

* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

***********************************************/



var mygallery1=new fadeSlideShow({

    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

    dimensions: [480, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image

    imagearray: [

        ["images/Apples.jpg", "", "", "Creative Additions to the Classic Candy Apple"],

        ["images/Chocolate_Covered_Potato_Chips.jpg", "", "", "Making Chocolate Covered Potato Chips"],

        ["images/Party_Room.jpg", "", "", "Celebrate Your Birthday or Special Occasion With The Peanut Man"],

        ["images/Strawberries.jpg", "", "", "Beautiful Fresh Strawberries Dipped in Chocolates"],

        ["images/Popcorn.jpg", "", "", "Stop By for Freshly Popped Popcorn Everyday"],

        ["images/Gift_Backets.jpg", "", "", "Custom Made Gift Baskets For Your Friends or Your Employees"],

        ["images/Chocolate_Covered_Pecan_Clusters.jpg", "", "", "Order Your Pecans Any Way You Like Them"],

        ["images/Peanut_Girl.jpg", "", "", "Children Enjoy Picking Through Our Traditional and Custom Candies"]

         //<--no trailing comma after very last image element!

    ],

    displaymode: {type:'auto', pause:3800, cycles:0, wraparound:false, randomize:true},

    persist: true, //remember last viewed slide and recall within same session?

    fadeduration: 500, //transition duration (milliseconds)

    descreveal: "always",

    togglerid: ""

})

{/literal}

</script>

Re: Adding Javascript to the frontpage

OK wait.

I put this in the skin1\customer\meta.tpl

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="{$SkinDir}/fp_images/fadeslideshow.js"></script>

Is there a way to turn "/demos/xcart/skin1" into {$SkinDir} that's in the javascript?

Code:

{*

+----------------------------------------------------------------------+

Front Page

+----------------------------------------------------------------------+

*}

<script type="text/javascript">

{literal}

var mygallery1=new fadeSlideShow({

    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

    dimensions: [480, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image

    imagearray: [

        ["/demos/xcart/skin1/fp_images/images/Apples.jpg", "", "", "Creative Additions to the Classic Candy Apple"],

        ["/demos/xcart/skin1/fp_images/images/Chocolate_Covered_Potato_Chips.jpg", "", "", "Making Chocolate Covered Potato Chips"],

        ["/demos/xcart/skin1/fp_images/images/Party_Room.jpg", "", "", "Celebrate Your Birthday or Special Occasion With The Peanut Man"],

        ["/demos/xcart/skin1/fp_images/images/Strawberries.jpg", "", "", "Beautiful Fresh Strawberries Dipped in Chocolates"],

        ["/demos/xcart/skin1/fp_images/images/Popcorn.jpg", "", "", "Stop By for Freshly Popped Popcorn Everyday"],

        ["/demos/xcart/skin1/fp_images/images/Gift_Backets.jpg", "", "", "Custom Made Gift Baskets For Your Friends or Your Employees"],

        ["/demos/xcart/skin1/fp_images/images/Chocolate_Covered_Pecan_Clusters.jpg", "", "", "Order Your Pecans Any Way You Like Them"],

        ["/demos/xcart/skin1/fp_images/images/Peanut_Girl.jpg", "", "", "Children Enjoy Picking Through Our Traditional and Custom Candies"]

         //<--no trailing comma after very last image element!

    ],

    displaymode: {type:'auto', pause:3800, cycles:0, wraparound:false, randomize:true},

    persist: true, //remember last viewed slide and recall within same session?

    fadeduration: 500, //transition duration (milliseconds)

    descreveal: "always",

    togglerid: ""

})

{/literal}

</script>

<table width="600" border="0" cellspacing="0" cellpadding="1">

  <tr>

    <td rowspan="3">asdfasdfasdf</td>

    <td colspan="2"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

        <fb:like href="http://www.facebook.com/#!/pages/Savannahs-Candy-Kitchen/173098054471" show_faces="false" width="450" float: center></fb:like></td>

  </tr>

  <tr>

    <td><div id="fadeshow1">    </div></td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

</table>

Re: Adding Javascript to the frontpage

If /demos/xcart/skin1 is {$SkinDir} and you need to use that in the JS, you can do this:

Code:

<script type="text/javascript">

{literal}

var mygallery1=new fadeSlideShow({

    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

    dimensions: [480, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image

    imagearray: [

{/literal}

        ["{$SkinDir}/fp_images/images/Apples.jpg", "", "", "Creative Additions to the Classic Candy Apple"],

        ["{$SkinDir}/fp_images/images/Chocolate_Covered_Potato_Chips.jpg", "", "", "Making Chocolate Covered Potato Chips"],

        ["{$SkinDir}/fp_images/images/Party_Room.jpg", "", "", "Celebrate Your Birthday or Special Occasion With The Peanut Man"],

        ["{$SkinDir}/fp_images/images/Strawberries.jpg", "", "", "Beautiful Fresh Strawberries Dipped in Chocolates"],

        ["{$SkinDir}/fp_images/images/Popcorn.jpg", "", "", "Stop By for Freshly Popped Popcorn Everyday"],

        ["{$SkinDir}/fp_images/images/Gift_Backets.jpg", "", "", "Custom Made Gift Baskets For Your Friends or Your Employees"],

        ["{$SkinDir}/fp_images/images/Chocolate_Covered_Pecan_Clusters.jpg", "", "", "Order Your Pecans Any Way You Like Them"],

        ["{$SkinDir}/fp_images/images/Peanut_Girl.jpg", "", "", "Children Enjoy Picking Through Our Traditional and Custom Candies"]

         //<--no trailing comma after very last image element!

    ],

{literal}

    displaymode: {type:'auto', pause:3800, cycles:0, wraparound:false, randomize:true},

    persist: true, //remember last viewed slide and recall within same session?

    fadeduration: 500, //transition duration (milliseconds)

    descreveal: "always",

    togglerid: ""

})

{/literal}

</script>

Re: Adding Javascript to the frontpage

Great thanks, working perfect!