php - magento 类别的字母导航

Question

我正在尝试为我的类别列表实现一种更简单的导航形式，我想知道是否有人可以指出我将如何在我的类别列表上方设置字母导航系统的正确方向。用户必须能够按“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>

提前谢谢你！

Answer 1

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

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