Меню Accordeon, прошу помочь разобраться в теории! jQuerty

[Sylon]

Здравствуйте! Прошу помочь в изучении структуры взаимодействия html и jquerty на данном примере. Создание Аккордеон бокового меню на CMS Magento.
Следуя этой статье: Для просмотра ссылки Войди или Зарегистрируйся не смог понять принцип каким образом подцепляется нужный скрипт?
В общем у меня так и не получилось добиться какого либо результата и разобраться в теории... Очень хотелось бы понять этот механизм и сделать вертикальное меню, которое будет всегда отображаться и сохранять положение при обновлении страницы. Прошу прощения за возможный сумбур, буду очень признателен, если поможете разобраться в этих тонкостях.

 

[ModuLe]

Help!

Итак прежде всего скачивать нужно скрипт Для просмотра ссылки Войди или Зарегистрируйся (в инструкции написано что именно он используеться в Шаблонах Магенто);
Дальше, разпаковываем архив, и файл jQuery переносим на FTP в Магенто в папку со всеми ява-скриптами или отдельную папку как по инструкции jquery;

Дальше чтоб не конфликтовал этот jQuery с тем что по стандарту используеться в Магенто () нам советуют добавить в скрипте нашего файла в конце этот код:

jQuery.noConflict();

После заявить Магенто об использование нашего файла (тоесть подключить его), нужно в файле page.xml добавить следуйщий код:

<action method="addJs"><script>jquery/jquery-1.2.6.min.js</script></action>

Дальше правим файл view.phtml который разположен template/catalog/layer

Ищем чтото такое:

<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php if($_filter->getItemsCount()): ?>
<dt><?php echo $this->__($_filter->getName()) ?></dt>
<dd>
<?php echo $_filter->getHtml() ?>
</dd>
<?php endif; ?>
<?php endforeach; ?>
</dl>

и в строку надо добавить якорь на jQuery, ID которого = narrow-by-list:

<dt id="narrow-by-list"><a href="/"><?php echo $_filter->getName() ?></a></dt>

Дальше, так как в css класс narrow-by-list присутствует, нам нужно его проигнорировать, добавив в конец файла (того же view.phtml) этот код:

<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery("dl#narrow-by-list> dd:not(:first)").hide();
jQuery("dl#narrow-by-list> dt a").click(function(){
jQuery("dl#narrow-by-list> dd:visible").slideUp("fast");
jQuery(this).parent().next().slideDown("fast");
return false;
});
});
/* ]]> */
</script>

p.s. Установленой Магенты на данный момент нет, протестировать не могу, если интересует, могу посмотреть, (писать в ЛС)

 

[Sylon]

Благодарю за ответ, дело в том, уже на данный момент протестировал и понял, что урок оказался очень старым и на сегодняшний день он не подходит. Пришлось начать изучать всё глубже, чтобы понять как на свежей версии поставить меню аккордеон. Проблема в том, что нет подходящих исходников. Уже третью неделю ломаю голову... Многие просто устанавливают шаблоны, но это не мой путь, они сильно замедляют загрузку сайта, так как перегружены ненужными функциями и скриптами. К сожалению пока не разобрался в чтении языков html, php, jquery.
Сейчас планирую сделать так:
Создать файл my-name.phtml
В нём код, вытащенный из файла одной темы (в конце его приложу).
В файле catalog.hml я пропишу этот файл блоком.
А дальше одни вопросы, созданный мной файл и будет отвечать за сценарий меню и как оно себя ведёт? Я так понимаю jquery содержит в себе только базу команд и в ней ничего не надо писать. Ещё пока не дошёл до того как будет подключаться оформление CSS...

<?php
$storeId = Mage::app()->getStore()->getId();
//Get category model
$_category = Mage::getModel('catalog/category')->setStoreId($storeId);
$_cat = $_category->load(Mage::app()->getStore()->getRootCategoryId());
?>
<?php
    function getChildrenCategoriesHtmlContent($_category){
        $children = explode( ",", $_category->getChildren() );
        $content = '';
        $content .= '<li class="';
        if(!$children[0])
            $content .= 'has-no-children';
        else
            $content .= 'has-children';
        $content .= '">';
        $content .= '<a href="'.$_category->getUrl().'" ';
        $content .= '>'.$_category->getName().'</a>';
        if($children[0]){
            $content .= '<a href="javascript:void(0)" class="plus"><i class="icon-plus-squared"></i></a>';
            $content .= '<ul>';
            foreach($children as $child){
                $_subcat = Mage::getModel( 'catalog/category' )->load( $child );
                $content .= getChildrenCategoriesHtmlContent($_subcat);
            }
            $content .= '</ul>';
        }
        $content .= '</li>';
        return $content;
    }
