Как я улучшил страницу категории Magento

Обо мне

Я являюсь подробным разработчиком, и я создавал сайты электронной коммерции и приложения с Magento 1.9 и Magento 2, которые я вполне увлечен.

Проблема, которую я хотел решить

В одном из проектов, над которыми я работал, моя задача состояла в том, чтобы улучшить Magento 1.9 по умолчанию по умолчанию по умолчанию по умолчанию, включив возможность иметь возможность иметь все категории со своими детьми, отображаемыми в меню, подобном дереву. Идея состоит в том, что меню останутся открытым в текущей категории на каждой странице обновления/перезагрузки.

Для чего это такое дерево меню?

Код, который я добавил в шаблон страницы категории в Magento, вместе с некоторым кодом jQuery и некоторыми хорошими изображениями для дерева, подобного дереву меню, предоставляет хороший опыт, имея меню левого дерева для навигации между категориями и их детьми и оставаться в том же место на странице Перезагрузка. За кулисами это комбинированная функциональность между PHP и jQuery JavaScript.

Tech Stack

Прежде всего, для тематического пакета Layout.xml я объявил свой пользовательский шаблон, используемый для левого навигационного слоя на странице категории. Страница использует шаблон «Page/2Column leals.phtml». КОДА Вход для local.xml:

Здесь я покажу содержимое файла custom_left.phtml, который находится в приложении/design/frontend/themename/шаблон/каталог каталога/навигации:



    
        Categories 
    

        helper('catalog/category') ?>
        getId(); ?>
        getStoreCategories() ?>
         0): ?>
            
                
        
                        
                       
                            escapeHtml($category->getName()) ?>
                        isCategoryActive($category)): ?>
                        load($category->getId());
                              $subcategories = $actualcategory->getChildrenCategories(); ?>
                         0): ?>
                            
                                
              
                                    
                                    escapeHtml(trim($subcategory->getName(), '- ')) ?>
                                    load($subcategory->getId());
                                        $subsubcategories = $actualcategorysubcategory->getChildrenCategories(); ?>

                                     0): ?>
                                        
                                            
                                            
                                                    escapeHtml(trim($secondLevelSubcategory ->getName(), '- ')) ?>

И, наконец, я опубликую JavaScript JQuery Lines, которые позаботятся о поведении меню, сделав его открытым и закрытым с элегантным легкостью, а также оставаться открытым в текущей категории/подкатегории при перезагрузке. Этот файл JavaScript должен быть расположен в каталоге кожи темы, и, конечно, он должен быть загружен в заголовок проекта для работы в магии (образец Путь: Skin/Frontend/Themename/default/js/file.js), предоставленный jQuery уже загружен и присутствует в заголовке приложений.

jQuery(document).ready(function(){
/*  Jewels Category Page   */

    if(jQuery('#leftnav-tree li.level0 ul').length > 0)
    {
        jQuery('#leftnav-tree li.level0 ul').parent().find('label').addClass('contentContainer');
    }

    if(jQuery('li.level2').length > 0)
    {
        jQuery('li.level2').parent().parent().find('label').removeClass('contentContainer').addClass('contentContainerSub');
    }

    if(jQuery('#leftnav-tree li.level0 ul li.level1').find('label').hasClass('contentContainer'))
    {
        jQuery('#leftnav-tree li.level0 ul li.level1').find('label').removeClass('contentContainer');
    }

    if(jQuery('#leftnav-tree li.level0.active').find('label').hasClass('contentContainer'))
    {
        jQuery('#leftnav-tree li.level0.active').addClass('opened');
    }

    if(jQuery('#leftnav-tree li.level0 > ul li.level1.active'))
    {
        jQuery('#leftnav-tree li.level0 > ul li.level1.active').parent().css('display', 'block');
        jQuery('#leftnav-tree li.level0 > ul li.level1.active').parent().parent().addClass('opened');

    }

    if(jQuery('#leftnav-tree li.level1 > ul li.level2.active'))
    {
        jQuery('#leftnav-tree li.level1 > ul li.level2.active').parent().css('display', 'block');
        if(jQuery('#leftnav-tree li.level1 > ul li.level2.active').parent().parent().find('label').hasClass('contentContainerSub'))
        {
            jQuery('#leftnav-tree li.level1 > ul li.level2.active').parent().parent().addClass('opened');
        }

        jQuery('#leftnav-tree li.level1 > ul li.level2.active').parent().parent().parent().css('display', 'block');
        jQuery('#leftnav-tree li.level1 > ul li.level2.active').parent().parent().parent().parent().addClass('opened');

    }

    jQuery('ul.level0 label.contentContainer').on('click', function(ev) {
        ev.preventDefault();
        jQuery(this).parent('li.level0').children('ul.level1').closest('ul.level1').slideToggle();
        jQuery(this).parent('li.level0').closest('li.level0').toggleClass('opened');

    });

    jQuery('ul.level1 label.contentContainerSub').on('click', function(ev) {
        ev.preventDefault();
        jQuery(this).parent('li.level1').children('ul.level2').closest('ul.level2').slideToggle();
        jQuery(this).parent('li.level1').closest('li.level1').toggleClass('opened');
    });
 });

