Magento Category Collection Grid/List View

Now let start with explanation and steps. Please go through the previous blog on paging to understand this better.

 

Step1: IndexController

In the indexcontroller of your module we will write very simple code, to just load and render the layout.

1
2
3
4
5
6
7
8
9
<?php
class Excellence_Collection_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        $this->loadLayout();    
        $this->renderLayout();
    }
}

Step2: Layout

Next in our layout file we will load the relevant block class and phtml file. So there is the code

1
2
3
4
5
6
7
8
9
<?xml version="1.0"?>
<layout version="0.1.0">
    <collection_index_index>
        <reference name="content">
            <block type="collection/collection" name="product_list" template="collection/collection.phtml">
            </block>
        </reference>
    </collection_index_index>
</layout>

Step3: Block

This is the code to put in our block class ‘collection/collection’. The explanation of this code is already given in the previous blog post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<?php
class Excellence_Collection_Block_Collection extends Mage_Core_Block_Template
{
 
    public function __construct()
    {
        parent::__construct();
        $parent_id = Mage::app()->getStore()->getRootCategoryId();
        if($this->getRequest()->getParam('category_id',false)){
            $parent_id = $this->getRequest()->getParam('category_id');
        }
        $collection = Mage::getModel('catalog/category')->getCollection();
        $collection->addFieldToFilter('parent_id',$parent_id);
        $collection->addIsActiveFilter();
        $collection->addNameToResult();
        $collection->addUrlRewriteToResult();
        //$collection->setLoadProductCount(true);
        $this->setCollection($collection);
    }
 
    protected function _prepareLayout()
    {
        parent::_prepareLayout();
 
        $parent_id = Mage::app()->getStore()->getRootCategoryId();
        if($this->getRequest()->getParam('category_id',false)){
            $parent_id = $this->getRequest()->getParam('category_id');
        }
        $category = Mage::getModel('catalog/category')->load($parent_id);
 
        if ($headBlock = $this->getLayout()->getBlock('head')) {
            if ($title = $category->getMetaTitle()) {
                $headBlock->setTitle($title);
            }
            if ($description = $category->getMetaDescription()) {
                $headBlock->setDescription($description);
            }
            if ($keywords = $category->getMetaKeywords()) {
                $headBlock->setKeywords($keywords);
            }
        }
        $this->setTitle($category->getName());
 
 
        $toolbar = $this->getToolbarBlock();
 
        // called prepare sortable parameters
        $collection = $this->getCollection();
 
        // use sortable parameters
        if ($orders = $this->getAvailableOrders()) {
            $toolbar->setAvailableOrders($orders);
        }
        if ($sort = $this->getSortBy()) {
            $toolbar->setDefaultOrder($sort);
        }
        if ($dir = $this->getDefaultDirection()) {
            $toolbar->setDefaultDirection($dir);
        }
        $toolbar->setCollection($collection);
 
        $this->setChild('toolbar', $toolbar);
        $this->getCollection()->load();
        return $this;
    }
    public function getDefaultDirection(){
        return 'asc';
    }
    public function getAvailableOrders(){
        return array('name'=> 'Name','position'=>'Position','children_count'=>'Sub Category Count');
    }
    public function getSortBy(){
        return 'name';
    }
    public function getToolbarBlock()
    {
        $block = $this->getLayout()->createBlock('collection/toolbar', microtime());
        return $block;
    }
    public function getMode()
    {
        return $this->getChild('toolbar')->getCurrentMode();
    }
 
    public function getToolbarHtml()
    {
        return $this->getChildHtml('toolbar');
    }
}

also we need to create the block class ‘collection/toolbar’ which is used in the above class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
class Excellence_Collection_Block_Toolbar extends Mage_Catalog_Block_Product_List_Toolbar{
    public function getPagerHtml()
    {
        $pagerBlock = $this->getLayout()->createBlock('page/html_pager');
  
        if ($pagerBlock instanceof Varien_Object) {
  
            /* @var $pagerBlock Mage_Page_Block_Html_Pager */
            $pagerBlock->setAvailableLimit($this->getAvailableLimit());
  
            $pagerBlock->setUseContainer(false)
            ->setShowPerPage(false)
            ->setShowAmounts(false)
            ->setLimitVarName($this->getLimitVarName())
            ->setPageVarName($this->getPageVarName())
            ->setLimit($this->getLimit())
            ->setCollection($this->getCollection());
            return $pagerBlock->toHtml();
        }
        return '';
    }
}

