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

Тема в разделе "JavaScript", создана пользователем Sylon, 4 сен 2015.

Метки:
Модераторы: ZiX
  1. Sylon

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    289
    Симпатии:
    111
    Здравствуйте! Прошу помочь в изучении структуры взаимодействия html и jquerty на данном примере. Создание Аккордеон бокового меню на CMS Magento.
    Следуя этой статье: http://www.lotusseedsdesign.com/blog/accordion-menu-for-layered-nav не смог понять принцип каким образом подцепляется нужный скрипт?
    В общем у меня так и не получилось добиться какого либо результата и разобраться в теории... Очень хотелось бы понять этот механизм и сделать вертикальное меню, которое будет всегда отображаться и сохранять положение при обновлении страницы. Прошу прощения за возможный сумбур, буду очень признателен, если поможете разобраться в этих тонкостях.
     
    Последнее редактирование: 5 сен 2015
  2. ModuLe

    ModuLe Создатель

    Регистр.:
    8 сен 2015
    Сообщения:
    33
    Симпатии:
    6
    Итак прежде всего скачивать нужно скрипт jQuery 1.2.6 (в инструкции написано что именно он используеться в Шаблонах Магенто);
    Дальше, разпаковываем архив, и файл 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 нравится это.
  3. Sylon

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    289
    Симпатии:
    111
    Благодарю за ответ, дело в том, уже на данный момент протестировал и понял, что урок оказался очень старым и на сегодняшний день он не подходит. Пришлось начать изучать всё глубже, чтобы понять как на свежей версии поставить меню аккордеон. Проблема в том, что нет подходящих исходников. Уже третью неделю ломаю голову... Многие просто устанавливают шаблоны, но это не мой путь, они сильно замедляют загрузку сайта, так как перегружены ненужными функциями и скриптами. К сожалению пока не разобрался в чтении языков 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>
    Честно говоря глядя на этот код вообще не пойму, что тут за что отвечает...:-(
     
    Последнее редактирование: 10 сен 2015
    gonzik нравится это.
  4. psics

    psics Создатель

    Регистр.:
    2 сен 2014
    Сообщения:
    24
    Симпатии:
    11
    Вы б для начала jqwerty правильно написали)))
     
    Sylon нравится это.
  5. Sylon

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    289
    Симпатии:
    111
    Так в этом то и проблема, что нет хорошего исходника, вытащил из темы и только сейчас начал понимать, что там ничего не срастается... А в теме он работал... Но мне хочется сделать качественный шустрый аккордион. Помогите, пожалуйста, разобраться с этим. Понял, что первая часть отвечает за то, чтобы выводились категории, вторая часть это привязка селекторов для 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; ?>
     
    gonzik нравится это.
  6. psics

    psics Создатель

    Регистр.:
    2 сен 2014
    Сообщения:
    24
    Симпатии:
    11
    я бы не рекомендовал делать как вы хотите) судя по всему у вас мало опыта.
    Сразу скопируйте html аккордиона, перенесите стили и js. Все подключите и проверьте.
    А потом куда нужно настраивайте выводы...
     
    Sylon нравится это.
  7. psics

    psics Создатель

    Регистр.:
    2 сен 2014
    Сообщения:
    24
    Симпатии:
    11
    другими словами - разбивайте сложные дейтсвия на более простые... Особенно если мало опыта
     
    Sylon нравится это.
  8. psics

    psics Создатель

    Регистр.:
    2 сен 2014
    Сообщения:
    24
    Симпатии:
    11
    а суть js, закрыть по клику все пункты аккордиона, а тот по которому кликнули открыть... Это в словах) так и делается по идее и в аккордионе вашем. Ну плюс навешиваются всякие прибамбасы - эффекты)
     
    Sylon нравится это.
  9. Sylon

    Sylon

    Регистр.:
    1 мар 2015
    Сообщения:
    289
    Симпатии:
    111
    Проблема в том, что вроде есть простые действия, но из-за того, что делаю это в CSM Magento, там обычный html код аккордеона не подходит, нужна привязка к категориям.
     
    gonzik нравится это.
  10. psics

    psics Создатель

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

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

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

    </ul>