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.

In this post, the setOrder function comes into place

Copy Crosssell.php into app/code/local/Mage/Checkout/Block/Cart

Then, at line 150: _getCollection() function, insert setOrder function and set the attribute code and order parameter you desire.

protected function _getCollection() {
    $collection = Mage::getModel('catalog/product_link')->useCrossSellLinks()
        ->getProductCollection()
        ->setStoreId(Mage::app()->getStore()->getId())
        ->addStoreFilter()
        ->setOrder('attribute_set_id', 'asc') // Order by attribute set
        ->setPageSize($this->_maxItemCount);
    $this->_addProductAttributesAndPrices($collection);

    Mage::getSingleton('catalog/product_status')
    	->addSaleableFilterToCollection($collection);
    Mage::getSingleton('catalog/product_visibility')
    	->addVisibleInCatalogFilterToCollection($collection);
    Mage::getSingleton('cataloginventory/stock')
    	->addInStockFilterToCollection($collection);

    return $collection;
}

This also applies if you’re going to use the Related.php, instead of Crosssell.php.In my case, I’m stuck and okay with using the latter.

And my template would be this:

foreach($this->getItems() as $_item): ?>
    if ( $setId != $_item->getAttributeSetId() ) :
        $setId = $_item->getAttributeSetId();

getAttributeSetId() ) ?>

Now, I cant’ figure out how to get the attribute set name by id, so product_attribute_set.list SoapCleint service method. Hope someone will shed some light.

global $attribute_code, $attributeSets;

$proxy = new SoapClient($this->getBaseUrl().'api/soap/?wsdl');
$sessionId = $proxy->login('your apiUser', 'your apiKey');
$attributeSets = $proxy->call($sessionId, 'product_attribute_set.list');

//Get Attrinute Name
if (!function_exists('_getAttributeSet')) {
    function _getAttributeSet($id) {
        global $attributeSets;
        $setName = '';
        foreach($attributeSets as $set) {
            if ($set['set_id'] == $id ) {
                $setName = $set['name'];
            }
        }
        return $setName;
    }
}

That’s it. Enjoy!

To make use of the fields and columns more efficiently and accurately. I’ve used PHP arrays to construct them as I want to.

global $attribute_code;
$attribute_code = array(
    array('code'=>'sku','label'=>'Item','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_diamond_color','label'=>'DiamondColor','sortable' =>'true','width' =>50,'type'=>'text'),
    array('code'=>'jewelry_diamond_clarity','label'=>'DiamondClarity','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_gemstone_color','label'=>'GemstoneColor','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_gemstone_clarity','label'=>'GemstoneClarity','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_carat_total_weight','label'=>'CaratWeight','sortable' =>'true','width' =>50,'type'=>'float'),
    array('code'=>'jewelry_main_stone','label'=>'MainStone','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_metal_purity','label'=>'MetalPurity','sortable' =>'true','width' =>50,'type'=>'text'),
    array('code'=>'jewelry_style','label'=>'Style','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_metal','label'=>'Metal','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'special_price','label'=>'SpecialPrice','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')
);

Then I created a function to make fields/columns javascript arrays suitable for my Ext.data.JsonStore requirements

  //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);
      }
  }

  //Column
  if (!function_exists('_setExtColumn')) {
      function _setExtColumn() {
          global $attribute_code;
          $column_array = array();
          foreach ( $attribute_code as $item => $value ) {
              if ( isset($value['label']) &&  $value['label'] != NULL) {
                  $column_label = $value['label'];
                  $column_code = $value['code'];
                  $column_sortable = $value['sortable'];

                  if ($column_code == 'sku')
                      $column_array[]  = "{id:'$column_code',header: '$column_label', sortable: $column_sortable, renderer: renderUrl, dataIndex: '$column_code'}";
                  elseif ($column_code == 'special_price')
                      $column_array[]  = "{header: '$column_label', sortable: $column_sortable, renderer: 'usMoney', dataIndex: '$column_code', cellActions:[{iconCls:'x-btn-cart',qtip:'Add this to cart', style: 'background: transparent url(/wp-includes/js/ext/shared/icons/fam/shop_cart.png) no-repeat;'}]}";
                  else {
                      $column_array[]  = "{header: '$column_label', sortable: $column_sortable, dataIndex: '$column_code'}";
                  }
              }
          }
          return implode(',', $column_array);
      }
  }

To make use of a simple html data formatting for each of my data whenever it loads into my grid, I make use of a renderer option

. The renderer option calls a specified javascript function renderUrl and usMoney. usMoney is already built in into Ext-Js library.

Now my Ext.data.JsonStore looks like this:

    var store = new Ext.data.JsonStore({
        root: 'items', //root tag for all of my items
        totalProperty: 'totalcount', // total count tag for my items
        idProperty: 'sku',
        remoteSort: true, //sort remotely from data
        fields: [],
        proxy: new Ext.data.ScriptTagProxy({
			url: '[your_remote_url'
        })
    });

Take note root & totalProperty properties. This should be visible in your JSON data. Verifying you JSON data makes it easy at JSON Validator website.

At the proxy property, I make use of Ext.data.ScriptTagProxy class. Using this javascript class requires an extra JSON entry "callback" in your response data. If your remote data script sits in on the same server, using Ext.data.HttpProxy is recommended.

proxy : new Ext.data.HttpProxy({
    method: 'POST',
    prettyUrls: false,
    url: '/remote-data.php?cat=7'
})

You probably want to konw how I did my my "remote-data.php". My remote data sits on a Magento driven web site. As I mention above, "Ext.data.ScriptTagProxy" uses an exra "callback" response. Therefore your php script should have something like this if you want your remote data script usable across domains.

$categoryId 	= intval(@$_GET['cat']);
$limit 			= ( isset($_POST['limit']) )?  intval(@$_POST['limit']) : intval(@$_GET['limit']) ;
$start 			= ( isset($_POST['start']) )?  intval(@$_POST['start']) : intval(@$_GET['start']) ;
$direction 		= ( isset($_POST['dir']) )?  @$_POST['dir'] : @$_GET['dir'] ;
$sort 			= ( isset($_POST['sort']) )?  @$_POST['sort'] : @$_GET['sort'] ;

//start output
if ( isset($_REQUEST['callback']) ) {
	// if you use Ext.data.ScriptTagProxy
    $callback = $_REQUEST['callback'];
    echo $callback . '(' . json_encode(array('totalcount' => [count], 'items' => [array of items]) ) . ');';
} else {
	// if you use Ext.data.HttpProxy
    echo json_encode(array('totalcount' => [count], 'items' => [[array of items]]) );
}

Make use of an array_slice function to limit your data as Ext.grid.GridPanel request it. Then create a json data from it by using php arrays and the magical json_encode function

foreach( array_slice(_getProducts($categoryId, $sort, $direction),$start,$limit) as $productId) {
    $product = Mage::getModel('catalog/product');
    $product->load($productId);

    $productTitle 		= _extSanitize($product->getName());
    $productTitleTrim 	= _trimProductName($productTitle);	

    $rawData['id']							=  $ctr;
    $rawData['sku']							=  $product->getSku();
    $rawData['name']						=  $product->getName();
    $rawData['url_path']					=  $product->getProductUrl();
    $rawData['jewelry_style'] 				= _extSanitize(_getProductAttribute($product , 'jewelry_style'));
    $rawData['jewelry_carat_total_weight'] 	= floatval(_getProductAttribute($product , 'jewelry_carat_total_weight'));
    $rawData['jewelry_main_stone']	 		= _getProductAttribute($product , 'jewelry_main_stone');
    $rawData['jewelry_metal_purity'] 		= _getProductAttribute($product , 'jewelry_metal_purity');
    $rawData['jewelry_metal']			 	= _getProductAttribute($product , 'jewelry_metal');
    $rawData['jewelry_diamond_color'] 		= _getProductAttribute($product , 'jewelry_diamond_color');
    $rawData['jewelry_diamond_clarity'] 	= _getProductAttribute($product , 'jewelry_diamond_clarity');
    $rawData['jewelry_gemstone_color'] 		= _getProductAttribute($product , 'jewelry_gemstone_color');
    $rawData['jewelry_gemstone_clarity'] 	= _getProductAttribute($product , 'jewelry_gemstone_clarity');
    $rawData['special_price'] 				= floatval($product->getSpecialPrice());
    $rawData['image']						= $product->getImage();
    $rawData['addtocart'] 					= Mage::getUrl('checkout/cart/add', array('product'=>$productId));
    $rawData['short_description'] 			= $product->getShortDescription();
    $items[] = $rawData;
    $ctr++;
}

