Integration is so easy! But...

Hello!

I have a bit of experience with HTML, Javascript and CSS, so I thought I would give integration a go.

To many smiles - after a few CSS tweaks, additions and some coding - I got the header and footer all done.

There are two outstanding issues, both of which I have tried to fix extensively - to no success.

My site design uses Cufon font replacement for it's h1 - h5 and superfish dropdown menus. WHMCS throws a white page at me when I try to use add some Javascript code.

This is Javascript code, I need to put in to header.tpl:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script><!-- (cufn) Font Replacement --> 
<script type="text/javascript" src="font/cufon-yui.js"></script> 
<script type="text/javascript" src="font/vegur_400-vegur_700.font.js"></script><!-- Superfish Menu--> 
<script type="text/javascript" src="js/superfish.js"></script> 
<script type="text/javascript" src="js/hoverIntent.js"></script> 
<script type="text/javascript"> 	jQuery(function(){	jQuery('ul.sf-menu').superfish();	Cufon.replace('h1, h2, h3, h4, h5, .sf-menu, .subheader_right p', {	hover: true})	});</script><!-- Prettyphoto--> 
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
<script type="text/javascript" charset="utf-8"> 		$(document).ready(function(){			$("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_square'});		});</script>

This is the Javascript code I have in now (WHMCS accepts it):

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script><!-- (cufn) Font Replacement --> 
<script type="text/javascript" src="font/cufon-yui.js"></script> 
<script type="text/javascript" src="font/vegur_400-vegur_700.font.js"></script>
<!-- Superfish Menu--> 
<script type="text/javascript" src="js/superfish.js"></script> 
<script type="text/javascript" src="js/hoverIntent.js"></script> 
<!-- Prettyphoto--> 
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 

But, as soon as I add the essential:

<script type="text/javascript"> 	jQuery(function(){	jQuery('ul.sf-menu').superfish();	Cufon.replace('h1, h2, h3, h4, h5, .sf-menu, .subheader_right p', {	hover: true})	});</script><!-- Prettyphoto--> 
<script type="text/javascript" charset="utf-8"> 		$(document).ready(function(){			$("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_square'});		});</script>[

WHMCS throws a white page at me. This means that nothing works. ><

Without the last essential code, the dropdown menus fail to work and Cufon fails to render.

Is there code deep-down in WHMCS preventing my dreams of a somewhat beautiful WHMCS integration?

A member over at WebHostingTalk (SimplexWebs-Rob) fixed it! I'd thought I would share it with those who experience a similar issue.

I had this issue when I first got into WHMCS integrations.

Its to do with the inner workings of the SMARTY templating system.

It is however easy to solve. You just need to wrap {literal} {/literal} tags around your block of javascript code.

 

Example:

{literal}
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script><!-- (cufn) Font Replacement --> 
<script type="text/javascript" src="font/cufon-yui.js"></script> 
<script type="text/javascript" src="font/vegur_400-vegur_700.font.js"></script><!-- Superfish Menu--> 
<script type="text/javascript" src="js/superfish.js"></script> 
<script type="text/javascript" src="js/hoverIntent.js"></script> 
<script type="text/javascript"> 	jQuery(function(){	jQuery('ul.sf-menu').superfish();	Cufon.replace('h1, h2, h3, h4, h5, .sf-menu, .subheader_right p', {	hover: true})	});</script><!-- Prettyphoto--> 
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
<script type="text/javascript" charset="utf-8"> 		$(document).ready(function(){			$("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_square'});		});</script>
{/literal}

 

The same can be done if you wish to include PHP, by using the {php} tags.

place {literal} ... {/literal} tags aroung the script code