在電子商務(wù)網(wǎng)站中，往往需要一個(gè)產(chǎn)品過(guò)濾器，如亞馬遜產(chǎn)品列表頁(yè)面左側(cè)的過(guò)濾器。使用 WordPress 架設(shè)電子商務(wù)網(wǎng)站的時(shí)候，大部份用戶會(huì)選擇WooCommerce插件，WooCommerce插件自帶的產(chǎn)品過(guò)濾器并不是很強(qiáng)大，于是出現(xiàn)了WooCommerceAJAX Filters 這個(gè)產(chǎn)品過(guò)濾插件。
WooCommerceAJAX Filters 插件功能
- AJAX 過(guò)濾，分頁(yè)和排序
- 過(guò)濾條件的個(gè)數(shù)不限
- 多用戶界面元素
- SEO 友好的鏈接 URL
- 可以設(shè)置在某個(gè)分類過(guò)濾或全局顯示過(guò)濾。
- 可以通過(guò)簡(jiǎn)碼顯示過(guò)濾條件
- 可以在滾動(dòng)主題中限制過(guò)濾盒子的高度
- 可以在側(cè)邊欄區(qū)域中使用
- 拖拽方式調(diào)整布局
最近新增的功能
- 沒(méi)有過(guò)濾小工具可以添加不同的自定義 CSS 類。
- 更新按鈕 – 是否在點(diǎn)擊更新按鈕時(shí)才開(kāi)始進(jìn)行過(guò)濾。
- 點(diǎn)擊選中的單選按鈕時(shí)是否取消選擇。
- 為了更好的結(jié)構(gòu)，URL 被縮短了。
- 小工具可以顯示子分類。
簡(jiǎn)碼
- 在可視化編輯器中使用：
[br_filters attribute=price type=slider title="Price Filter"] - 在PHP代碼中使用：
do_shortcode('[br_filters attribute=price type=slider title="Price Filter"]');
簡(jiǎn)碼選項(xiàng)
小工具類型widget_type– filter 或 update_buttonattribute(required) – 產(chǎn)品屬性，如價(jià)格或長(zhǎng)度，不要忘了，WooCommerce加了一個(gè) pa_ 的前綴到產(chǎn)品屬性上面，如果你添加了 area 這個(gè)屬性，這里的屬性名禪應(yīng)該是 pa_areatype(required) – 多選，單選，滑塊和下拉選擇。比較方法– OR 或AND標(biāo)題– 篩選工具的標(biāo)題，可以為空。父級(jí)產(chǎn)品分類product_cat– 父級(jí)產(chǎn)品分類 ID是否分頁(yè)– 是否顯示分頁(yè)，設(shè)置 1 為顯示分頁(yè)- 高度
height– 過(guò)濾工具的最大高度，如果超過(guò)最大高度，將會(huì)出現(xiàn)滾動(dòng)條。 - 滾動(dòng)主題
scroll_theme– 選擇滾動(dòng)條的主題，只在設(shè)置了固定高度，且內(nèi)容超出了固定高度時(shí)使用
高級(jí)設(shè)置（小工具區(qū)域）
- CSS 類 – 如果你需要給過(guò)濾工具添加自定義樣式，在這里添加css類。
- 過(guò)濾小工具高度 – 如果設(shè)置選項(xiàng)中有太多內(nèi)容，設(shè)置一個(gè)固定高度以防止過(guò)濾器占用太多的界面高度
- 滾動(dòng)主題 – 如果設(shè)置了 “過(guò)濾小工具高度”，可以在這里設(shè)置一個(gè)滾動(dòng)條主題
高級(jí)設(shè)置 (插件設(shè)置):
- 可以在管理界面的WooCommerce-> 產(chǎn)品過(guò)濾找到插件的高級(jí)設(shè)置
- “沒(méi)有產(chǎn)品” 的提示信息 – 沒(méi)有找到產(chǎn)品時(shí)的提示信息
- “沒(méi)有產(chǎn)品” 的 CSS 類 – 添加 CSS 類到 “沒(méi)有產(chǎn)品” 的提示區(qū)塊
- 產(chǎn)品選擇 – 產(chǎn)品選擇的標(biāo)簽
- 排序控制- 控制WooCommerce的排序選項(xiàng)
- SEO 友好的 URL – 選擇了過(guò)濾器以后，URL 將被修改
- 關(guān)閉所有的過(guò)濾選項(xiàng) – 如果想隱藏過(guò)濾工具而不丟失當(dāng)前設(shè)置，關(guān)閉此項(xiàng)
Advanced AJAX Product Filters 小工具為我們提供了一些非常實(shí)用的設(shè)置選項(xiàng)，我們可以在任何風(fēng)格的主題中集成這個(gè)小工具，只要稍微調(diào)整一下過(guò)濾小工具的 CSS 就可以了，對(duì)比于WooCommerce內(nèi)置的過(guò)濾小工具，設(shè)個(gè)插件可以瞬間提升 WooCommece 的產(chǎn)品過(guò)濾體驗(yàn)，非常值得嘗試一下。