Take note of variable type you are going to declare. It should be the same as you declare it from your Ext.data.JsonStore fields property

    $rawData['jewelry_carat_total_weight'] 	= floatval(_getProductAttribute($product , 'jewelry_carat_total_weight'));
    $rawData['special_price'] 				= floatval($product->getSpecialPrice());

And my demo should be probably be here. Enjoy!

Source:
Remote JSON Data – Response
remote-data.php
Ext.ux.grid.CellActions.js

Credits:
Ext.ux.grid.CellActions Plugin by Saki
ExtJS 3.2.1 API Documentation
Original Ext-JS Paging Example

In my basic grid example, Data was loaded within the javascript call. This post contains an advanced demonstration of using AJAX/JSON to load data remotely for better performance. You will notice that the web page rendered quickly and proceeds before loading the data remotely.

To make use of the fields and columns more efficiently and accurately. I’ve used PHP arrays to construct them as I want to.

global $attribute_code;
$attribute_code = array(
    array('code'=>'sku','label'=>'Item','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_diamond_color','label'=>'DiamondColor','sortable' =>'true','width' =>50,'type'=>'text'),
    array('code'=>'jewelry_diamond_clarity','label'=>'DiamondClarity','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_gemstone_color','label'=>'GemstoneColor','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_gemstone_clarity','label'=>'GemstoneClarity','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_carat_total_weight','label'=>'CaratWeight','sortable' =>'true','width' =>50,'type'=>'float'),
    array('code'=>'jewelry_main_stone','label'=>'MainStone','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_metal_purity','label'=>'MetalPurity','sortable' =>'true','width' =>50,'type'=>'text'),
    array('code'=>'jewelry_style','label'=>'Style','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'jewelry_metal','label'=>'Metal','sortable' =>'true','width' =>75,'type'=>'text'),
    array('code'=>'special_price','label'=>'SpecialPrice','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')
);

Then I created a function to make fields/columns javascript arrays suitable for my Ext.data.JsonStore requirements

  //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);
      }
  }

  //Column
  if (!function_exists('_setExtColumn')) {
      function _setExtColumn() {
          global $attribute_code;
          $column_array = array();
          foreach ( $attribute_code as $item => $value ) {
              if ( isset($value['label']) &&  $value['label'] != NULL) {
                  $column_label = $value['label'];
                  $column_code = $value['code'];
                  $column_sortable = $value['sortable'];

                  if ($column_code == 'sku')
                      $column_array[]  = "{id:'$column_code',header: '$column_label', sortable: $column_sortable, renderer: renderUrl, dataIndex: '$column_code'}";
                  elseif ($column_code == 'special_price')
                      $column_array[]  = "{header: '$column_label', sortable: $column_sortable, renderer: 'usMoney', dataIndex: '$column_code', cellActions:[{iconCls:'x-btn-cart',qtip:'Add this to cart', style: 'background: transparent url(/wp-includes/js/ext/shared/icons/fam/shop_cart.png) no-repeat;'}]}";
                  else {
                      $column_array[]  = "{header: '$column_label', sortable: $column_sortable, dataIndex: '$column_code'}";
                  }
              }
          }
          return implode(',', $column_array);
      }
  }

To make use of a simple html data formatting for each of my data whenever it loads into my grid, I make use of a renderer option

. The renderer option calls a specified javascript function renderUrl and usMoney. usMoney is already built in into Ext-Js library.

Now my Ext.data.JsonStore looks like this:

    var store = new Ext.data.JsonStore({
        root: 'items', //root tag for all of my items
        totalProperty: 'totalcount', // total count tag for my items
        idProperty: 'sku',
        remoteSort: true, //sort remotely from data
        fields: [],
        proxy: new Ext.data.ScriptTagProxy({
			url: '[your_remote_url'
        })
    });

Take note root & totalProperty properties. This should be visible in your JSON data. Verifying you JSON data makes it easy at JSON Validator website.

At the proxy property, I make use of Ext.data.ScriptTagProxy class. Using this javascript class requires an extra JSON entry "callback" in your response data. If your remote data script sits in on the same server, using Ext.data.HttpProxy is recommended.

