AJAX based flash/gif banner rotetor

anandat · #1 03-07-2009, 06:27 AM

Guys,
Since many days I was looking for banner system for x-cart which should support flash. I tried many free php scripts but non of them worked with flash support in x-cart.

I found open source ajax based javascript from dynamicdrive.com ( http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm ) which runs fine in x-cart to display banners & good thing is that as it's ajax based the new flash/gif banners are loaded without page refresh as per time set by you.

Following steps I did & manage to display banners in my x-cart's main page (welcome.tpl)

Step1
----------
create folder "flash" in skin1 directory

Open home.tpl & enter following code just before </head> tag

Code:

<script src="/your-store-directory/skin1/flash/ajaxticker.js" type="text/javascript">

/***********************************************
* Ajax Ticker script (txt file source)- ╘ Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

Note: you can put ajaxticker.js on any directory on your sever. But make sure you give proper path on above code.

Step2 (optional)
----------
Open Skin1.css & at end put

Code:

/#ajaxticker1{
width: 466px;
height: 60px;
border: 1px ridge black;
padding: 5px;
background-color: #FEEEB8;
}

#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
background-color: #FEEEB8;
}

.someclass{ //class to apply to your scroller(s) if desired

}

Note: you need to follow above step if you want to run this as ticker system & not banner roteting system. Don't forget to define width & height as per your requirement

Step3
----------
Open welcome.tpl & after the tag {$lng.txt_welcome} paste

Code:

 {literal}<script type="text/javascript">

var xmlfile="/your-store-directory/skin1/flash/tickercontent.txt" //path to ticker txt file on your server.

//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", 25000, "fade")
</script>{/literal}

Note: you can increase/decrease value of default time "25000" as per your need to load next banner
Step 4
------------
Save ajaxticker.js file & tickercontent.txt files in the folder skin1/flash/ folder

Step 5
----------
I have put 2 sample flash banners code in file tickercontent.txt. You should place your flash banner code between tag <div class="message"> </div>. You can save your swf files in skin1/flash folder or any directory at your web site but make sure to give proper path else banner will not display.

For more info about how exatly above code works please visit http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm

I have not tried but I guess you can display random products also using this code.

Any idea from other members to improve this code is always welcome

minfinger · #2 05-20-2010, 02:42 AM

Will this work in 4.3?

anandat · #3 05-20-2010, 08:45 PM

Hi minfinger,
Sorry I haven't tested in 4.3 but I guess it should work in 4.3 without any problem.

minfinger · #4 05-21-2010, 02:27 AM

The head.tpl doesn't have a </head> in it.

I stopped there because I didn't want to screw up the files.

Shamun · #5 05-21-2010, 02:32 AM

Quote:

Originally Posted by minfinger

The head.tpl doesn't have a </head> in it.

I stopped there because I didn't want to screw up the files.

Don't worry, just toss it in there and it should work

minfinger · #6 05-21-2010, 12:41 PM

OK I can't get it to work right. This isn't terribly confusing, but I just can't get it to show up.

Here's my head.tpl (I did have the code at the bottom and it didn't work there either)

Code:

{*
$Id: head.tpl,v 1.20 2009/06/05 11:46:27 joy Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
<div class="line1">
  <script src="{$SkinDir}/hr.js" type="text/javascript"></script>
  <div class="logo">
    <div class=logo1">
<script src="{$SkinDir}/flash/ajaxticker.js" type="text/javascript">
/***********************************************
* Ajax Ticker script (txt file source)- ╘ Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
    </div>
  </div>
  {include file="customer/tabs.tpl"}
</div>
<div  class="line2">
  {if $main ne "fast_lane_checkout"}
    {include file="customer/language_selector.tpl"}
  {else}
    {include file="modules/Fast_Lane_Checkout/head.tpl"}
  {/if}
</div>
{if $categories_menu_list}
  <div class="top-categories">
    <div class="hor-categories">
      <ul id="hr_list">
        {foreach from=$categories_menu_list item=c}
          <li><a href="home.php?cat={$c.categoryid}" title="{$c.category|escape}">{$c.category}</a></li>
        {/foreach}
      </ul>
    </div>
    <div class="more-categories" onmouseover="javascript: hrMenuShow('cat_list');" onmouseout="javascript: hrMenuHide('cat_list');">
      <a href="javascript:void(0);"><img id="menu_more" src="{$ImagesDir}/custom/menu_more.gif" alt="" /></a>
        <ul id="hr_menu" style="display: none;">
          <li>&nbsp;</li>
        </ul>
    </div>
  </div>
{/if}
{include file="customer/noscript.tpl"}

Here's my welcome.tpl

Code:

{*
$Id: welcome.tpl,v 1.33 2008/10/30 17:57:31 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{if $display_greet_visitor_name}
  <h1>{$lng.lbl_welcome_back|substitute:"name":$display_greet_visitor_name} </h1>
{elseif $lng.lbl_site_title}
  <h1>{$lng.lbl_welcome_to|substitute:"company":$lng.lbl_site_title}</h1>
{else}
  <h1>{$lng.lbl_welcome_to|substitute:"company":$config.Company.company_name}</h1>
{/if}
{$lng.txt_welcome}<br />
 {literal}<script type="text/javascript">
var xmlfile="http://littlepuppiesonline.msidesigns.com/skin1/flash/tickercontent.txt" //path to ticker txt file on your server.
//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", 25000, "fade")
</script>{/literal}
{if $active_modules.Bestsellers && $config.Bestsellers.bestsellers_menu ne "Y"}
  {include file="modules/Bestsellers/bestsellers.tpl"}<br />
{/if}
{include file="customer/main/featured.tpl"}

Here's the tickercontent.txt file. I just want it to rotate the jpgs

Code:

<!--Wrap each ticker cotent inside <div class="message"> tag -->

<div class="message">
<a href="http://littlepuppiesonline.msidesigns.com/"><img src="http://littlepuppiesonline.msidesigns.com/skin1/flash/banner1.jpg"></a></div>

<div class="message">
<a href="http://littlepuppiesonline.msidesigns.com/"><img src="http://littlepuppiesonline.msidesigns.com/skin1/flash/banner2.jpg"></a></div>

<div class="message">
<a href="http://littlepuppiesonline.msidesigns.com/"><img src="http://littlepuppiesonline.msidesigns.com/skin1/flash/banner3.jpg"></a></div>

<div class="message">
<a href="http://littlepuppiesonline.msidesigns.com/"><img src="http://littlepuppiesonline.msidesigns.com/skin1/flash/banner4.jpg"></a></div>

<div class="message">
<a href="http://littlepuppiesonline.msidesigns.com/"><img src="http://littlepuppiesonline.msidesigns.com/skin1/flash/banner5.jpg"></a></div>

<div class="message">
<a href="http://littlepuppiesonline.msidesigns.com/"><img src="http://littlepuppiesonline.msidesigns.com/skin1/flash/banner6.jpg"></a></div>

<div class="message">
<a href="http://littlepuppiesonline.msidesigns.com/"><img src="http://littlepuppiesonline.msidesigns.com/skin1/flash/banner7.jpg"></a></div>

minfinger · #7 05-21-2010, 01:38 PM

I did build it as a simple HTML file and it worked locally on my PC.

Shamun · #8 05-21-2010, 01:43 PM

Try moving the script include from the head.tpl to meta.tpl

Also, check with firebug to see if its loading but just not on the page.

anandat · #9 05-21-2010, 11:17 PM

Quote:

Originally Posted by minfinger

I did build it as a simple HTML file and it worked locally on my PC.

Shamun · #10 05-21-2010, 11:25 PM

<head> stuff is in meta.tpl for 4.3