3

Enabling :hover for Cufon in Prestashop

by Kayla on July 16, 2010 in techie geek code stuff

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 ::

Next post ::

{ 3 comments… read them below or add one }

1 Amor October 12, 2011 at 3:46 pm

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

2 ryan February 8, 2012 at 10:32 pm

@Amor you need to in close your code in
{literal}

CUFON CODE HERE

{/literal}

3 prestashop order email notification August 6, 2013 at 7:24 am

Am also have the same problem regarding to prestashop,now i got the idea how to work with this concept,thanks for sharing your information.

Leave a Comment