AbleCommerce Shopping Cart Software

Posted: **Thu Dec 29, 2011 12:27 pm**

I'm trying to get javascript image slidershows to work in Ablecommerce.

The problem I'm running into is having to split the header away from the content. There are three types of sliders I've found, one where you reference the javascript entirely in the <head> which doesn't work for me assuming because AC is splitting the sections into parts. I.e. the <head> is contained within the Standard Header page and the actual images is contained within the Home Page page. Since it works in a standard HTML document just fine, I know the issue is with AC, perhaps because of this split I mention but really no clue.

The second type of slider is one that gets written immediately after the images in the content, so it is kept with the images in the Home Page page. This seems to work, but the actual slider I've found is not customizable so while it functions, it does not work aesthetically.

The third type of slider I've found is one where you call the javascript immediately before the closing <body> and this, like the header, doesn't seem to work because it is in a separate file than the images.

Please, if anyone knows how to get a slider working with AC I'd greatly appreciate any advice. I'm already behind since I've been working on this slider for two days, never used AbleCommerce before in my life and just had it thrown upon me, and getting extremely frustrated with the way the whole thing is set up. All I need is a basic, style-less slider that I can use three images of h-400px, w-1000px, to slider left. Simple, but no go anywhere I look and everything I try.

Thanks for any help.

Posted: **Thu Dec 29, 2011 1:12 pm**

Okay, so new question. How do you control your site's doctype in AC? I have determined that every slider I come across is using a different doctype than what AC is putting into my site. How do i change the doctype I'm using?

Posted: **Thu Dec 29, 2011 2:26 pm**

I use this one... http://nivo.dev7studios.com/

Posted: **Thu Dec 29, 2011 2:49 pm**

That's crazy. That was the first one i had in there when I built the site in static HTML. Once I brought it over to AC it stopped working completely because of the javascript in the header.

Posted: **Thu Dec 29, 2011 3:06 pm**

Try it again and remove this line...

Code: Select all

 script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script

That was what was giving me errors, I removed it and it works smashingly.

Posted: **Thu Dec 29, 2011 3:09 pm**

Thanks, crazyjoe. I'm not able to test right now but I will and see if that works.

Posted: **Fri Dec 30, 2011 2:46 pm**

It took me a little while to figure out how Able dealt with html <head>. If you are using the Scriptlet Editor in the Admin section, then put whatever needs to be between <head></head> in the box labelled "Header". If you like to edit pages in a text editor or IDE, then you need to make sure that the Scriptlet is layed out properly. At the top of the .htm scriptlet file, there is a section that looks like a little bit like this:

Code: Select all

<!--
<Description>

</Description>
<HeaderData>

</HeaderData>
-->

The default is to only have <Description>. Able's scriptlet editor puts whatever is in the "Header" box between the <HeaderData> tags, so if you are doing it all by hand, you'll have to include them yourself. In both cases, Able will automatically put whatever is between <HeaderData></HeaderData> in the <head> section when it loads the page.

In the code below, you can see where I have called the javascripts needed. I also use conditional stylesheets for certain versions of IE, so there is an example of that as well.

Code: Select all

<!--
<Description>
Displays the standard store header.
</Description>
<HeaderData>
<script type="text/javascript" src="https://www.google.com/jsapi?key=xxxxx"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/App_Themes/BarknPurr/nav-help.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!--[if lt IE 8]>
<link rel="stylesheet" href="/OtherStyles/styleie.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="/OtherStyles/styleie8.css" type="text/css" media="screen" />
<![endif]-->
</HeaderData>
-->

Also remember that you dont need any <html> or <body> tags for scriptlets, as the Able engine takes care of this for you. (Layout scriptlets might need <body>, not real sure. I have them in there, but I have custom styles on my <body>)

Posted: **Mon Jan 16, 2012 10:39 am**

Hey, Mouse. Thanks for that. I was already putting everything in the header inside the header area of the scriptlet. There was nothing in the body. So I think that's what I'm supposed to be doing. I actually got it to work. I think it was by Crazyjoe's way and deleting that one line of code from the HTML.

AbleCommerce Shopping Cart Software

How to get javascript image slideshows to work

How to get javascript image slideshows to work

Re: How to get javascript image slideshows to work

Re: How to get javascript image slideshows to work

Re: How to get javascript image slideshows to work

Re: How to get javascript image slideshows to work

Re: How to get javascript image slideshows to work

Re: How to get javascript image slideshows to work

Re: How to get javascript image slideshows to work