Как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику

Wordpress
31.03.2016

Чтобы было понятно, этот скрипт пишется для этого виджета:
Как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику

Скрипт будет написан для такой структуры (все лишние теги и классы удалены для простоты восприятия), в вашем шаблоне могут быть другие классы:

<ul class="product-categories">
  <li><a>Для малышей</a></li>
  <li><a>Для мальчиков</a></li>
  <li><a>Для девочек</a></li>
  <li class="cat-parent"><a>Прочие игрушки</a>
    <ul class='children'>
      <li><a>Фигурки и персонажи</a></li>
      <li><a>Игры</a></li>
      <li><a>Конструкторы и головоломки</a></li>
      <li><a>Другие игрушки</a></li>
    </ul>
  </li>
  <li class="cat-parent"><a>Прочие товары</a>
    <ul class='children'>
    <li class="cat-item cat-item-19"><a>Мобили</a></li>
    </ul>
  </li>
</ul>

Вы можете исправить скрипт под свои классы и под свою структуру:

$('.product-categories .cat-parent').children('a').click(function() {
  $(this).siblings('.children').slideToggle();
  return false;
});

Для дочернего меню нужно задать display: none; в стилях:

ul.children{
  display: none;
}

В некоторых шаблонах есть специальное поле для добавления своих js-кодов
Например:

Или добавить его в свой файл скриптов, например custom.js:

$(function() {
  $('.product-categories .cat-parent').children('a').click(function() {
    $(this).siblings('.children').slideToggle();
    return false;
  });
});

Пример

See the Pen category menu woocommerce open on click by Denis (@deniscreative) on CodePen.0

Рекомендую к прочтению:

Комментарии (10) к “Как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику”

  • YoS

    То что нужно! Но для неподготовленного пользователя следует добавить что скрипт вставляется в footer.php в теге <code></code>

    Ответить

  • Oleg

    Денис, уточни пожалуйста куда вставлять скрипт

    Ответить

    • Denis Creative

      В некоторых шаблонах есть специальное поле для добавления своих js-кодов
      Например:

      Или добавить его в свой файл скриптов, например custom.js:

      $(function() {
  $('.product-categories .cat-parent').children('a').click(function() {
    $(this).siblings('.children').slideToggle();
    return false;
  });
});
      Ответить

  • Рамиль

    Сделал все по инструкции, но почему то не работает. display:none сработало, а с раскрытием трудности возникли. Структура и классы идентичны. Можете подсказать в чем может быть дело?

    Ответить

    • Denis Creative

      Сложно сказать что-то не видя код. Это как сказать, что у меня тоже Mazda3, и я так же ремонтировал ходовую как и в статье, но стук сзади остался, может ли кто-то подсказать причину.
      Вариантов много, нужно смотреть.

      Ответить

  • Игорь

    Здравствуйте! А как переделать скрипт, что бы меню раскрывалось при наведении а не по клику?

    Ответить

    • Denis Creative

      Просто заменить .click на .hover будет не достаточно, необходимо переписать скрипт так:

      $(function() {
  $(".product-categories .cat-parent").hover(function() {
      $(this)
        .children(".children")
        .slideToggle();
      return false;
    });
});

      Но это будет не совсем удобно для пользователя.

      Пример – https://codepen.io/deniscreative/pen/mpYRWZ

      Ответить

  • Иван

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

    Как на вашем примере не получается.(

    Ответить

    • Denis Creative

      Возможно, у вас в шаблоне уже прописаны какие-то скрипты для меню с дочерними элементами. Нужно смотреть. Код в статье отлично работает на базовом шаблоне, проверено на нескольких проектах.

      Ответить

  • Вадим

    Древняя тема, но такая актуальная) Отличное качество кода, когда просто вставил – и работает как надо.
    Спасибо, Денис, за креатив и полезные заметки! Удачи во всём, надеюсь, всё хорошо у тебя.

    Мои 5 копеек – развитие идеи, позволяет не меняя шаблонов кастомизировать стандартный виджет категорий woocommerce.

    /*вставляем в стили :*/
    .cat-parent a
    {
    font-size: 15px!important;
    font-weight: 700;
    padding-bottom: 3px;
    /* border-bottom: 1px solid red; */
    }
    .site-main .product-categories .cat-parent ul.children
    {
    display: none;
    }
    .site-main .product-categories .cat-parent i
    {
    color: #fdfdfd;
    float: right;
    width: 31px;
    height: 23px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    padding-top: 3px;
    font-size: 17px;
    background-color: #72b64f;
    /* border: 1px solid black; */
    }
    .woocommerce .site-main .widget_product_categories li.cat-parent>a {
    font-weight: bold;
    display: inline-block;
    width: 87%;
    }
    .cat-parent a
    {
    border-bottom: 1px solid transparent;
    }
    .cat-parent.open a
    {
    border-bottom: 1px solid #72b64f;
    }

    /*вставляем в скрипты:*/
    $(‘.site-main .product-categories .cat-parent’).children(‘a’).after(
    ‘‘
    );

    $(function() {
    $(‘.product-categories .cat-parent’).children(‘i’).click(function() {
    $(this).siblings(‘.children’).slideToggle();

    if(!$(this).parent(‘.cat-parent’).hasClass(‘open’)){
    $(this).parent(‘.cat-parent’).addClass(‘open’);
    $(this).parent(‘.cat-parent’).children(‘i’).attr( “title”,”Свернуть”);
    }else{
    $(this).parent(‘.cat-parent’).removeClass(‘open’);
    $(this).parent(‘.cat-parent’).children(‘i’).attr( “title”,”Развернуть”);
    }
    return false;
    });
    });

    Ответить

Оставить комментарий