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

我认为你正在寻找这样的功能： Alpabatical Navigation 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;
}

magento类别的字母导航

1 个答案: