Как отобразить категории и подкатегории в древовидном формате?

Question

Я хочу отобразить категории моего веб-сайта magento вместе с его подкатегориями в виде дерева, как дерево jquery. Когда я нажимаю на корневую категорию, появляются ее подкатегории, а затем, когда я нажимаю на одну из подкатегорий, должны отображаться ее продукты.

Категория1
-subcategory1
-subcategory2

Категория2
-subcategory1
-subcategory2

Подкатегории появятся, когда я нажму на корневую категорию. Как мне это сделать? Любая идея?

РЕДАКТИРОВАНИЕ
Вот мой код

<?php $_helper = Mage::helper('catalog/category') ?>
<?php $_categories = $_helper->getStoreCategories() ?>
<?php $currentCategory = Mage::registry('current_category') ?>
<?php if (count($_categories) > 0): ?>
    <ul>
        <?php foreach($_categories as $_category): ?>
            <li>
                <a href="<?php echo $_helper->getCategoryUrl($_category) ?>">
                    <?php echo $_category->getName() ?>
                </a>
                <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
                <?php $_subcategories = $_category->getChildrenCategories() ?>
                <?php if (count($_subcategories) > 0): ?>
                    <ul>
                        <?php foreach($_subcategories as $_subcategory): ?>
                            <li>
                                                        <?php echo '&nbsp;&nbsp;&nbsp;-'; ?>
                                <a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>">
                                    <?php echo $_subcategory->getName() ?>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Answer 1

Может быть, это может помочь вам

<div>
<?php $helper = $this->helper('catalog/category') ?>
    <?php $categories = $this->getStoreCategories() ?>
    <div id="navigation_vert">
    <?php if (count($categories) > 0): ?>
        <ul>
            <?php foreach($categories as $category): ?>
                <li>
                    <a class="navlink" href="<?php echo $helper->getCategoryUrl($category) ?>"><?php echo $this->escapeHtml($category->getName()) ?></a>
                    <div id="dropdown" class="dropdown">
                        <div>                       
                            <?php $subcategories = $category->getChildren() ?>
                            <?php if (count($subcategories) > 0): ?>
                            <?php $i=0;?>
                            <?php foreach($subcategories as $subcategory): ?>
                            <?php $i++;
                                if($i<3)
                                {
                                    if($i==1)
                                    {
                                        echo '<div style="float:left;">';
                                    }
                            ?>
                                <div class="firstlist">
                                <?php
                                }
                                else
                                {
                                    if($i==3)
                                    {
                                        echo '<div style="float:right;">';
                                    }
                                    echo '<div class="secondlist">';
                                }
                                ?>                                      
                                    <p>
                                        <strong>
                                            <a href="<?php echo $helper->getCategoryUrl($subcategory) ?>"><?php echo $this->escapeHtml(trim($subcategory->getName(), '- ')) ?></a>
                                        </strong>
                                    </p>
                                    <?php $subsubcategories = $subcategory->getChildren() ?>
                                    <?php if (count($subsubcategories) > 0): ?>
                                        <ul>
                                            <?php foreach($subsubcategories as $subsubcategory): ?>
                                                <li>
                                                    <a href="<?php echo $helper->getCategoryUrl($subsubcategory) ?>"><?php echo $this->escapeHtml(trim($subsubcategory->getName(), '- ')) ?></a>
                                                </li>
                                            <?php endforeach; ?>
                                        </ul>
                                    <?php endif; ?><!-- subsubcategories if e -->                                   
                                </div><!-- firstlist e -->
                                <?php
                                if($i==2 || $i==3)
                                {

                                    echo "</div>";//div 2 with style e

                                }
                                ?>                              
                            <?php endforeach; ?><!-- subcategories for e -->
                            <?php endif; ?><!-- subcategories if e -->

                        </div><!-- div 1 e -->
                    </div><!-- id dropdown_four e-->
                </li>
            <?php endforeach; ?><!-- categories e -->
        </ul>
    <?php endif; ?><!-- count main categories if e -->
    </div><!-- id navigation_vert e -->

</div>

В приведенном выше коде вы получите категории в том же порядке.
Добавлены подкатегории, чтобы сделать его свободным от сомнений.
Настройте его с вашими требованиями

Answer 2

Вы можете использовать компонент ExtJs на внешнем интерфейсе, а не использовать jquery без конфликтов:

http://www.magentocommerce.com/boards/viewthread/4139/

Вот пример дерева ExtJs:

http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/treegrid.html

Очевидно, что впереди вас ждет работа с книгами, если вы хотите использовать инструментарий Magento, используемый в админке.