proxy : new Ext.data.HttpProxy({
    method: 'POST',
    prettyUrls: false,
    url: '/remote-data.php?cat=7'
})

You probably want to know how I did my my "remote-data.php". My remote data sits on a Magento driven web site. As I mention above, "Ext.data.ScriptTagProxy" uses an exra "callback" response. Therefore your php script should have something like this if you want your remote data script usable across domains.

$categoryId 	= intval(@$_GET['cat']);
$limit 			= ( isset($_POST['limit']) )?  intval(@$_POST['limit']) : intval(@$_GET['limit']) ;
$start 			= ( isset($_POST['start']) )?  intval(@$_POST['start']) : intval(@$_GET['start']) ;
$direction 		= ( isset($_POST['dir']) )?  @$_POST['dir'] : @$_GET['dir'] ;
$sort 			= ( isset($_POST['sort']) )?  @$_POST['sort'] : @$_GET['sort'] ;

//start output
if ( isset($_REQUEST['callback']) ) {
	// if you use Ext.data.ScriptTagProxy
    $callback = $_REQUEST['callback'];
    echo $callback . '(' . json_encode(array('totalcount' => [count], 'items' => [array of items]) ) . ');';
} else {
	// if you use Ext.data.HttpProxy
    echo json_encode(array('totalcount' => [count], 'items' => [[array of items]]) );
}

Make use of an array_slice function to limit your data as Ext.grid.GridPanel request it. Then create a json data from it by using php arrays and the magical json_encode function

foreach( array_slice(_getProducts($categoryId, $sort, $direction),$start,$limit) as $productId) {
    $product = Mage::getModel('catalog/product');
    $product->load($productId);

    $productTitle 		= _extSanitize($product->getName());
    $productTitleTrim 	= _trimProductName($productTitle);	

    $rawData['id']							=  $ctr;
    $rawData['sku']							=  $product->getSku();
    $rawData['name']						=  $product->getName();
    $rawData['url_path']					=  $product->getProductUrl();
    $rawData['jewelry_style'] 				= _extSanitize(_getProductAttribute($product , 'jewelry_style'));
    $rawData['jewelry_carat_total_weight'] 	= floatval(_getProductAttribute($product , 'jewelry_carat_total_weight'));
    $rawData['jewelry_main_stone']	 		= _getProductAttribute($product , 'jewelry_main_stone');
    $rawData['jewelry_metal_purity'] 		= _getProductAttribute($product , 'jewelry_metal_purity');
    $rawData['jewelry_metal']			 	= _getProductAttribute($product , 'jewelry_metal');
    $rawData['jewelry_diamond_color'] 		= _getProductAttribute($product , 'jewelry_diamond_color');
    $rawData['jewelry_diamond_clarity'] 	= _getProductAttribute($product , 'jewelry_diamond_clarity');
    $rawData['jewelry_gemstone_color'] 		= _getProductAttribute($product , 'jewelry_gemstone_color');
    $rawData['jewelry_gemstone_clarity'] 	= _getProductAttribute($product , 'jewelry_gemstone_clarity');
    $rawData['special_price'] 				= floatval($product->getSpecialPrice());
    $rawData['image']						= $product->getImage();
    $rawData['addtocart'] 					= Mage::getUrl('checkout/cart/add', array('product'=>$productId));
    $rawData['short_description'] 			= $product->getShortDescription();
    $items[] = $rawData;
    $ctr++;
}

Take note of variable type you are going to declare. It should be the same as you declare it from your Ext.data.JsonStore fields property

    $rawData['jewelry_carat_total_weight'] 	= floatval(_getProductAttribute($product , 'jewelry_carat_total_weight'));
    $rawData['special_price'] 				= floatval($product->getSpecialPrice());

And my demo should be probably be here. Enjoy!

Source:
Remote JSON Data – Response
remote-data.php
Ext.ux.grid.CellActions.js

Credits:
Ext.ux.grid.CellActions Plugin by Saki
ExtJS 3.2.1 API Documentation
Original Ext-JS Paging Example

Reading from its examples, below is my basic table grid example using a standard data.

The data seems a little simple but in a real-world scenario, pages with this data would make it heavy online. Therefore, an alternative way to load data is to use it via AJAX with a json formatted data which will succeed this post, but first on to the basics.

First, Download Ext-js library from their website.

Second, create important header calls:

Third, make a javascript call inside the html body (or in the header at your discretion):

var data = [your json formated array data];

var store = new Ext.data.ArrayStore({ fields: [your field arrays] });

store.loadData(data); // load the var "data"

var grid = new Ext.grid.GridPanel({  //Declare the grid panel
    store: store, //your var "store"
    columns: [your column arrays],
    viewConfig: { forceFit: true}, // force to fit all columns inside the grid
    stripeRows: true, // creates css background on table rows
    height: 210,
    width: 947,
    stateful: true,
    stateId: 'grid', //id of the ext-js var "grid"
    title: '[your header title on top of your table grid]'
});

grid.render('gridView'); // render the var "grid" at the specified html element id

And now the demo would be like this.

You can get away just anything with jQuery nowadays. Today’s post is my mimic attempt. And almost every website has a featured content slider or tabbed section of some sort, surely this post will surely be one of my basic assets in my web arsenal. Although, this would not let me to redesign the tabbed links with extra divs using a standard jQuery Tab, I hope someone would give-in for a modified code of UI Tab.

Demo

I’ve downloaded a couple of important files:

jQuery

jQuery UI (the core and tabs)

I called all the core jQuery javascripts:



And now my jQuery UI Tab call: I need it to rotate every 5 seconds, even after a tab click.

                $('.ts-display').tabs({
                    fx: { opacity: 'toggle'}
                }).tabs('rotate', 5000, true);

And this would not work if I don’t have the UI Tab CSS class –very important!!!

.ui-tabs {
    padding: 0em;
	z-index: 100;
}

.ui-tabs .ui-tabs-nav {
    list-style: none;
    position: relative;
    padding: 0em 0em 0;
}

.ui-tabs .ui-tabs-nav li {
    position: relative;
    float: left;
    border-bottom-width: 0 !important;
    margin-top:5px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
    padding: 0;
}

.ui-tabs .ui-tabs-nav li a div{
	width:131px;
	margin:0 5px;
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
	text-align: left;
    text-decoration: none;
    padding-top:15px;
	color: #555;
	height:75px;
	font-size: 0.9em;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    padding-bottom: 0px;
    border-bottom-width: 0;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
    padding: 0em 0em;
    display: block;
    border-width: 0;
    background: none;
}

.ui-tabs .ui-tabs-hide {
    display: none !important;
}

And that’s it for now. Simple as it may seem, but it knocks to my basic needs and purpose for my past and future projects.

Thanks for reading.

First, thanks to guys at Stranger Studios for this awesome pagination function the have provided.

And also, thank’s to the URL Routing tricks at PHP Addiction for the SEO urls that I have integrated with this pagination.

To start off with iCollectors CSS Styles.

Now my parameters would be a different due to the URL routing function. I’ve added an auction session ID. Therefore my function would be:

function getPaginationString($session, $page = 1, $totalitems, $limit = 15, $adjacents = 1, $targetpage = "/", $pagestring = "?page=")
{
// function body
}

And my URL routing axial.commanddispatcher would be:

case 'session':
        if ( count($parameter) > 1 ) {
            $_REQUEST['page'] = $parameter[2];
            $_REQUEST['per_page'] = $parameter[1];

            if ($parameter[1] == 0)
                $_REQUEST['per_page'] = 10;
            if ($parameter[2] == 0)
                $_REQUEST['page'] = 1;
            $_REQUEST['session'] = $parameter[0];
        } else {
            $_REQUEST['session'] = substr($parameter[0],0,-5);
        }
            require($base_file.'.php');
        break;

So if have the url “auction/session/17697.html“, it calls the session.php with a $_REQUEST['session'] id 17697 with “.html” suffix omitted, defaults to page 1 and defaults to 10 items per page .

And if have the url “auction/session/17697/10/2“, again it calls the session.php with a $_REQUEST['session'] id 17697, at page 2 and still defaults to 10 items per page .

While the url “auction/session/17697/20/2“, calls the session.php with a $_REQUEST['session'] id 17697, at page 2 and but with 20 items per page .

Please read my post on how to integrate PHP Addiction’s URL Routing. For further reading, please visit at their website.

Your mySQL query in your php script should be something like this.

$query = "SELECT * FROM " . DB_PREFIX . "lot WHERE session = '".$_REQUEST['session']."' LIMIT $page, $per_page";