И, конечно же, есть некоторые правила CSS, которые вы можете использовать для улучшения или настройки в соответствии с вашими потребностями проекта. Изображения для дерева, подобного деревам меню – «Toggle-Mell-Expart.png» для открытой ветви дерева и «Toggle-Small.png» для замкнутой ветви дерева. Эти стили просто есть для руководства, но некоторые из них являются обязательными для дерева, чтобы вести себя соответственно:

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 10px;
}

/*
CATEGORY MENU FIX 
 */
.breadcrumbs ul
{
  list-style-type: none;
}
.breadcrumbs li
{
    display: inline;
}
.pages strong
{
    display: none;
}
ul#leftnav-tree
{
    padding: 10px 0 0 20px;
    width: 300px;
    text-align: left;
}

.active
{
    font-weight: 700;
}
ul#leftnav-tree li
{
    position: relative;
    margin-left: 0;
    list-style-type: none;
}
#leftnav-tree li
{
    padding-left: 15px;
}
#leftnav-tree label.contentContainer {
    background:url('../images/toggle-small-expand.png') no-repeat 0 5px;
    color: #FFFFFF;
    cursor: pointer;
  width: 16px;
  height: 17px;
}

 #leftnav-tree li.level0.opened label.contentContainer {
    background:url('../images/toggle-small.png') no-repeat 0 5px;
    color: #FFFFFF;
  width: 16px;
  height: 17px;
}
#leftnav-tree label.contentContainerSub {
    background:url('../images/toggle-small-expand.png') no-repeat 0 5px;
    color: #FFFFFF;
    cursor: pointer;
    width: 16px;
    height: 17px;
}
#leftnav-tree li.level1.opened label.contentContainerSub {
    background:url('../images/toggle-small.png') no-repeat 0 5px;
    color: #FFFFFF;
    width: 16px;
    height: 17px;
}

#leftnav-tree ul.level1, #leftnav-tree ul.level2
{
    display:none;
}
#leftnav-tree li.level0.active > ul.level1
{
  display:block;
}
ul.products-grid li
{
    list-style-type: none;
    display: inline-block; /*necessary*/
    margin-bottom: 7px;
}
.products-grid {
    height: auto; /*your fixed height*/
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}

ul.products-list li
{
    list-style-type: none;
}
ul.add-to-links li
{
  display: inline-block;
}
.products-list li
{
    display: block; /*necessary*/
    margin-bottom: 7px;
}
.product-info .actions button.btn-cart {
     margin: 10px auto 10px;
     letter-spacing: 3px;
     width: 80%;
     display: block;
     border-radius: 30px;
     -moz-border-radius: 30px;
     -webkit-border-radius: 30px;
     border: 1px solid #666699;
     background: #666699;
     font-family: 'Questrial';
     font-size: 16px;
     text-transform: uppercase;
     color: #fff;
     padding: 15px 20px;
     transition: all 0.3s ease;
 }
.product-shop .action button.btn-cart {
    margin: 10px auto 10px;
    letter-spacing: 3px;
    width: 30%;
    display: block;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border: 1px solid #666699;
    background: #666699;
    font-family: 'Questrial';
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    padding: 15px 20px;
    transition: all 0.3s ease;
}

Процесс построения этой особенности

Во время этой функции отладки я столкнулся с некоторыми проблемами, делая работу кода jQuery, как ожидалось, но все это отлично работало в конце.

Проблемы я столкнулся

Это была хорошая проблема, поскольку там не так много гидов о том, как добиться такой особенности в Magento Layered навигации. Я чувствовал себя очень доволен, чтобы увидеть все это, хорошо работаю вместе.

Назначение ключей

Я узнал о возможности объединения языка PHP-сервера и бессмысленного jQuery неожиданным способом.

Окончательные мысли и следующие шаги

Я с нетерпением жду возможности поделиться своим опытом других вдохновляющих проектов в Magento 1.9 и Magento 2. Я надеюсь, что вдохновения и руководство от других работ по разработчикам также в этих рамках. И я извиняюсь, если эта страница не отображается в частях, где он содержит код (

Если вы найдете этот код полезным, пожалуйста, опубликуйте свои комментарии!