我需要帮助。我在 WooCommerce 上有一个商店，我写了一个按钮，但它不起作用嗨， ...

我需要帮助。我在 WooCommerce 上有一个商店，我写了一个按钮，但它不起作用嗨，我需要帮助。我在 WooCommerce 上有一个商店，我写了一个按钮，但它不起作用嗨，我需要帮助。我在 WooCommerce 上有一个商店，我写了一个按钮，但它不起作用嗨，我需要帮助。我在 WooCommerce 上有一个商店，我写了一个按钮，但它不起作用嗨，我需要帮助。我在 WooCommerce 上有一个商店，我写了一个按钮，但它不起作用嗨，我需要帮助。我在 WooCommerce 上有一个商店，我写了一个按钮，但它不起作用

<?php
/*
Plugin Name: WooCommerce Custom Sorting v1.3
Description: Adds a single sort button with a dropdown menu to sort products by price and name on the WooCommerce store page.
Version: 1.3
Author: blvckfamily
*/

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}


function add_custom_sorting_dropdown() {
    if ( is_shop() || is_product_category() ) { 
        echo '
        <div class="custom-sorting-dropdown">
            <button id="sortDropdownButton">Sorting <span>&#9662;</span></button>
            <div id="sortOptions" class="dropdown-content">
                <a href="#" data-sort="price">Price</a>
                <a href="#" data-sort="name">Name</a>
            </div>
        </div>';
    }
}
add_action( 'woocommerce_before_shop_loop', 'add_custom_sorting_dropdown', 10 );


function custom_sorting_dropdown_styles() {
    echo '
    <style>
    .custom-sorting-dropdown {
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
    }
    
    #sortDropdownButton {
        background-color: #0071a1;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    
    #sortDropdownButton:hover {
        background-color: #005a87;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
    
    .custom-sorting-dropdown:hover .dropdown-content {
        display: block;
    }
    </style>';
}
add_action( 'wp_head', 'custom_sorting_dropdown_styles' );


function custom_sorting_dropdown_scripts() {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const sortDropdownButton = document.getElementById("sortDropdownButton");
        const dropdownContent = document.getElementById("sortOptions");

        if (!sortDropdownButton || !dropdownContent) {
            console.error("Dropdown button or content not found.");
            return;
        }

        document.querySelectorAll(".dropdown-content a").forEach(function(item) {
            item.addEventListener("click", function(event) {
                event.preventDefault();
                event.stopPropagation(); 

                let sortType = this.getAttribute("data-sort");

                if (!sortType) {
                    console.error("Sort type not found.");
                    return;
                }

                let sortOrder = "asc"; 

                let products = document.querySelectorAll('.woocommerce ul.products li.product');

                if (!products.length) {
                    console.error("No products found.");
                    return;
                }

                let productsArray = Array.prototype.slice.call(products, 0);

                if (sortType === "price") {
                    productsArray.sort(function(a, b) {
                        let priceAElement = a.querySelector('.woocommerce-Price-amount');
                        let priceBElement = b.querySelector('.woocommerce-Price-amount');

                        if (!priceAElement || !priceBElement) {
                            console.error("Price element not found in one of the products.");
                            return 0;
                        }

                        let priceA = parseFloat(priceAElement.innerText.replace(/[^0-9.-]+/g,""));
                        let priceB = parseFloat(priceBElement.innerText.replace(/[^0-9.-]+/g,""));
                        return sortOrder === "asc" ? priceA - priceB : priceB - priceA;
                    });
                } else if (sortType === "name") {
                    productsArray.sort(function(a, b) {
                        let nameAElement = a.querySelector('.woocommerce-loop-product__title');
                        let nameBElement = b.querySelector('.woocommerce-loop-product__title');

                        if (!nameAElement || !nameBElement) {
                            console.error("Product title element not found in one of the products.");
                            return 0;
                        }

                        let nameA = nameAElement.innerText.toLowerCase();
                        let nameB = nameBElement.innerText.toLowerCase();
                        if (nameA < nameB) return sortOrder === "asc" ? -1 : 1;
                        if (nameA > nameB) return sortOrder === "asc" ? 1 : -1;
                        return 0;
                    });
                }

                let parent = document.querySelector('.woocommerce ul.products');
                if (!parent) {
                    console.error("Products container not found.");
                    return;
                }

                
                parent.innerHTML = "";

                
                productsArray.forEach(function(product) {
                    parent.appendChild(product);
                });
            });
        });
    });
    </script>
    <?php
}

    
add_action( 'wp_footer', 'custom_sorting_dropdown_scripts' );

事实上，我只是需要帮助。