Woocommerce：如何在我的模板中放置“按价格或修改时间订购”选择框？

Question

我正在从头开始为 Woocommerce 制作自定义主题。如何添加“选择框”，允许访问者按修改时间或价格对产品进行排序？

Answer 1

我搜索了“Storefront”主题，但没有在框架中找到“现成”的解决方案（如果您知道，请在此处添加）。所以我自己做了一个，看起来效果应该不错。

首先，在您希望显示选择框的位置添加以下 HTML 代码（我将其放入自定义的“archive-product.php”模板中，该模板会呈现产品列表、类别和搜索结果 - 您必须将其放入您的主题的相应文件，或者您可以使用相应的挂钩来修改 woocommerce 主题，即“woocommerce_before_shop_loop”）：

               <form method="GET" id="orderProducts-form">
                   <label for="orderProducts">Order by: </label>
                   <select name="orderby" id="orderProducts">
                       <option value="none">Choose</option>
                       <option value="modified-desc">Newest</option>
                       <option value="modified">Oldest</option>
                       <option value="price">Lower Price</option>
                       <option value="price-desc">Higher Price</option>
                   </select>
               </form>

然后将以下代码放入您的functions.php文件中：

function lcOrderScript()
{
    $script = "window.addEventListener('load', (event) => {
    const queryString = new URLSearchParams(window.location.href.split('?')[1]);
    let urlParams = new URLSearchParams(queryString);
    let orderby = urlParams.get('orderby');
    if (orderby == null) {orderby = 'none';}
    document.getElementById('orderProducts').value = orderby;
    document.getElementById('orderProducts').onchange = function() {
        let url = window.location.href.split('?')[0];
        let queryString = new URLSearchParams(window.location.href.split('?')[1]);
        var selection = document.getElementById('orderProducts').value;
        queryString.set('orderby', selection);
        let newUrl = url + '?' + queryString.toString();
        window.location.href = newUrl;
    }
 });";
 wp_add_inline_script('jquery', $script);
}
add_action('wp_enqueue_scripts', 'lcOrderScript');

清除缓存，您的选择框就准备好了。