时间戳

首页 > 解决方案 > 在产品页面的 WooCommerce 过滤器中添加属性名称作为类

php - 在产品页面的 WooCommerce 过滤器中添加属性名称作为类

问题描述

我在我的 Woocommerce 商店中创建类别页面。我想在顶部显示过滤器。所以我在我的functions.php文件中注册了一个新的侧边栏，并将代码 <?php dynamic_sidebar( 'filters-1' ); ?>放在breadcrumb.php模板文件中。到目前为止，一切都很好。

现在的想法是将过滤器属性（如：BLACK、WHITE、RED）转换为彩色圆圈。所以我认为最好的方法是将颜色属性分类添加为<li>类，然后在 CSS 中做一些魔术。

但问题是如何将具有属性名称/分类的变量添加到属性<li>的类中。这是 HTML 输出：

<ul class="woocommerce-widget-layered-nav-list">
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">
        <a rel="nofollow" href="/?filter_color=black">Black</a> <span class="count">(2)</span>
    </li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">
        <a rel="nofollow" href="/?filter_color=white">White</a> <span class="count">(1)</span>
    </li>
</ul>

我知道有一个插件可以做到这一点，但我不喜欢插件。:) 我更喜欢写一些。我认为这里不需要额外的插件。

标签： phpwordpresswoocommercewordpress-theming

解决方案

前：

<ul class="woocommerce-widget-layered-nav-list">
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
        <a href="">red</a> 
    </li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
        <a href="">green</a> 
    </li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
        <a href="">blue</a> 
    </li>
</ul>

后：

document.body.onload = function() {
  var list = document.getElementsByClassName('wc-layered-nav-term');

  for (i = 0; i < list.length; i++) {
    var name = 'pa_'; // Prefix to class
    name += list[i].firstElementChild.innerHTML;
    list[i].classList.add(name);
  }
}();
/* This is just sample code */
.pa_blue {
  color: blue;
}

.pa_green {
  color: green;
}

.pa_red {
  color: red;
}
/* --- */
<ul class="woocommerce-widget-layered-nav-list">
  <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
    <a href="">red</a>
  </li>
  <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
    <a href="">green</a>
  </li>
  <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
    <a href="">blue</a>
  </li>
</ul>

推荐阅读