In the midst of creating an online store, using the Prestashop e-commerce shopping cart, I ran into a little error while using Cufon (which generates fonts & renders them in the browser with JavaScript). Using Cufon, at it’s very basic level (of replacing text with graphics), was fairly simple to set up in a Prestashop theme. However, when I went to enable the :hover option for a replaced element, with the normal code structure, the e-commerce site would load a blank page.
Normal usage:
<script type="text/javascript">
Cufon.set('fontFamily', 'Vintage');
Cufon.replace('h4');
Cufon.replace('h2 a', {
hover: true
});
</script>
I struggled with finding a solution to this last night. I tried removing the line breaks around hover:true, adding quotes around different areas, deleting the brackets, but nothing worked. Then, this morning, I decided to google the problem, and within minutes, I found the solution in the Prestashop forums. It was an ah-ha moment, when I found the solution. It was so simple, yet nothing I would have tried on my own…
The Solution: Surround the JavaScript code with {literal} tags.
Like so:
<script type="text/javascript">
{literal}
Cufon.set('fontFamily', 'Vintage');
Cufon.replace('h4');
Cufon.replace('h2 a', {
hover: true
});
{/literal}
</script>
← Previous post :: another way to import your blog posts in to your facebook profile
Next post :: Tina McAllister of TinaMcAllister.com →
{ 2 comments… read them below or add one }
I ‘ve test your tuto on my site but there is not any change.
My syntax is all right on a static site
I writed it for prestashop :
”
{literal}
Cufon.set(‘fontFamily’, ‘coffeeserv’);
Cufon.replace(‘div.block h4 a’ , {
hover: true
});
{/literal}
{$HOOK_HEADER}
”
Please help
@Amor you need to in close your code in
{literal}
CUFON CODE HERE
{/literal}