magento类别的字母导航 [英] Alphabet navigation for magento categories

问题描述

我正在尝试为我的类别列表实施一种更简单的导航形式，我想知道是否有人可以向我指出正确的方向，说明如何在类别列表上方建立字母导航系统.用户必须能够按"A"或"B"，并且它将仅显示名称以该字母开头的类别.

I am trying to implement an easier form of navigation for my list of categories, I was wondering if anybody could point me in the right direction of how I would go about setting up an alphabetic navigation system above my list of categories. The user must be able to press on either "A" or "B" and it will only display the categories which name begins with that letter.

我正在按以下方式填充类别列表:

I am populating my list of categories as follows:

<?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>

非常感谢您！

推荐答案

我认为您正在寻找这样的功能:为此，请使用以下代码:

I Think you are looking for the functionality like this : For This Use Following Code :

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

这篇关于magento类别的字母导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！