Question

我目前正在处理的Magento商店有一些类别，子类别太多，几乎占据了页面的一半，我不希望客户转到下一页或等待整个页面加载获取下一个子类别列表。所以我想实现一种方法，当它有超过11个子类别时显示加载更多按钮，并且当点击加载更多按钮时显示其他子类别 STRONG>。一旦它到达子类别列表的结尾，我想自动隐藏加载更多按钮并将其替换为加载少按钮应隐藏其余类别，并仅使用加载更多按钮显示11个子类别。

我确实尝试过其他论坛和教程网站中提到的一些方法，但它对我不起作用，它搞砸了网站。我附上了我准备使用的当前布局的截图。

enter image description here

更新：包含模板代码

<div class="row categories-nav">
    <?php if(count($this->getCurrentChildCategories()) > 0): ?>
     <?php $subCategories = array(); ?>
        <?php foreach ($this->getStoreCategories() as $_category): ?>
            <?php
                //arrange by Letter
                foreach($_category->getChildren() as $_sub){
                    $letter = substr(strtolower($_sub->getName()),0,1);
                    $subCategories[$letter][0]['name'] = $letter; //0 index is the letter
                    $i = 1;
                    while(isset($subCategories[$letter][$i])){
                        $i++;
                    }
                    $subCategories[$letter][$i]['name'] = $_sub->getName();
                    $subCategories[$letter][$i]['url'] = $this->getCategoryUrl($_sub);
                }
            ?>
        <?php endforeach ?>
        <?php
            $subCategories = array();
            //arrange by Letter
            $i = 0;
            foreach($this->getCurrentChildCategories() as $_sub){
                $subCategories[$i]['name'] = $letter; //0 index is the letter
                $subCategories[$i]['name'] = $_sub->getName();
                $subCategories[$i]['url'] = $this->getCategoryUrl($_sub);
                $i++;
            }
            //get a count of all elements for splitting
            echo '<h2>Sub Categories</h2>';
            echo '<div class="col-md-12">';             
            echo '<h3>Search By Categories</h3>';
            echo '<div class="sub-categories">';
            $i = 0;
            $mod = '#f6f6f6';
            foreach($subCategories as $sub){
                if($i != 0 && $i % 11 == 0){
                    echo '</div>';
                    echo '<span class="pull-right btn"><a href="#">Load more</a></span>';
                    echo '<div class="acc_container">';                 
                    echo '<div class="sub-categories sec block">';
                }
                echo '<button type="button" class="btn btn-success"><a href="'.$sub['url'].'">' . $sub['name'] . '</a></button>';
                $i++;
            }
            //how far are we from getting a complete row?
            if($i % 12 != 0){
                //we are not at a complete row
                while($i % 10 != 0){
                    echo '';
                    $i++;
                }
            }
            echo '</div>';
            echo '</div>';
            echo '</div>';
        ?>
    <?php endif; ?>
</div>

Answer 1

从未与Magento合作，但我知道它使用Prototype（开箱即用）。

所以我会找到整个生成的子类别列表（我想它是......）并通过JS（Prototype）来操作它。

很难给出准确的答案，但作为一个概念，我会查看负责此列表的模板，并且＆＃34;丰富＆＃34;列表中包含一些唯一的ID和类，因此我可以编写Prototype逻辑来处理可见性等。

Answer 2

Tnx，好的，我个人会添加课程＆＃34;隐藏＆＃34; （因为我可以看到它使用bootstrap（？））到循环中的类别（在第11个元素之后触发）所以在HTML中生成它们但不显示它们并动态添加第12个元素（显示/加载更多＆＃34;按钮＆＃34;），它们将具有Prototype事件监听器＆＃34; on click＆＃34;和＃34;切换＆＃34;的简单功能隐藏的div。）。

如果有数百个类别，我会＆＃34;切片＆＃34;它们在整个DIV（twelwe）中并且与上面相同（隐藏（和显示）类和JS切换，但是在所有12个元素上都有循环）。

如果仍然存在一些页面加载问题，我会写一个＆＃34;分页＆＃34;对于这些类别 - 具有分页功能的PHP函数/类 - 具有＆＃34;类别＆＃34;，＆＃34; offset＆＃34;，＆＃34; start＆＃34;作为参数 - 然后将Prototype作为AJAX调用（通过按钮单击触发）。

我不是非常原型的人，但我确信你可以在这里或网上找到很多例子...

这个，最后一种方法对我认为有点糟糕。

它还打开了另一个问题（如上所述） - 可以（我们希望它）用户书签（或蜘蛛查找）确切的子类别列表吗？如果是，则意味着额外的工作和处理（就像所有AJAX应用程序一样）......

也许，也许，所有这些子类别都可以用AI / UX方式解决？可以这么说 - 同时少了几个:)？

使用jQuery或其他可能的方法在click上显示更多子类别

2 个答案: