0

I'v create custom categories walker menu:

   <?php
    /**
     * Show Categories menu
     *
     */
    $seller_id = (int) get_query_var('author');
    ?>
    <aside class="cat-menu">
        <h3 class="cat-menu-title"><?php echo "Catégories"; ?></h3>
        <div id="cat-drop-stack">
        <?php

        global $wpdb;

        $sql = "SELECT t.term_id,t.name, tt.parent FROM $wpdb->terms as t
                    LEFT JOIN $wpdb->term_taxonomy as tt on t.term_id = tt.term_id
                    LEFT JOIN $wpdb->term_relationships AS tr on tt.term_taxonomy_id = tr.term_taxonomy_id
                    LEFT JOIN $wpdb->posts AS p on tr.object_id = p.ID
                    WHERE tt.taxonomy = 'product_cat'
                    AND p.post_type = 'product'
                    AND p.post_status = 'publish'
                    AND p.post_author = $seller_id GROUP BY t.term_id";

        $categories = $wpdb->get_results( $sql );
        //var_dump($categories);

        $walker = new Dokan_Store_Category_Walker( $seller_id );
        echo "<ul style=\"width:250px;height:400px;overflow: scroll;\">";
        echo call_user_func_array( array(&$walker, 'walk'), array($categories, 0, array()) );
        echo "</ul>";
        ?>
        </div>
    </aside>
    <script>
        ( function ( $ ) {
            $( '#cat-drop-stack li.has-children' ).on( 'click', '> a span.caret-icon', function ( e ) {
                e.preventDefault();
                var self = $( this ),
                    liHasChildren = self.closest( 'li.has-children' );

                if ( !liHasChildren.find( '> ul.children' ).is( ':visible' ) ) {
                    self.find( 'i.fa' ).addClass( 'fa-rotate-90' );
                    if ( liHasChildren.find( '> ul.children' ).hasClass( 'level-0' ) ) {
                        self.closest( 'a' ).css( { 'borderBottom': 'none' } );
                    }
                }

                liHasChildren.find( '> ul.children' ).slideToggle( 'fast', function () {
                    if ( !$( this ).is( ':visible' ) ) {
                        self.find( 'i.fa' ).removeClass( 'fa-rotate-90' );

                        if ( liHasChildren.find( '> ul.children' ).hasClass( 'level-0' ) ) {
                            self.closest( 'a' ).css( { 'borderBottom': '1px solid #eee' } );
                        }
                    }
                } );
            } );
        } )( jQuery );
    </script>
    <?php

and the class:

class Dokan_Store_Category_Walker extends Dokan_Category_Walker {

    function __construct( $seller_id ) {
        $this->store_url = dokan_get_store_url ( $seller_id );
    }

    function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
        extract( $args );
        $indent = str_repeat( "\t", $depth );

        $url = $this->store_url . 'section/' . $category->term_id;
        $selected_cat = get_query_var( 'term' );
        $a_selected_class = $selected_cat == $category->term_id ? 'class="selected"' : '';

        if ( $depth == 0 ) {
            $caret = $args['has_children'] ? ' <span class="caret-icon"><i class="fa fa-angle-right" aria-hidden="true"></i></span>' : '';
            $class_name = $args['has_children'] ? ' class="has-children parent-cat-wrap"' : ' class="parent-cat-wrap"';
            $output .= $indent . '<li' . $class_name . '>' . "\n\t" .'<a href="' . $url . '"'. $a_selected_class .'>' . $category->name . $caret . '</a>' . "\n";
        } else {
            $caret = $args['has_children'] ? ' <span class="caret-icon"><i class="fa fa-angle-right" aria-hidden="true"></i></span>' : '';
            $class_name = $args['has_children'] ? ' class="has-children"' : '';
            $output .= $indent . '<li' . $class_name . '><a href="' . $url . '"'.$a_selected_class.'>' . $category->name . $caret . '</a>';
        }
    }
}

Actually all depth are opened, e.g.:

cat01
 cat01_1
  cat01_1_1
 cat01_2
cat02
 cat02_1

I need menu like this (not all the sub cat opened):

cat01
 cat01_1
 cat01_2
cat02
 cat02_1

How can I fix this?

  • Try echo call_user_func_array( array(&$walker, 'walk'), array($categories, 2, array()) ); – Sally CJ Mar 23 '18 at 6:06
  • Hey Sally, thank you so much !!! :-) finaly works fine, why this is not documented anywhere ? searched few days... google not my friend for this :-)) – ilanb Mar 23 '18 at 8:08
  • What I suggested is to change the depth arg (which you previously set it to 0); and depth is actually well-documented in the default 'walker' class: Walker_Category (see line #89 of the source/code), which I believe is the class that's being extended by the Dokan_Category_Walker class. – Sally CJ Mar 23 '18 at 8:56
  • Thanks sally, but after some test when I use deph 2 if I try to click to open subcat (deph 3) this not work, subcat are not avaible. I need all cat and subcat, this why I used 0 for deph but I need too close all deph by default because I have lot off cat... – ilanb Mar 23 '18 at 10:27
  • I Try to find how to collapse all cat by default in other word – ilanb Mar 23 '18 at 12:48
0

I Try to find how to collapse all cat by default in other word

In that case, then try this script (replace the one you have now):

<script>
    ( function ( $ ) {
        $( 'li.has-children', '#cat-drop-stack' ).on( 'click', '> a span.caret-icon', function ( e ) {
            e.preventDefault();
            var self = $( this ),
                submenu = self.closest( 'li.has-children' ).find( '> ul.children' );

            if ( !submenu.is( ':visible' ) ) {
                self.find( 'i.fa' ).addClass( 'fa-rotate-90' );
                if ( submenu.hasClass( 'level-0' ) ) {
                    self.closest( 'a' ).css( { 'borderBottom': 'none' } );
                }
            }

            submenu.slideToggle( 'fast', function () {
                if ( !$( this ).is( ':visible' ) ) {
                    self.find( 'i.fa' ).removeClass( 'fa-rotate-90' );

                    if ( submenu.hasClass( 'level-0' ) ) {
                        self.closest( 'a' ).css( { 'borderBottom': '1px solid #eee' } );
                    }
                }
            } );
        } )
        .find( '> ul.children' ).hide().end()
        .filter( '.level-0' ).find( '> a span.caret-icon' ).click();
    } )( jQuery );
</script>

Demo on CodePen

  • Perfect Sally !! sorry did say "Collapse" first in my post and no depth :-( – ilanb Mar 24 '18 at 14:55
  • I'm glad it worked for you. =) – Sally CJ Mar 28 '18 at 4:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.