NemoPS » rich snippets

FREE Prestashop Google Rich Snippets & Breadcumbs module!!

Nemo — Mon, 28 Apr 2014 09:58:12 +0000

It’s not a joke. I just released the very first, completely FREE, Google Rich Snippets and Breadcrumbs module for Prestashop! Download it right away!

If you’ve been struggling with your Prestashop 1.5 theme to get Google Rich snippets and/or Breadcrumbs work, you can finally breathe some fresh air! Head over to my Prestashop Modules store, and dowload my Free Google Rich Snippets and Breadcrumbs module!

DOWNLOAD HERE

It works on both Prestashop 1.5 and 1.6. However, as the default Prestashop 1.6 responsive template comes with Google Rich Snippets already built in, I added a switch you can use to implement breadcrumbs only, if needed, so that the two features do not interfere one with the other.

Core Features

Totally FREE
No configuration needed
Compatible with Prestashop 1.5 and 1.6
Possibility to enable breadcrumbs only if your store already has rich snippets

The post FREE Prestashop Google Rich Snippets & Breadcumbs module!! appeared first on NemoPS.

Add Google Rich Snippets Breadcrumbs to Prestashop

Nemo — Tue, 25 Feb 2014 10:24:30 +0000

In this tutorial we will see how to add Google Rich Snippets Breadcrumbs to a Prestashop website, by modifying a small portion of the template and using a lightweight override.

Version used: Prestashop 1.5.6.2

Two types of markup

Google supports the following types of data for the breadcrumbs rich snippets:

Microdata
RDFa

Microdata is the one we used in the previous tutorial on how to add Google Rich Snippets to your Prestashop store, and the basic markup consists in adding itemprops and scopes to single html entities

On the other hand, RDFa adds a set of attributes and extensions to html using xml properties. You can read more about it here: RDFa Wiki.

I will use the latter in this demonstration, but either will do, so feel free to use the one you prefer in the end. You can visit the official Google Documentation on Breadcrumbs Rich Snippets if you want to get more info about the implementation.

Adding Google Rich Snippets Breadcrumbs to Prestashop – The tpl

First things first, we must hardcode a small portion of code inside breadcrumb.tpl. Open up the file located in your theme’s folder. It will look approximately like this (default theme):


{if isset($smarty.capture.path)}{assign var='path' value=$smarty.capture.path}{/if}

	
	{if isset($path) AND $path}
		id_category) && $category->id_category == 1}style="display:none;"{/if}>{$navigationPipe|escape:html:'UTF-8'}
		{if !$path|strpos:'span'}
			{$path}
		{else}
			{$path}
		{/if}
	{/if}

Edit as follows:


{if isset($smarty.capture.path)}{assign var='path' value=$smarty.capture.path}{/if}

	
	{if isset($path) AND $path}
		id_category) && $category->id_category == 1}style="display:none;"{/if}>{$navigationPipe|escape:html:'UTF-8'}
		{if !$path|strpos:'span'}
			
				{$path}
			
		{else}
			{$path}
		{/if}
	{/if}

Explanation: First, we told Google that the .breadcrumb div is our breadcrumb container. Then, we added a span around the homepage link, with typeof=”v:Breadcrumb” so that it know it’s dealing with part of the breadcrumb. Lastly, we added a rel and property attribute to the link pointing to the homepage. Then, we added the breadcrumb object and title property to the last item

At this point, we must use an override as Prestashop builds breadcrumbs in the Tools::getPath() method!

Adding Google Rich Snippets Breadcrumbs to Prestashop – The override

Create a new override in override/classes and call it Tools.php. Add some regular override markup inside:


class Tools extends ToolsCore
{

}

We need to override the getPath method, so open the original Tools.php class file that you find in your classes/ directory, copy the whole getPath() method, and paste it inside the new override as follows:


