wordpress - Woocommerce如何获取产品类别

Question

我想在内置代码的页面中为 php 中的类别创建一个下拉列表。我可以成功地为它创建一个简码，但由于简码对 html 不友好，我决定不走这条路。因此，没有任何脚本或 jquery，我试图将 php 代码添加到 div

<select class="store-search-input form-control" name="dokan_seller_search" value="<?php

                $taxonomy     = 'product_cat';
                $orderby      = 'name';  
                $show_count   = 0;      // 1 for yes, 0 for no
                $pad_counts   = 0;      // 1 for yes, 0 for no
                $hierarchical = 1;      // 1 for yes, 0 for no  
                $title        = '';  
                $empty        = 0;

                $args = array(
                        'taxonomy'     => $taxonomy,
                        'orderby'      => $orderby,
                        'show_count'   => $show_count,
                        'pad_counts'   => $pad_counts,
                        'hierarchical' => $hierarchical,
                        'title_li'     => $title,
                        'hide_empty'   => $empty
                );
                $all_categories = get_categories( $args );
                foreach ($all_categories as $cat) {
                    if($cat->category_parent == 0) {
                        $category_id = $cat->term_id;       
                        echo '<br /><a href="'. get_term_link($cat->slug, 'product_cat') .'">'. $cat->name .'</a>';

                        $args2 = array(
                                'taxonomy'     => $taxonomy,
                                'child_of'     => 0,
                                'parent'       => $category_id,
                                'orderby'      => $orderby,
                                'show_count'   => $show_count,
                                'pad_counts'   => $pad_counts,
                                'hierarchical' => $hierarchical,
                                'title_li'     => $title,
                                'hide_empty'   => $empty
                        );
                        $sub_cats = get_categories( $args2 );
                        if($sub_cats) {
                            foreach($sub_cats as $sub_category) {
                                echo  $sub_category->name ;
                            }   
                        }
                    }       
                }
        ?>" >       
        </select>

这发生了：

任何帮助，将不胜感激

感谢 Alex 的帮助更新：我还没有足够的积分直接添加图像：

<input type="select" class="store-search-input form-control" name="dokan_seller_search" value="<?php
            $args = array(
                'taxonomy'     => 'product_cat',
                'orderby'      => 'name',
                'hierarchical' => true,
                'hide_empty'   => false
            );
            $all_categories = get_categories( $args );

            esc_html('<select class="store-search-input form-control" name="dokan_seller_search">');

            foreach($all_categories as $parent){

                if ($parent->category_parent == 0) {
                        echo '<option value="'.$parent->name.'"><a href="'. get_term_link($parent->slug, 'product_cat') .'">'. $parent->name .'</option>';
                }

                $args2 = array(
                        'taxonomy'     => 'product_cat',
                        'child_of'     => $parent->term_id,
                        'parent'       => $parent->term_id,
                        'hide_empty'   => 'false'
                );
                $sub_cats = get_categories( $args2 );
                if($sub_cats) {
                    foreach($sub_cats as $sub_category) {
                        echo  $sub_category->name;
                    }   
                }

            }
            esc_html('</select>');
            
    ?>">

我期待的结果是

标签： wordpresswoocommerceproductcategorieswoocommerce-theming

Answer 1

您尝试做的事情对于 . 使用由 javascript 触发的下拉菜单会更好，这样您就可以更好地控制下拉菜单中的 DOM。只有当您需要向服务器提交数据时，才应该真正使用 select。

更新：这是经过测试和工作的。

<script type="text/javascript">

    //First, some js to trigger the window to relocate when you click an option

    jQuery(document).ready(function(){

        //When the select is triggered
        jQuery('#category-links').on('click', function(){

            //Get the URL from the selected option
            var url = jQuery(this).val();
        
            //Navigate to the url
            window.location.replace(url);

        })

    })
</script>


<?php
//Get the parent terms
$parents = get_terms([
    'taxonomy' => 'product_cat',
    'hide_empty' => false,
    'parent' => 0
]);

//Start the dom for the select
echo '<select id="category-links">';
    echo '<optgroup>';

        //The parent option
        echo '<option value="'.get_term_link($term->term_id).'">'. $term->name .'</option>';

            //Check for children, if there are we'll add them here
            $children = get_term_children($term->term_id, 'product_cat');
            if (!empty($children)) {
                foreach ($children as $child) { 
                    $childterm = get_term_by('id', $child, 'product_cat');
                    echo '<option value="'.get_term_link($childterm->term_id).'">'. $childterm->name .'</option>';
                }
            }

        echo '</optgroup>';

    }

echo '<select>';