MasterJrock.com

One of the best ways to increase sales is to sell to your existing customers – or those who already want to buy from you – by increasing their average spend. The beauty of cross-selling and up-selling is that you are selling to people who are already interested in buying from you by letting them know what else you can do for them, so your job is made much easier than if you were selling to a cold lead. The key is to sell them something that is relevant and useful.

In this post, I’ve created a dynamic way to upsell related items by the current product category using Ext-js DataView. The data of course was loaded via JSON to increase load page performance.

Modifying the upsell.phtml, I came up with this:

global $attribute_code, $attributeSets;

$attribute_code = array(
    array('code'=>'sku','label'=>'Link / SKU','sortable' =>'true','width' =>125,'type'=>'text'),
    array('code'=>'special_price','label'=>'Special Price','sortable' =>'true','width' =>100,'type'=>'float'),
    array('code'=>'addtocart','type'=>'text'),
    array('code'=>'short_description', 'type'=>'text'),
    array('code'=>'url_path', 'type'=>'text'),
    array('code'=>'image', 'type'=>'text'),
    array('code'=>'name', 'type'=>'text'),
    array('code'=>'order', 'type'=>'int'),
    array('code'=>'productId', 'type'=>'int')
);

//Fields
if (!function_exists('_setExtField')) {
    function _setExtField() {
        global $attribute_code;
        $field_array = array();
        foreach ( $attribute_code as $item =>$value ) {
            $field_array[] = "{name: '".$value['code']."', type: '".$value['type']."'}";
        }
        return implode(',', $field_array);
    }
}

$pageSize = 25; //default page size

//Get Current Product
$_product = $this->getProduct();
$current_product_catIds = $_product->getCategoryIds();

Since my product category setup ids were setup as array([parent],[child]) and the second index is alwasy present, I will take note only the second index value

$ids = $current_product_catIds[1];

Then our basic Ext-js requirements:

Then our Ext.DataView call

Ext.onReady(function(){
	//Defaults
	var fields = [];
	var emptyText = '
No items match the specified filter

';
	var loadingText = 'Loading data...Please wait.';
	var itemSelector = 'div.thumb-wrap';
	var overClass = 'x-view-over';
	var listTemplate = new Ext.XTemplate('
','','
','
','


','
{name}

','

Special Price:{special_price:usMoney}


','Add to Cart','

','

','','

');
	var width = 686;
	var height = 305;
	var checkImage = function(data){if(data.image == 'no_selection' || data.image == null) {return '[your_image_place_holder_path_and_file]';} else {return '[your_cache_thumbnail_path]'+ data.image;}}
	var formatData = function(data){data.image = checkImage(data); return data;};

	//Loop
	var proxy__ = new Ext.data.HttpProxy({ url: '/remote-data.php?cat=', method: 'POST', prettyUrls: false});
	var store__ = new Ext.data.JsonStore({proxy : proxy__, root: 'items',totalProperty: 'totalcount',idProperty: 'sku',remoteSort: true,fields: fields});
	store__.load({params:{start:0, limit:}});
	var bbar__ = new Ext.PagingToolbar({ store: store__, pageSize: , displayInfo: true, displayMsg: 'Displaying items {0} - {1} of {2}', emptyMsg: 'No items to display'});
	var view__ = new Ext.DataView({ store: store__, tpl: listTemplate, loadingText: loadingText,overClass: overClass, itemSelector: itemSelector, emptyText : emptyText,
		prepareData: formatData.createDelegate()
	});

	var panel__ = new Ext.Panel({
    	id: 'item-chooser-dlg',autoScroll: true,width : width, height : height, collapsible : true,
		title : '__('You may also be interested in other our ') . Mage::getModel('catalog/category')->load($ids)->getName(); ?>',
		items: [{ id: 'item-chooser-view', autoScroll: true, items: view__, }],
		renderTo : 'dataView_',
		bbar: bbar__
	});
	panel__.show();
});

Source:
Remote JSON Data – Response
remote-data.php
Upsell.phtml

See working example here.

Tagged as DataView, ext-js, javascript, json, magento, upsell products + Categorized as Ext-js, Magento