class Tools extends ToolsCore
{
	public static function getPath($id_category, $path = '', $link_on_the_item = false, $category_type = 'products', Context $context = null)
	{
		if (!$context)
			$context = Context::getContext();

		$id_category = (int)$id_category;
		if ($id_category == 1)
			return ''.$path.'';

		$pipe = Configuration::get('PS_NAVIGATION_PIPE');
		if (empty($pipe))
			$pipe = '>';

		$full_path = '';
		if ($category_type === 'products')
		{
			$interval = Category::getInterval($id_category);
			$id_root_category = $context->shop->getCategory();
			$interval_root = Category::getInterval($id_root_category);
			if ($interval)
			{
				$sql = 'SELECT c.id_category, cl.name, cl.link_rewrite
						FROM '._DB_PREFIX_.'category c
						LEFT JOIN '._DB_PREFIX_.'category_lang cl ON (cl.id_category = c.id_category'.Shop::addSqlRestrictionOnLang('cl').')
						WHERE c.nleft <= '.$interval['nleft'].'
							AND c.nright >= '.$interval['nright'].'
							AND c.nleft >= '.$interval_root['nleft'].'
							AND c.nright <= '.$interval_root['nright'].'
							AND cl.id_lang = '.(int)$context->language->id.'
							AND c.active = 1
							AND c.level_depth > '.(int)$interval_root['level_depth'].'
						ORDER BY c.level_depth ASC';
				$categories = Db::getInstance()->executeS($sql);

				$n = 1;
				$n_categories = count($categories);
				foreach ($categories as $category)
				{
					$full_path .=
					(($n < $n_categories || $link_on_the_item) ? '' : '').
					htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').
					(($n < $n_categories || $link_on_the_item) ? '' : '').
					(($n++ != $n_categories || !empty($path)) ? ''.$pipe.'' : '');
				}

				return $full_path.$path;
			}
		}
		else if ($category_type === 'CMS')
		{
			$category = new CMSCategory($id_category, $context->language->id);
			if (!Validate::isLoadedObject($category))
				die(Tools::displayError());
			$category_link = $context->link->getCMSCategoryLink($category);

			if ($path != $category->name)
				$full_path .= ''.htmlentities($category->name, ENT_NOQUOTES, 'UTF-8').''.$pipe.''.$path;
			else
				$full_path = ($link_on_the_item ? '' : '').htmlentities($path, ENT_NOQUOTES, 'UTF-8').($link_on_the_item ? '' : '');

			return Tools::getPath($category->id_parent, $full_path, $link_on_the_item, $category_type);
		}
	}
}

We can now modify the code snippets that generate links. First off, locate:

		if (!$context)
			$context = Context::getContext();

Right after it, add

	$path = ''.$path.'';

This way we label the current page name as title in the breadcrumbs. Then:

					$full_path .=
					(($n < $n_categories || $link_on_the_item) ? '' : '').
					htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').
					(($n < $n_categories || $link_on_the_item) ? '' : '').

Edit as follows

					$full_path .=
					(($n < $n_categories || $link_on_the_item) ? ' ' : '').
					htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').
					(($n < $n_categories || $link_on_the_item) ? ' ' : '').

Explanation: as we did previously, we added a span around the link, and assigned a rel and property attributes to the inner link. Remember to close the span at the end!.

Lastly, let’s account for cms pages as well, find:

			if ($path != $category->name)
				$full_path .= ''.htmlentities($category->name, ENT_NOQUOTES, 'UTF-8').''.$pipe.''.$path;
			else
				$full_path = ($link_on_the_item ? '' : '').htmlentities($path, ENT_NOQUOTES, 'UTF-8').($link_on_the_item ? '' : '');

And change it to:

			if ($path != $category->name)
				$full_path .= ' '.htmlentities($category->name, ENT_NOQUOTES, 'UTF-8').'   '.$pipe.'  '.$path;
			else
				$full_path = ($link_on_the_item ? ' ' : '').htmlentities($path, ENT_NOQUOTES, 'UTF-8').($link_on_the_item ? ' ' : '');

We are done! Save, clear smarty cache/force compile so that changes take effect, then go to cache/ and erase class_index.php so that the override can take place!

The final override:


class Tools extends ToolsCore
{


