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?

Improve this question
6
  • Try echo call_user_func_array( array(&$walker, 'walk'), array($categories, 2, array()) ); Commented Mar 23, 2018 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 :-)) Commented Mar 23, 2018 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. Commented Mar 23, 2018 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... Commented Mar 23, 2018 at 10:27
  • I Try to find how to collapse all cat by default in other word Commented Mar 23, 2018 at 12:48

1 Answer 1

Reset to default
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

Improve this answer
2
  • Perfect Sally !! sorry did say "Collapse" first in my post and no depth :-( Commented Mar 24, 2018 at 14:55
  • I'm glad it worked for you. =) Commented Mar 28, 2018 at 4:19

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.