Having a lot databse table with fields session, I made a simple query with a session id, page and per_page variables

While having SEO in intact, take notice of my dynamic page titles. all of my $_REQUEST variables is on top of my header template function.

A working example of my iCollector’s Auction/Digg Style PHP Pagination.

Credits:
PHP Addiction’s URL Routing
Stranger Studios’ Digg Style PHP Pagination
iCollector

I’m totally fed up with query string especially on list and paginations. Luckily I came across with PHP Addictions’s Axial_UrlInterpreter php class using $_REQUEST variables.

//axial.urlinterpreter.php
class Axial_UrlInterpreter  {
    var $command;
	function Axial_UrlInterpreter() {
		$requestURI = explode('/', $_SERVER['REQUEST_URI']);
		$scriptName = explode('/',$_SERVER['SCRIPT_NAME']);
		for($i= 0;$i < sizeof($scriptName);$i++) {
			if ($requestURI[$i]	== $scriptName[$i]) {
				unset($requestURI[$i]);
			}
		}
		$commandArray = array_values($requestURI);
		$commandName = $commandArray[0];
		$parameters = array_slice($commandArray,1);
		$this->command = new Axial_Command($commandArray[0],$parameters);
	}
	function getCommand() {
		return $this->command;
	}
}

//axial.command.php
class Axial_Command {
    var $commandName = '';
    var $parameters = array();

    function Axial_Command($commandName,$parameters) {
        $this->commandName = $commandName;
        $this->parameters = $parameters;
    }
    function getCommandName(){
        return $this->commandName;
    }
    function getParameters() {
            return $this->parameters;
	}
}

//axial.commanddispatcher.php
class Axial_CommandDispatcher {
    var $command;

    function Axial_CommandDispatcher($command){
        $this->command = $command;
    }

    function Dispatch(){
        $base_file = $this->command->getCommandName();
        $parameter = $this->command->getParameters();

        //start your custom switch statement here
        switch ($base_file) {
            case 'session':
                    if ( count($parameter) > 1 ) {
                        $_REQUEST['page'] = $parameter[2];
                        $_REQUEST['per_page'] = $parameter[1];

                        if ($parameter[1] == 0)
                            $_REQUEST['per_page'] = 10;
                        if ($parameter[2] == 0)
                            $_REQUEST['page'] = 1;
                        $_REQUEST['session'] = $parameter[0];
                    } else {
                        $_REQUEST['session'] = substr($parameter[0],0,-5);
                    }
                        require($base_file.'.php');
                    break;
            default:
                    $_REQUEST['404'] = 1;
                    require('index.php');
                    break;
          }
      }
}

//dispatch.php
include($_SERVER['DOCUMENT_ROOT'].'/axial.command.php');
include($_SERVER['DOCUMENT_ROOT'].'/axial.urlinterpreter.php');
include($_SERVER['DOCUMENT_ROOT'].'/axial.commanddispatcher.php');

$urlInterpreter = new Axial_UrlInterpreter();
$command = $urlInterpreter->getCommand();
$commandDispatcher = new Axial_CommandDispatcher($command);
global $commandResult;
$commandDispatcher->Dispatch();

// A utility function to get the url leading up to the current script.
// Used to make the example portable to other locations.
function getScriptUrl() {
    $scriptName = explode('/',$_SERVER['SCRIPT_NAME']);
    unset($scriptName[sizeof($scriptName)-1]);
    $scriptName = array_values($scriptName);
	return 'http://'.$_SERVER['SERVER_NAME'].implode('/',$scriptName).'/';
}

Your .htaccess should contain somethng like this:

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ dispatch.php [L]

Whenever you browse a web page with router class. It reads the dispatch url script file first to validate whatever $_REQUEST variable it gathers in the client’s web browser.

By the way, my root directory in this article is rooted at http://domain/auction. The first paramter after my root directory would always be the sciprt file then followed by its succeeding paramaters for its purpose.

So if browse http://domain.com/auction/session/17696.html, parameter[0] would be my script file session.php then parameter[1] is my auction session id 1796. Inside my session.php script has a $_REQUEST['session'] which I will use for a database query to display requested auction session id.

Credits:
PHP Addiction’s URL Routing

See my working example.. Hope this helps. Enjoy!