	public static function getPath($id_category, $path = '', $link_on_the_item = false, $category_type = 'products', Context $context = null)
	{
		if (!$context)
			$context = Context::getContext();

		$path = ''.$path.'';

		$id_category = (int)$id_category;
		if ($id_category == 1)
			return ''.$path.'';

		$pipe = Configuration::get('PS_NAVIGATION_PIPE');
		if (empty($pipe))
			$pipe = '>';

		$full_path = '';
		if ($category_type === 'products')
		{
			$interval = Category::getInterval($id_category);
			$id_root_category = $context->shop->getCategory();
			$interval_root = Category::getInterval($id_root_category);
			if ($interval)
			{
				$sql = 'SELECT c.id_category, cl.name, cl.link_rewrite
						FROM '._DB_PREFIX_.'category c
						LEFT JOIN '._DB_PREFIX_.'category_lang cl ON (cl.id_category = c.id_category'.Shop::addSqlRestrictionOnLang('cl').')
						WHERE c.nleft <= '.$interval['nleft'].'
							AND c.nright >= '.$interval['nright'].'
							AND c.nleft >= '.$interval_root['nleft'].'
							AND c.nright <= '.$interval_root['nright'].'
							AND cl.id_lang = '.(int)$context->language->id.'
							AND c.active = 1
							AND c.level_depth > '.(int)$interval_root['level_depth'].'
						ORDER BY c.level_depth ASC';
				$categories = Db::getInstance()->executeS($sql);

				$n = 1;
				$n_categories = count($categories);
				foreach ($categories as $category)
				{
					$full_path .=
					(($n < $n_categories || $link_on_the_item) ? ' ' : '').
					htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').
					(($n < $n_categories || $link_on_the_item) ? ' ' : '').
					(($n++ != $n_categories || !empty($path)) ? '  '.$pipe.'  ' : '');
				}

				return $full_path.$path;
			}
		}
		else if ($category_type === 'CMS')
		{
			$category = new CMSCategory($id_category, $context->language->id);
			if (!Validate::isLoadedObject($category))
				die(Tools::displayError());
			$category_link = $context->link->getCMSCategoryLink($category);

			if ($path != $category->name)
				$full_path .= ' '.htmlentities($category->name, ENT_NOQUOTES, 'UTF-8').'   '.$pipe.'  '.$path;
			else
				$full_path = ($link_on_the_item ? ' ' : '').htmlentities($path, ENT_NOQUOTES, 'UTF-8').($link_on_the_item ? ' ' : '');

			return Tools::getPath($category->id_parent, $full_path, $link_on_the_item, $category_type);
		}
	}

}

Time to test your page now! Here is one from my Prestashop modules store: Prestashop SEO Booster example

The post Add Google Rich Snippets Breadcrumbs to Prestashop appeared first on NemoPS.

Add Google Rich Snippets to your Prestashop store

Nemo — Fri, 21 Dec 2012 13:51:58 +0000

Adding Google Rich Snippets to your Prestashop store can definitely enhance your visibility in the SERP, and substantially increase your traffic over time. Want to stand out from the crowd? Read on.

Version Used: Prestashop 1.5.2

Google Rich Snippets: an Introduction

Since this article is about how to integrate Google Rich Snippets into Prestashop, I will not dive deep into what they are or how they are structured, but in case you don’t have even the vaguest idea on what Rich Snippets are, take a look a the following picture:

Google rich snippets in SERP

See that nifty image in Google’s search results? See the reviews, and the info about the author? That result sure looks better than others, and stands out from the crowd. That’s what Rich Snippets are: richer content about the page linked in the search results. It can display all sort of stuff, increasing over time. At the moment, it’s images, song titles and duration, reviews, author bio and a couple of other things I’ll leave to you to uncover, here: More information about Google Rich Snippets

Adding Google Rich Snippets to Prestashop

Now that you know what Rich Snippets are, can you see their power? Think of your products, and think of how attractive they are in the search results at the moment: you might have added a nifty Meta title, and an intriguing Meta Description. But that’s all there is to it, isn’t it? It’s like many other results. Now think on what they can be with rich snippets! Let’s get started.

First things first: Google only accepts rich snippets for pages which have a single product (for some reason I still have to discover, I didn’t know it before they directly contacted me about my own product list: “Product markup on listing pages is not supported”). Thus, we will be adding them for the product.tpl file only. Then, since you’re probably selling different products than the demo ones, I’ll try to keep it as generic as possible. Feel free to reference yourself at the official Schema for more infomation abouut the type of products you’re selling.

PLEASE NOTE that the syntax highlighter plugin automatically adds ‘=””‘ to the itemscope property. Whenever you find it, just add ‘itemscope’ without the empty value!

Author information

Even though the Product item type actually supports images, they’re not supported by the search results page in Google. Thus, to overcome this, it’s possible to show the author’s logo for each result, provided that you have a Google plus page to link. Open up the header.tpl file of your theme, and add the following snippet inside the tag:

