我正在使用 WooCommerce“按产品属性过滤”小部件在类别页面上创建产品过滤器。这是 WooCommerce 开箱即用的标准小部件。
我为每个属性多次添加了这个小部件 - 这允许用户按大小、颜色等进行过滤。
当有人点击某个属性时,页面会重新加载,然后根据他们的选择过滤产品。
但是,我想隐藏不活动的过滤器,并显示活动的过滤器。单击不活动的过滤器会将其展开打开,以便有人可以进行选择。但是在进行选择并重新加载页面后,该小部件应该保持打开状态。见下图:
基本上我想为活动过滤器添加一个类名。
我们将小部件标记更改如下:
// Change widget markup
add_filter( 'dynamic_sidebar_params', function($params) {
$params[0]['before_widget'] = '<section class="widget">';
$params[0]['after_widget'] = '</div></section>';
$params[0]['before_title'] = '<h2 class="widget-title">' ;
$params[0]['after_title'] = '</h2><div>' ;
return $params;
});
在“按产品属性过滤”小部件的情况下,这会导致以下标记:
<section class="widget">
<h2 class="widget-title">Color</h2>
<div>
<ul class="woocommerce-widget-layered-nav-list">
<li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term woocommerce-widget-layered-nav-list__item--chosen chosen">
<a rel="nofollow" href="xxx/?query_type_color=or">Red</a>
<span class="count">(2)</span>
</li>
...
</ul>
</div>
</section>
我使用 CSS 来隐藏所有过滤器:
.widget > div { display: none; }
然后我使用 jQuery 取消隐藏活动过滤器小部件:
// Mark widget as active
$(".widget .chosen").closest(".widget > div").show();
但是,我真的不想使用 jQuery 取消隐藏活动过滤器,因为它会导致页面加载时布局发生变化。我想在活动过滤器标记上包含一个 active
类(不使用 jQuery),以便生成的标记为:
<section class="widget">
<h2 class="widget-title">Color</h2>
<div class="active">
到目前为止,我一直无法找到任何方法来访问小部件本身,确定它是否处于活动状态,并向其父包装器添加类名。