How to create Categories Grid (list) with images

Last modified by alexv on Mon, May 23, 2011 08:38
Source|Old Revisions  

This is an old revision of the document!


How to create Categories Grid (list) with images

Hi, the firs is search the path:

“app/design/frontend/default/TU_TEMPLATE/catalog/navigation”

in this path, we will create a file call “category_listing.phtml” without the quotes obviously.

This file will have the following code:

  1. <?php $_maincategorylisting=$this->getCurrentCategory()?>
  2. <?php $_categories=$this->getCurrentChildCategories()?>
  3. <h2><?php echo $this->__('Browse Products') ?> </h2>
  4. <div class="subcat-listing">
  5. <ul class="subcat-products">
  6. <? foreach ($_categories as $_category):?>
  7. <? if($_category->getIsActive()): ?>
  8. <?php $cur_category=Mage::getModel('catalog/category')->load($_category->getId()); ?>
  9. <?php $layer = Mage::getSingleton('catalog/layer'); ?>
  10. <?php $layer->setCurrentCategory($cur_category); ?>
  11. <? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
  12. <li> <a href="<?php echo $this->getCategoryUrl($_category) ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>">
  13. <img src="<?php echo $_imageUrl ?>" width="auto" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />
  14. </a>
  15. <h3><?php echo $this->htmlEscape($_category->getName()) ?></h3>
  16. <? if($_description=$this->getCurrentCategory()->getDescription()):?>
  17. <p class="category-description">
  18. <?php echo $_description ?></</p>
  19. <?php endif; ?>
  20. <? endif; ?>
  21. <? endif; ?>
  22. <?php endforeach; ?>
  23. </ul>
  24. </div>
  25. <?php $layer->setCurrentCategory($_maincategorylisting); ?>

Well, get on the server, and go to the magento admin panel.

Go to the menu “CMS/Static block” and go to the link that says “create new block”

In this block we will call it the same way that the file is, “category Listing” and identifier “category_listing.” We put in “enabled” and “content” we put the following:

category_listing.phtml

Now save your new block, and go to the menu “Catalog/Manage Categories”

Now we need find the categorie that we want to show the list with images. Select the categorie that you want, and in the tab “DISPLAY SETTINGS we set the next information:

DISPLAY MODE: just STATIC BLOCK CMS Block: Category Listing (the block that we create before) Is Anchor: NO

and now, “SAVE”. Remember that in the tab “Custom Design” you need select your template.

Well. Go to the fronted fo your store and link in the categorie that you custom before.

PS: remember insert a imagen in the categorie when you create this.

Regards

Felipe




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs