Как сделать такое меню «Категории товаров» Woocommerce?

Question

[globus812]

Как сделать такое меню "Категории товаров" Woocommerce, как на этом сайте mir-econom-sveta.com/? Там используется какой-то плагин для этого или можно внести какие-то изменения в код стандартного меню виджета "Категории товаров" Woocommerce?

У меня стоит тема Storefront (Wordpress + Woocommerce).

Answer 1

[WordPress WooCommerce]

Это функционал темы. Там используется какой то JS плагин типа этого jordnkr.github.io/collapsible

Comments

[globus812]

Спасибо за "наводку"! Самое интересное, что в новых версиях этой темы Porto уже нет такого меню (

Answer 2

[WP Panda]

Это стандартный виджет категории товаров, модифицированный через js ну и плюс стили
скрипт там такой :

// Woocommerce Widget Toggle
(function(theme, $) {

    theme = theme || {};

    var instanceName = '__wooWidgetToggle';

    var WooWidgetToggle = function($el, opts) {
        return this.initialize($el, opts);
    };

    WooWidgetToggle.defaults = {

    };

    WooWidgetToggle.prototype = {
        initialize: function($el, opts) {
            if ($el.data(instanceName)) {
                return this;
            }

            this.$el = $el;

            this
                .setData()
                .setOptions(opts)
                .build();

            return this;
        },

        setData: function() {
            this.$el.data(instanceName, this);

            return this;
        },

        setOptions: function(opts) {
            this.options = $.extend(true, {}, WooWidgetToggle.defaults, opts, {
                wrapper: this.$el
            });

            return this;
        },

        build: function() {
            var self = this,
                $el = this.options.wrapper;

            $el.parent().removeClass('closed');
            if (!$el.find('.toggle').length) {
                $el.append('<span class="toggle"></span>');
            }
            $el.find('.toggle').click(function() {
                if ($el.next().is(":visible")){
                    $el.parent().addClass('closed');
                } else {
                    $el.parent().removeClass('closed');
                }
                $el.next().stop().slideToggle(200);
                theme.refreshVCContent();
            });

            return this;
        }
    };

    // expose to scope
    $.extend(theme, {
        WooWidgetToggle: WooWidgetToggle
    });

    // jquery plugin
    $.fn.themeWooWidgetToggle = function(opts) {
        return this.map(function() {
            var $this = $(this);

            if ($this.data(instanceName)) {
                return $this.data(instanceName);
            } else {
                return new theme.WooWidgetToggle($this, opts);
            }

        });
    }

}).apply(this, [window.theme, jQuery]);

Comments

[globus812]

WP Panda, спасибо за ответ! Только пока не очень понимаю как им воспользоваться. Скрипт разместила в своем файле скриптов дочерней темы. Как теперь его интегрировать в макет виджета меню категорий товара.
В стандартном нет такого кода:

<li class="cat-item cat-item-6"><a href="http://svetshop-online.ru/categoru/bra/">Бра</a></li>
<li class="cat-item cat-item-9 current-cat cat-parent current"><a href="http://svetshop-online.ru/categoru/kartiny/">Картины</a>
<span class="toggle"></span>
	<ul class="children">
	<li class="cat-item cat-item-39"><a href="http://svetshop-online.ru/categoru/kartiny/kartiny-gobelen/">Картины Гобелен</a></li>
	<li class="cat-item cat-item-40"><a href="http://svetshop-online.ru/categoru/kartiny/kartiny-kollazhi-solomka/">Картины-коллажи, соломка</a></li>
	</ul>
</li>

Куда мне добавить отсутствующий код:
<span class="toggle"></span>

[WP Panda]

globus812, Это пример, того как у них реализовано.

плюс это только функция, ее ещще надо запустить, у них это сделано так
вам это надо под свою тему адаптировать
+ стили жеж надо, для правильной работы

// Woo Widget Toggle
    (function($) {

        'use strict';

        if ($.isFunction($.fn['themeWooWidgetToggle'])) {

            $(function() {
                $('.widget_product_categories, .widget_price_filter, .widget_layered_nav, .widget_layered_nav_filters, .widget_rating_filter').find('.widget-title').each(function() {
                    var $this = $(this),
                        opts;

                    var pluginOptions = $this.data('plugin-options');
                    if (pluginOptions)
                        opts = pluginOptions;

                    $this.themeWooWidgetToggle(opts);
                });
            });

        }

    }).apply(this, [jQuery]);

вот тут все это дело у них находится mir-econom-sveta.com/wp-content/themes/porto/js/th...