✅P185_商城业务-检索服务-页面筛选条件渲染

开篇

将检索商品的品牌、分类、商品属性进行遍历显示，并且点击某个属性值时可以通过拼接url进行跳转。

代码：cfmall-search/src/main/resources/templates/list.html

---

按品牌条件筛选

<li th:each="brand:${result.brands}">
    <a href="/static/search/#"
       th:href="${'javascript:searchProducts(&quot;brandId&quot;,'+brand.brandId+')'}">
        <img th:src="${brand.brandImg}" alt="">
        <div th:text="${brand.brandName}">
            华为(HUAWEI)
        </div>
    </a>
</li>

页面Url拼接：

---

按分类条件筛选

<div class="sl_value">
    <div>
        <ul>
            <li th:each="catalog : ${result.catalogs}">
                <a href="/static/search/#"
                   th:href="${'javascript:searchProducts(&quot;catalogId&quot;,'+catalog.catalogId+')'}">
                    <div th:text="${catalog.catalogName}">华为(HUAWEI)</div>
                </a>
            </li>
        </ul>
    </div>
</div>

页面Url拼接：

---

按属性条件筛选

<!--其它的所有需要展示的属性-->
<div class="JD_pre" th:each="attr : ${result.attrs}">
    <div class="sl_key">
        <span th:text="${attr.attrName}">系统：</span>
    </div>
    <div class="sl_value">
        <ul>
            <li th:each="attrValue : ${attr.attrValue}">
                <a href="/static/search/#" th:text="${attrValue}"
                   th:href="${'javascript:searchProducts(&quot;attrs&quot;,&quot; '+ attr.attrId+'_'+attrValue +' &quot;) '}"
                >5.56英寸及以上
                </a>
            </li>
        </ul>
    </div>
</div>

页面Url拼接：

---

searchProducts拼接函数

function searchProducts(name, value) {
    var href = location.href + "";
    if (href.indexOf("?") != -1) {
        location.href = location.href + "&" + name + "=" + value;
    } else {
        location.href = location.href + "?" + name + "=" + value;
    }
}