php - Alphabet navigation for magento categories -
i trying implement easier form of navigation list of categories, wondering if point me in right direction of how go setting alphabetic navigation system above list of categories. user must able press on either "a" or "b" , display categories name begins letter.
i populating list of categories follows:
<?php $children = explode( ",", $this->getcurrentcategory()->getchildren() ); ?> <div class="category-products"> <ul class="products-list"> <?php foreach( $children $child ): ?> <?php $_child = mage::getmodel( 'catalog/category' )->load( $child ); ?> <li class="item"> <img class="product-image" src="<?php echo $_child->getimageurl(); ?>" /> <h3> <?php echo $_child->getname() ?> </h3> <div class="cat-desc"> <?php echo $_child->getdescription(); ?> </div> <div class="cat-list-nav"> <a href="<?php echo $_child->geturl(); ?>"> <input type="button" onclick="window.location.href='<?php echo $_child->geturl(); ?>'" value="browse shop"/> </a> </div> </li> <?php endforeach; ?> </ul> </div> thank in advanced!
i think looking functionality : 
use following code :
jquery code :
<script> $x = jquery.noconflict(); $x(function() { var _alphabets = $x('.alphabet > a'); var _contentrows = $x('#countries-table tbody tr'); _alphabets.click(function() { var _letter = $x(this), _text = $x(this).text(), _count = 0; _alphabets.removeclass("active"); _letter.addclass("active"); _contentrows.hide(); _contentrows.each(function(i) { var _celltext = $x(this).children('td').eq(0).text(); if (regexp('^' + _text).test(_celltext)) { _count += 1; $x(this).fadein(400); } }); }); }); </script> phtml code :
<?php $innerhtml = ""; $_helper = mage::helper('catalog/category') ?> <?php $_categories = $_helper->getstorecategories() ?> <?php $currentcategory = mage::registry('current_category') ?> <?php if (count($_categories) > 0): ?> <?php foreach ($_categories $_category): $innerhtml.="<tr><td><a href=".$_helper->getcategoryurl($_category).">".$_category->getname()."</a></td></tr>"; ?> <?php $_category = mage::getmodel('catalog/category')->load($_category->getid()) ?> <?php $_subcategories = $_category->getchildrencategories() ?> <?php if (count($_subcategories) > 0): ?> <?php foreach ($_subcategories $_subcategory): $innerhtml.="<tr><td><a href=".$_helper->getcategoryurl($_subcategory).">".$_subcategory->getname()."</a></td></tr>"; ?> <?php endforeach; ?> <?php endif; ?> <?php endforeach; ?> <?php endif; ?> <h1>product categories</h1> <div class="alphabet" style=""> <a class="first" href="#">a</a> <a href="#">b</a> <a href="#">c</a> <a href="#">d</a> <a href="#">e</a> <a href="#">f</a> <a href="#">g</a> <a href="#">h</a> <a href="#">i</a> <a href="#">j</a> <a href="#">k</a> <a href="#">l</a> <a href="#">m</a> <a href="#">n</a> <a href="#">o</a> <a href="#">p</a> <a href="#">q</a> <a href="#">r</a> <a href="#">s</a> <a href="#">t</a> <a href="#">u</a> <a href="#">v</a> <a href="#">w</a> <a href="#">x</a> <a href="#">y</a> <a class="last" href="#">z</a> </div> <div id="conutries"> <table id="countries-table"> <thead><tr><th>category name</th></tr></thead> <tbody> <?php echo $innerhtml; ?> </tbody> </table> </div> stylesheet :
#conutries { width: 650px; background: white; } #countries-table { border-spacing: 2px; } .alphabet { margin: 0 0 10px; overflow: hidden; } .alphabet a, #countries-table tr { transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; } .alphabet { width: 20px; float: left; color: #333; cursor: pointer; height: 20px; border: 1px solid #ccc; display: block; padding: 2px 2px; font-size: 14px; text-align: center; line-height: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); border-right: none; text-decoration: none; background-color: #f1f1f1; } .alphabet a.first { border-radius: 3px 0 0 3px; } .alphabet a.last { border-right: 1px solid silver; border-radius: 0 3px 3px 0; } .alphabet a:hover, .alphabet a.active { background: #fbf8e9; font-weight: bold; }
Comments
Post a Comment