二月 11, 2019 | 前端與Vue
【Drupal教學】好多條件要篩選怎麼辦?Views Filter 輕鬆做出來!
如何定義網頁功能規格
3個篩選設計案例
為了讓你對於「網站篩選器」有更清晰的概念,我們特別選擇了三個代表性的網站案例:線上訂房網站、電子商務、博物館展覽回顧。這些案例可以幫助你了解篩選器在不同產業的應用情境。
(旅遊)AGODA
訂房網站 AGODA,在查詢空房的時候可以注意到左側有各種常用的住房條件可供篩選,如是否有停車場、是否有浴缸...等,用戶可通過豐富的條件篩選功能過濾出自己心儀的房型。
(電商)博客來
博客來在選擇商品分類後(以女性服飾類為例),還可以進一步的依照價格、顏色、尺寸...等的條件篩選商品,除了基本的款式還能篩選尺寸,用戶可以直接知道哪些商品還有適合自己的尺寸,能大大的節省時間。
(媒體)華岡博物館
創立已超過 50年的華岡博物館,至今為止舉辦過許多展覽。為了讓閱覽者能回顧過往的展覽,華岡博物館有著展覽回顧的頁面,並且加上地點、年份的條件篩選,使閱覽者可以隨著不同年份回憶博物館過去的所有展覽。
以上簡單的舉了三個範例,像這樣的網站還有很多很多。
如果你的網站也需要像這樣的條件篩選功能,不妨試試用 Drupal 的 Views Filter來製作吧!做法一點都不難,下面就快速的帶著你做一遍!
設定 Views Filter 事前準備
在進行Views Filter 設定之前,我們需要先有對應的內容類型、需要進行篩選的條件(如文章分類、性別、產品顏色、產品尺寸...等)。
以下面的範例來說,我們建立了名為「最新消息」的內容類型,並且新增「分類」欄位。
接下來,我們就來看看要怎麼應用 Views Filter 吧!
應用一: 建立文章列表
在建立文章列表時,我們可以在「過濾條件」新增「內容類型」的選項,並選擇對應的內容類型。(此處以最新消息為例)
儲存後,Views 就會透過該設定抓出網站中所有最新消息的文章,如此一來,文章列表就做好囉~
應用二: 建立篩選器
新增想要建立篩選器的條件(此處以最新消息的分類為例),將「顯示過濾器」打勾,並且將「運算元」選到【屬於其中之一】,基本的設定就完成了。
基本的設定是單選的模式,如想讓篩選器變為可多選的模式,可將「允許多重選擇」打勾 (紅框處),即可達成需求。
儲存後,即可在頁面上方得到一個篩選器。
BONUS!:篩選器進階設定
篩選器還有進階設定可以進行更彈性的調整,只要搭配 Btter Exposed Filters 這個模組與 Views Ajax 就可以囉!
舉例來說,今天如果想做不需按按鈕送出,選擇選項後實時進行篩選的功能要怎麼處理呢?就讓我們一步步來吧~
首先,在安裝 Btter Exposed Filters 後,打開在 Views 設定頁面的右側的「進階」區域,選到「篩選表單」的【篩選表單樣式 的 基本】,
就可以選擇「Btter Exposed Filters」,然後儲存。
接著就能看到更進階的設定,請將「Enable auto-submit」、「Hide submit button」打勾後儲存。
下一步,一樣是在進階區域,選擇「使用 AJAX」,
將「使用 AJAX 」打勾後儲存,這樣就完成設定囉。
結語
Drupal 的 Views 搭配不同的設定可以完成非常多的頁面、區塊,Views Filter 就是其中一個。因為不會限制條件的數量,因此你的篩選器想要有幾個條件,就可以新增幾個條件,彈性非常的大!
根據不同的情境,不管是想撈出特定資料、製作篩選器...等,Views Filter 都可以輕鬆做到!如果你也有相關的需求,不妨使用 Views Filter 試試看吧!