Of course, you will have to use your own Google plus profile for the href property.

The overall container

Open up product.tpl, located in your theme’s folder. regardless of the template you use, you should be able to locate the following code:

It may have other stuff attached, depending on the theme you use. If you can’t find it, be sure to locate the product data main container within the file. Now, let’s tell Google that we are dealing with a product. Add the following code to that div.

Adding the product name, image and description

Now, Google knows that everything we put inside that block will be related to that single product. But still, it needs a name, right? Locate the product name. You can find it at about line 222 in the default template for prestashop 1.5.2. In any case, it should be wrapped in an h1 tag, like this:

	{$product->name|escape:'htmlall':'UTF-8'}

Wrap the name is a span tag the following way:

	{$product->name|escape:'htmlall':'UTF-8'}

Right after the product name, if you’re using the default template, you will notice the “short description” block. I suggest you use that for the snippets description: locate

{$product->description_short}

<, and add itemprop=”description”

	{$product->description_short}

Ok, our product has a name and description now. Let’s give our snippets some taste by adding the product image! This might a bit tricky for the non savvy: locate

, at about line 176 in the default product.tpl. It should look like this:

	
		{if $have_image}
			
				getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />
				{l s='View full size'}
			
		{else}
			
				name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" />
				{l s='View full size'}
			
		{/if}

See that first img tag? Add the following property to it: itemprop=”image”, so that it looks this way

		getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />

Brand and identifier

This is where problems begin. You might have your product’s Brand set as a feature, or manufacturer, or supplier; or none of these. Google strongly recommends that you add brand and identifier information for your product snippets, therefore we have to find a way out of it.

Case 1: manufacturer or supplier

Since Prestashop won’t add manufacturer and supplier information in the product page, we have to add it ourselves. Locate a suitable place for it; if you use the default theme, I’d suggest right after the product name. For manufactuters, add the following code:

	{l s="by"} {$product->manufacturer_name}

For suppliers:

	{l s="by"} {$product->supplier_name}

You may leave the “by” part out if you don’t want it, of course. You might also need to adjust the h1’s bottom margin, depending on your theme. Note that Google wants you to add a new itemscope (Organization) if you add the brand. Keep it in mind!

Case 2: feature

If, on the other hand, you decided to use a feature to add your product’s brand, things are a bit tricky. Depending on where you’re displaying it, you might need some extra code. if you’re just printing it out alone in some place, you can simply wrap it in a span and add the itemprop=”brand”. If this is not the case, and you’re displaying it in the “data sheet” tab, locate the tab’s position in the product.tpl file (about line 514 in the default template) and change it this way.

	{foreach from=$features item=feature}
        {if isset($feature.value)}
        	{if $feature.name == 'Brand'}
		  		{$feature.name|escape:'htmlall':'UTF-8'} {$feature.value|escape:'htmlall':'UTF-8'}
		  	{else}
		  		{$feature.name|escape:'htmlall':'UTF-8'} {$feature.value|escape:'htmlall':'UTF-8'}
		  	{/if}
        {/if}
	{/foreach}

Please notice that you will need to change that “Brand” in “$feature.name == ‘Brand'” to the name of your brand feature. Now that the brand is settled, we can take care of the identifier.

Depending on what you sell, you might want to use different product properties for this one. The product “reference” should be okay in most cases, so let’s add it as identifier. Luckily, Prestashop already displays the product reference in the page, at about line 317 of the default template. Change it the following way:

	{$product->reference|escape:'htmlall':'UTF-8'}

Price and Currency

This is perhaps the most important part, because Google may decide not to add rich snippets for your site, if something is wrongly setup here (as I discovered with my own errors!).
Prices fall under the Offer itemscope, therefore we need to add a new schema reference. Locate the product’s main price, at about line 380 of the default template. It’s a bit messy, but this is what we are looking for:

	
	{if $priceDisplay >= 0 && $priceDisplay <= 2}
		{convertPrice price=$productPrice}
		
	{/if}

And here comes the trouble too. Prestashop currently displays the price as number and currency. This is bad for Google Rich Snippets. We need them split in order to add them to the snippet, both price and currency. Let’s start off by wrapping that item with the itemscope and itemprop:

	
	{if $priceDisplay >= 0 && $priceDisplay <= 2}
		{convertPrice price=$productPrice}
		
	{/if}

Now, Google knows it’s dealing with an offer (price). But it doesn’t exactly know where the price is yet. We have to use a bit of a trick. Change the previous code as follows:

	

	{$rightPrice = {convertPrice price=$productPrice}}

	{if $priceDisplay >= 0 && $priceDisplay <= 2}
		{if $currencyFormat == 1 || $currencyFormat == 3}
			{$currencySign} {$rightPrice|regex_replace:"/[\\{$currencySign}]/":""}
		{else}
			{$rightPrice|regex_replace:"/[\\{$currencySign}]/":""} {$currencySign}
		{/if}	
		
	{/if}

Explanation: This probably left you more confused than ever. First off, since we need the whole formatted price with currency we assign it to a new variable. Then, the only way to have the price alone is to actually remove the currency using a regular expression (Learn more about Regular Expressions in Smarty), and we achieve it with this function:

	{$rightPrice|regex_replace:"/[\\{$currencySign}]/":""}

We are basically telling Smarty: Hey, if you find the currency character in that price, replace it with and empty string. Then, we have to deal with the way Prestashop formats currency. If you check the displayPrice method of the Tools class, you will see Prestashop can handle 5 types of currency formats: 2 with the sign before the price, 3 with the sign after it. We have to deal with this of course. Now, we tell Smarty to check the currency format code, if it’s 1 or 3, it means the format is “currency sign before the price”, else, it’s after.

		{if $currencyFormat == 1 || $currencyFormat == 3}
			{$currencySign} {$rightPrice|regex_replace:"/[\\{$currencySign}]/":""}
		{else}
			{$rightPrice|regex_replace:"/[\\{$currencySign}]/":""} {$currencySign}
		{/if}

Lastly, let’s tell Google where the relevant information is:

	
	{if $priceDisplay >= 0 && $priceDisplay <= 2}
		{if $currencyFormat == 1 || $currencyFormat == 3}
			 {$currencySign} {$rightPrice|regex_replace:"/[\\{$currencySign}]/":""}
		{else}
			{$rightPrice|regex_replace:"/[\\{$currencySign}]/":""}  {$currencySign}
		{/if}	
		
	{/if}

This way, we finally told big G which part is the price, and which the currency. And I thought this was okay…but! Then, I noticed that I was not getting the proper content for the price itemprop. I was still getting the currency! Why is that? It’s because Prestashop uses a pretty dumb way to replace prices with combination prices: thus, if you have attributes setup for the currenct product, the attribute combination price will be set with Javascript. Not so smart, we have to deal with it!
Open up product.js, which you can find in the /js/ folder of your theme. Locate the following code, at about line 400 on the default template:

	$('#our_price_display').text(our_price);

This little brat is causing our currency to appear again. Just before this snippet, add the following:

	var re = new RegExp("\\"+currencySign, "g");
	var signRemoved = our_price.replace(re, "");

Again, we are dealing with price formatting, but this time with javascript. First, we create a regExp object to use our currencySign variable as a pattern for the regular expression, then we remove it from the actual price. In the end, let’s replace the our_price variable with our new, priceless one, so that we get this:

	var re = new RegExp("\\"+currencySign, "g");
	var signRemoved = our_price.replace(re, "");

	$('#our_price_display').text(signRemoved);

If you refresh the page now, you should still get one currency, instead of having it two times. Everything should look as before, but if you check the page source, you’ll notice our tags have been added.

Google Microdata Added

Conclusion

There is still much left with Google Rich Snippets, and the Product item type. I decided to leave things like “condition” and “lowPrice” behind, because they would have required major (and probably confusing) changes in the template. Think of this tutorial as a starting point to add more and more snippet stuff to your shop. And don’t forget the Product item type also supports Reviews. If you’re using the comments module, or any other module, be sure you add that microformat to your site, too!

In any case, here is the tutorial result on a demo shop, tested with the Rich Snippet Tool.

Google Structured Data Testing Tool

Note that i didn’t add the author information in the link, simply because I didn’t link my google profile to the page. Here is how it looks with the authorship information correctly added:

Nemo’s Post Scriptum Store’s Rich Snippet

Additional Resources

The post Add Google Rich Snippets to your Prestashop store appeared first on NemoPS.