Custom Category Accordion

				
					/**
 * Returns all product categories grouped by parent ID.
 * Uses a static variable so that the query only runs once per page load.
 *
 * @return array Associative array where keys are parent IDs and values are arrays of term objects.
 */
function get_all_product_category_groups() {
    static $groups = null;
    if ( $groups === null ) {
        $terms = get_terms( array(
            'taxonomy'   => 'product_cat',
            'hide_empty' => false,
        ) );
        $groups = array();
        if ( ! is_wp_error( $terms ) ) {
            foreach ( $terms as $term ) {
                $groups[ $term->parent ][] = $term;
            }
        }
    }
    return $groups;
}

/**
 * Recursively builds the product category list using the pre-cached groups.
 *
 * @param int   $parent    The parent term ID.
 * @param int   $level     The current depth level (1 = parent, 2 = subcategory, 3 = sub‑subcategory).
 * @param array $active_ids Array of active term IDs (active category and its ancestors).
 * @param int   $active_cat The active category term ID.
 *
 * @return string HTML markup for the list.
 */
function build_product_category_list( $parent = 0, $level = 1, $active_ids = array(), $active_cat = 0 ) {
    if ( $level > 3 ) {
        return '';
    }
    
    $groups = get_all_product_category_groups();
    if ( empty( $groups[ $parent ] ) ) {
        return '';
    }
    
    // For non-root lists: if the parent is not in the active chain, add the "collapsed" class.
    $ul_class = 'accordion-list';
    if ( $parent != 0 && ! in_array( $parent, $active_ids ) ) {
        $ul_class .= ' collapsed';
    }
    
    $html = '<ul class="' . esc_attr( $ul_class ) . '">';
    foreach ( $groups[ $parent ] as $cat ) {
        if ( $cat->name === "Uncategorised" ) {
            continue;
        }
        // Determine classes based on depth.
        switch ( $level ) {
            case 1:
                $link_class     = 'parent-category';
                $li_extra_class = ' parent-item';
                break;
            case 2:
                $link_class     = 'subcategory';
                $li_extra_class = ' subcategory-item';
                break;
            case 3:
                $link_class     = 'sub-subcategory';
                $li_extra_class = ' sub-subcategory-item';
                break;
            default:
                $link_class     = '';
                $li_extra_class = '';
        }
        
        $html .= '<li class="accordion-item' . esc_attr( $li_extra_class ) . '">';
        
        // If this is the active category, add the "active-category" class on the title container.
        $active_class  = ( $cat->term_id == $active_cat ) ? ' active-category' : '';
        // Mark the title container as expanded if it's in the active chain.
        $expanded_attr = in_array( $cat->term_id, $active_ids ) ? ' data-expanded="true"' : '';
        $html        .= '<span class="product-category-title' . esc_attr( $active_class ) . '"' . $expanded_attr . '>';
        $html        .= '<a href="' . esc_url( get_term_link( $cat, "product_cat" ) ) . '" class="' . esc_attr( $link_class ) . '">' . esc_html( $cat->name ) . '</a>';
        
        // Only output the toggle arrow if there are child categories.
        $child_html = build_product_category_list( $cat->term_id, $level + 1, $active_ids, $active_cat );
        if ( $child_html ) {
            // Set the icon based on whether the category is in the active chain.
            $icon_class = in_array( $cat->term_id, $active_ids ) ? 'fa-chevron-up' : 'fa-chevron-down';
            $html      .= '<span class="toggle-arrow"><i class="fa ' . esc_attr( $icon_class ) . '"></i></span>';
        }
        $html .= '</span>';
        
        // Append nested children.
        if ( $child_html ) {
            $html .= $child_html;
        }
        
        $html .= '</li>';
    }
    $html .= '</ul>';
    
    return $html;
}

/**
 * Shortcode callback to output the product category accordion.
 * Now uses a unique container ID so that multiple instances do not conflict.
 *
 * @return string HTML markup for the accordion.
 */
function product_category_accordion_shortcode() {
    // Track active category if on a product category archive.
    $active_cat = 0;
    $active_ids = array();
    if ( is_product_category() ) {
        $current_term = get_queried_object();
        $active_cat   = $current_term->term_id;
        $ancestors    = get_ancestors( $active_cat, 'product_cat' );
        $active_ids   = array_merge( array( $active_cat ), $ancestors );
    }

    // Generate a unique ID for this accordion instance.
    static $shortcode_counter = 0;
    $shortcode_counter++;
    $unique_id = 'accordion-' . $shortcode_counter . '-' . uniqid();

    $output  = '<div class="category-accordion" id="' . esc_attr( $unique_id ) . '">';
    $output .= build_product_category_list( 0, 1, $active_ids, $active_cat );
    $output .= '</div>';
    
    // Inline JavaScript scoped to this instance.
    $output .= '
    <script type="text/javascript">
    (function(){
        var accordion = document.getElementById("' . esc_js( $unique_id ) . '");
        if (!accordion) return;
        
        function toggleChildList(childList, icon) {
            if(childList.classList.contains("collapsed")) {
                childList.classList.remove("collapsed");
                if(icon){
                    icon.classList.remove("fa-chevron-down");
                    icon.classList.add("fa-chevron-up");
                }
            } else {
                childList.classList.add("collapsed");
                if(icon){
                    icon.classList.remove("fa-chevron-up");
                    icon.classList.add("fa-chevron-down");
                }
            }
        }
        
        var titleContainers = accordion.querySelectorAll(".product-category-title");
        titleContainers.forEach(function(container) {
            var li = container.closest("li.accordion-item");
            var childUl = li.querySelector("ul.accordion-list");
            if(childUl){
                container.addEventListener("click", function(e) {
                    var link = container.querySelector("a");
                    if(e.target.closest("a")) {
                        if(!container.dataset.expanded){
                            e.preventDefault();
                            if(childUl.classList.contains("collapsed")){
                                toggleChildList(childUl, container.querySelector("i"));
                            }
                            container.dataset.expanded = "true";
                        }
                        return;
                    } else {
                        toggleChildList(childUl, container.querySelector("i"));
                        if(!childUl.classList.contains("collapsed")){
                            container.dataset.expanded = "true";
                        }
                    }
                });
            }
        });
    })();
    </script>
    ';
    
    return $output;
}
add_shortcode('product_category_accordion', 'product_category_accordion_shortcode');