?>
<div class="block block-category-nav">
    <div class="block-title">
        <strong><span><?php echo $this->__("Category") ?></span></strong>
    </div>
    <div class="block-content">
        <ul class="category-list">
            <?php
                $children = explode( ",", $_cat->getChildren() );
                foreach($children as $child){
                    $_category = Mage::getModel( 'catalog/category' )->load( $child );
                    echo getChildrenCategoriesHtmlContent($_category);
                }
            ?>
        </ul>
    </div>
<script type="text/javascript">
    jQuery(function($){
        $(".block.block-category-nav .block-title strong").click(function(){
            if($(this).hasClass("closed")){
                $(".block.block-category-nav .block-content").slideDown();
                $(this).removeClass("closed");
            } else {
                $(".block.block-category-nav .block-content").slideUp();
                $(this).addClass("closed");
            }
        });
        $(".block.block-category-nav .category-list a.plus").click(function(){
            if($(this).parent().hasClass("opened")){
                $(this).parent().children("ul").slideUp();
                $(this).parent().removeClass("opened");
                $(this).children("i.icon-minus-squared").removeClass("icon-minus-squared").addClass("icon-plus-squared");
            } else {
                $(this).parent().children("ul").slideDown();
                $(this).parent().addClass("opened");
                $(this).children("i.icon-plus-squared").removeClass("icon-plus-squared").addClass("icon-minus-squared");
            }
        });
    });
</script>
</div>

Честно говоря глядя на этот код вообще не пойму, что тут за что отвечает...:-(

 

[psics]

Вы б для начала jqwerty правильно написали)))

 

[Sylon]

Так в этом то и проблема, что нет хорошего исходника, вытащил из темы и только сейчас начал понимать, что там ничего не срастается... А в теме он работал... Но мне хочется сделать качественный шустрый аккордион. Помогите, пожалуйста, разобраться с этим. Понял, что первая часть отвечает за то, чтобы выводились категории, вторая часть это привязка селекторов для css, третья непосредственно скрипт, который должен оборачивать в аккордеон.

А чистовой файл выглядит так, но тут категории выводятся по типу фильтра.

?>
<?php if (!Mage::registry('current_category')) return ?>
<?php $_categories = $this->getCurrentChildCategories() ?>
<?php $_count = is_array($_categories)?count($_categories):$_categories->count(); ?>
<?php if($_count): ?>
<div class="block block-layered-nav block-layered-nav--no-filters">
    <div class="block-title">
        <strong><span><?php echo $this->__('Browse By') ?></span></strong>
    </div>
    <div class="block-content toggle-content open">
        <p class="block-subtitle block-subtitle--filter"><?php echo $this->__('Filter') ?></p>
        <dl id="narrow-by-list2">
            <dt><?php echo $this->__('Category') ?></dt>
            <dd>
                <ol>
                <?php foreach ($_categories as $_category): ?>
                    <?php if($_category->getIsActive()): ?>
                    <li>
                        <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="current"<?php endif; ?>>
                            <?php echo $this->escapeHtml($_category->getName()) ?>
                            <span class="count">(<?php echo $_category->getProductCount() ?>)</span>
                        </a>
                    </li>
                    <?php endif; ?>
                <?php endforeach ?>
                </ol>
            </dd>
        </dl>
        <script type="text/javascript">decorateDataList('narrow-by-list2')</script>
    </div>
</div>
<?php endif; ?>

 

[psics]

я бы не рекомендовал делать как вы хотите) судя по всему у вас мало опыта.
Сразу скопируйте html аккордиона, перенесите стили и js. Все подключите и проверьте.
А потом куда нужно настраивайте выводы...

 

[psics]

другими словами - разбивайте сложные дейтсвия на более простые... Особенно если мало опыта

 

[psics]

а суть js, закрыть по клику все пункты аккордиона, а тот по которому кликнули открыть... Это в словах) так и делается по идее и в аккордионе вашем. Ну плюс навешиваются всякие прибамбасы - эффекты)

 

[Sylon]

Проблема в том, что вроде есть простые действия, но из-за того, что делаю это в CSM Magento, там обычный html код аккордеона не подходит, нужна привязка к категориям.

 

[psics]

вы опять усложняете, а надо облегчить).
Сразу сделайте просто рабочий аккордион, без вытяжки с мадженто. А после того как убедитесь в работоспособности. Замените значения нужными...

к примеру у вас был html таким - все оч условно.

<ul>
<li>аккордион 1</li>
<li>аккордион 2</li>
<li>аккордион 3</li>
</ul>
У вас он работает - переходите дальше.
заменяете
<ul>
foreach (чтото as $item)
<li><?php echo $item; ?></li>

</ul>