Навигация по алфавиту для пурпурных категорий

Я пытаюсь реализовать более легкую форму навигации для своего списка категорий, мне было интересно, может ли кто-нибудь указать мне в правильном направлении, как я собирался создать алфавитную навигационную систему над моим списком категорий. Пользователь должен иметь возможность нажимать на «A» или «B», и он будет отображать только категории, название которых начинается с этой буквы.

Я заполняю свой список категорий следующим образом:

<?php $children = explode( ",", $this->getCurrentCategory()->getChildren() ); ?> <div class="category-products"> <ul class="products-list"> <?php foreach( $children as $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>

Заранее благодарю!

Думаю, вы ищете такую функциональность: Альпабатическая навигация JQuery Для этого использования Следующий код:

Код jquery:

 <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 Код:

 <?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 as $_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 as $_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>

Таблицей стилей является:

 #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 a { 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; }