Step4: PHTML Files

The last file remaining is the collections.phtml file. In this we will put the html code to display our category collection

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?php echo $this->getMessagesBlock()->getGroupedHtml() ?>
<?php $collection = $this->getCollection(); ?>
<div class="page-title">
    <h1><?php echo $this->__($this->getTitle()) ?></h1>
</div>
<?php echo $this->getToolbarHtml(); ?>
<?php if($collection->getSize()): ?>
 
    <?php if($this->getMode()!='grid'): ?>
    <!-- List Model -->
    <?php $_iterator = 0; ?>
    <ol class="products-list" id="products-list">
    <?php foreach ($collection as $category):
        $category = Mage::getModel('catalog/category')->load($category->getId()); ?>
        <li class="item<?php if( ++$_iterator == sizeof($collection) ): ?> last<?php endif; ?>">
            <?php // Product Image ?>
            <a href="<?php echo $category->getUrl() ?>" title="<?php echo $this->stripTags($category->getName()); ?>" class="product-image"><img src="<?php echo $category->getImageUrl() ?>" width="135" height="135" alt="<?php echo $this->stripTags($category->getName()); ?>" /></a>
            <?php // Product description ?>
            <div class="product-shop">
                <div class="f-fix">
                    <?php $_productNameStripped = $this->stripTags($category->getName(), null, true); ?>
                    <h2 class="product-name"><a href="<?php echo $category->getUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $category->getName(); ?></a></h2>
                    <div class="desc std">
                        <?php echo $category->getDescription(); ?>
                    </div>
                    <?php if($category->getChildrenCount()){ ?>
                    <div>
                        <a href='<?php echo $this->getUrl('*/*/*',array('category_id'=>$category->getId()))?>'>View Sub Category</a>
                    </div>
                    <?php } ?>
                </div>
            </div>
        </li>
    <?php endforeach; ?>
    </ol>
    <script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
    <?php else: ?>
 
    <!-- Grid Mode -->
 
    <?php $_collectionSize = $collection->count() ?>
    <?php
        $_columnCount = $this->getColumnCount();
        if(!$_columnCount){
            $_columnCount = 3;
        }
    ?>
    <?php $i=0; foreach ($collection as $category):
    $category = Mage::getModel('catalog/category')->load($category->getId());
    ?>
        <?php if ($i++%$_columnCount==0): ?>
        <ul class="products-grid">
        <?php endif ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <a href="<?php echo $category->getUrl() ?>" title="<?php echo $this->stripTags($category->getName()); ?>" class="product-image"><img src="<?php echo $category->getImageUrl() ?>" width="135" height="135" alt="<?php echo $this->stripTags($category->getName()) ?>" /></a>
                <h2 class="product-name"><a href="<?php echo $category->getUrl() ?>" title="<?php echo $category->getUrl() ?>"><?php echo $category->getName() ?></a></h2>
                <?php if($category->getChildrenCount()){ ?>
                <div>
                    <a href='<?php echo $this->getUrl('*/*/*',array('category_id'=>$category->getId()))?>'>View Sub Category</a>
                </div>
                <?php } ?>
            </li>
        <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
        </ul>
        <?php endif ?>
        <?php endforeach ?>
        <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
    <?php endif; ?>
 
<?php echo $this->getToolbarHtml(); ?>
<?php else: ?>
    <p><?php echo $this->__('The collection is empty.'); ?></p>
<?php endif ?>

Now open your modules index URL in my case www.mymagento.com/collection and there you will see the category list.

– See more at: http://excellencemagentoblog.com/magento-category-collection-gridlist-view#sthash.6JKu5TTR.dpuf

Revisions

No comments yet.

Leave a Reply