二月 11, 2019 | 前端與Vue

【Drupal教學】客製化 Views Filter 好簡單

Drupal 的 views 模組讓我們可以透過條件限制,快速地將想要的資料給顯示出來,並且能在針對部分欄位提供「篩選功能」。不過Drupal提供的篩選樣式十分基本,再加上設計圖會跟著網站風格來做功能外觀,在想要客製化Filter與即時變動結果的條件下,我們就會需要使用 Views Ajax 來即時刷新結果。 因此,此篇要帶著大家一起來客製化自己的views Filter唷~接下來就以產品與兩種分類來進行演示。 事前準備 以下範例所使用到的設定,可作為參考: 產品內容類型 性別與尺寸分類 產品列表View 步驟一: Views 設定 1.1 在這部分,已經先完成了上述的事情準備,並且建立了幾個內容作為篩選範例。首先,結果的刷新功能需要使用到 ajax,所以我們在 other 中找到並啟用 Use AJAX 。再來,要把作為 Filter 的欄位拉出來,你可以在 FILTER CRITERIA 這拉出欄位(範例這拉的是「性別」與「尺寸」)。

Drupal 的 views 模組讓我們可以透過條件限制,快速地將想要的資料給顯示出來,並且能在針對部分欄位提供「篩選功能」。不過Drupal提供的篩選樣式十分基本,再加上設計圖會跟著網站風格來做功能外觀,在想要客製化Filter與即時變動結果的條件下,我們就會需要使用 Views Ajax 來即時刷新結果。

因此,此篇要帶著大家一起來客製化自己的views Filter唷~接下來就以產品與兩種分類來進行演示。

事前準備

以下範例所使用到的設定,可作為參考:

  1. 產品內容類型
  2. 性別與尺寸分類
  3. 產品列表View

步驟一: Views 設定

1.1 在這部分,已經先完成了上述的事情準備,並且建立了幾個內容作為篩選範例。首先,結果的刷新功能需要使用到 ajax,所以我們在 other 中找到並啟用 Use AJAX 。再來,要把作為 Filter 的欄位拉出來,你可以在 FILTER CRITERIA 這拉出欄位(範例這拉的是「性別」與「尺寸」)。

1.2 點開剛剛在 FILTER CRITERIA 新增的欄位,選擇 Expose 讓使用者可以自行操作這個 Filter(篩選功能)。

1.3 點了 Expose 之後,選擇會變多,之後拉到最下面點開「更多」,Filter identifier這個值就是我們使用 ajax 會需要的名稱,這名稱可以隨意更改。

步驟二:建立客製化 Filter

2.1 將欄位 Expose 出來,這時候就能透過 Chrome 的檢查看到 Expose 的這些欄位的 Value 是什麼,接下來就可以在客製化的時候,把 value值塞進對應的選項中。

2.2 好比說在上圖看到:女性,value值是5,那我們就可以做一組假的 checkbox ,就像下圖。

步驟三:建立 ajax

3.1 到這步驟後就很簡單了。接下來要開始寫 ajax,首先我們需要透過 Chrome 的檢查,點擊到 Network 來看看當點了 Expose 出來的性別與尺寸的選項(不是客製化的唷),是傳了什麼 ajax 資料給 view~

3.2 在上圖你會看到幾個重要的值:一是我們點了Expose Filter 傳出去的 value值,記得第一步驟的Filter identifier嗎?field_gender_tid 名稱就是設給「性別」的 Filter identifier,同理「尺寸」的是 field_gender_size。再來是這個 View 的機器名稱,以及你會在 view 右邊的 other 看到的 view_display_id 。

3.3 記下上面的所看到的四個名稱,下面就可以接著設定 ajax了。如何利用 js 來抓到點擊到的checkbox 的值就不多說,只要把值給到在 view 中,各自塞給對應的 Filter identifier,如「性別」是field_gender_tid,然後填入這個 View 的機器名稱與 view_display_id 即可。

success的部分,在這就會抓到傳送進來的值更新後的樣板,透過 replaceWith 的方式達到頁面刷新的效果。下面的Drupal.settings 與 Drupal.attachBehaviors 是重要的設定,因為是透過 views/ajax 來刷新 view,所以會需要以下設定來讓 Drupal 抓到這個 view 的活動。

註解:1.在這邊寫成 function利於之後在點擊事件上可以無限引用。 2.selectAll為都沒選的時候,傳給View的值。這部分也可以透過 Chrome 檢查 Network 來看到是傳什麼值過去。 3.(若你的ajax頁碼點擊後出現了JSON的頁面,就很有可能是漏寫了 Drupal.settings.views。請看解答

步驟四:完成

當你愉快地寫完 js 抓到值,並塞給了 ajax 。那就可以大玩特玩你客製化的篩選器了!只要右邊的 Expose 欄位的跟左邊你自訂的篩選,選擇都是一樣的那就成功摟~要記得看有沒有刷新!Enjoy!

結論

整體並不難,來統整一下重點:

  1. View:設定 FILTER CRITERIA 並點選Expose,記住Filter identifier
  2. 依照 Expose 出來的篩選,得到各個項目的 value(從後台讀取數值也可),設計自己的篩選功能
  3. 寫 js 抓到值之後,塞進 ajax中,(ajax需要 view_name、view_display_id跟Expose的Filter identifier名稱)

非常簡略地說明了一下,詳細還是配圖會比較清楚唷~不過再執行專案時會發現如果 ajax 不加下面這個設定的話,在使用自訂的 ajax 時會將路徑改為 "/views/ajax",所以這時再點頁碼就會直接傳送你去看到 json 頁了...記得!一定要加!你可以參考參考人家怎麼說

 Drupal.settings.views = response[0].settings.views
hashtags: