Product List Front-End Guide

Smarty Function

In order to use the Smarty Tag, you must first retrieve the list into a Smarty Variable, which you save as an Array of Products. This array can then be used in a loop, like the example below:

{product_list type_list=Mixed limit=7 product_id=12043 product_list_type=related  recommendations="related_recommendations" }

{foreach from = $related_recommendations item=related}

	{$related.product_filename}


{/foreach}

Accepted Parameters

Data Returned

Example using template

The code below shows an example of the Smarty Function using templates

{product_list type_list=Mixed limit=7 product_id=12043 product_list_type=related  recommendations="products_returned" template="products/product_list_recommendation.tpl.html"}

And the file products/product_list_recommendation.tpl.html could be similar to the example below:

           <div id="relateditems">
                <ul>
                    {foreach from=$products_returned item="product"}
                    <li>
                        <a href="{$product.product_filename}">{$product.product_name}</a>
                    </li>
                    {/foreach}
                </ul>
              </div>

Recommendation data

The Product Lists data can be retrieved by an Ajax request using the same parameters as Smarty.  The result is a list of products in JSON format.

$.ajax({url: '/ajax/Ajax_Products_Lists/getListProducts',
data: {   
    "type_list": 'mixed',
    "limit": 20,
    "offset": null,
    "product_id": null,
    "product_list_type": 'generic',
    "product_list_name": 'Generic List',
    "minimum_limit": null
},
dataType: 'json',
success:function(data) {
    console.log(data);
}
});

Tracking code

The products returned by a Product List result will provide a Google Event Tracking Code that can be used in your store.

The signature of a Google Tracking code for a Product that comes from a Product List is as followed:

_trackEvent(Product List name, action, Product Name, Product Id)

One example of a Google Event Tracking code that comes from a Product List could be:

_gaq.push(['_trackEvent', 'Upsell Category Example', 'click', 'A product Name', '45'])

Once you have the Google Tracking library in your store (ga.js), you can use the code above.  You can test the tracking prior to use the Google Tracking code, using the code below as a debugger:

  	var _gaq = _gaq || [];
	_gaq.push = function (){
		for (var i = 0; i < arguments.length; i++) {
		    alert(arguments[i]);
		}
	}

Custom Tracking

Product Lists provide Product details that could be used to create a custom Tracking code for other services.  You can just use the result and create a new code manually:

{foreach from=$products_returned item="product"}
<button type="button" onclick="customTracking({$product.id}, {$product.name})" >Test Tracking</button>
{/foreach}