應用sessionStorage改善WordPress “The Grid” plugin的UX

The Grid是在wordpress裡還算不錯用的plugin,可以將文章做grid排列展示,同時設定篩選條件來過濾。但有個比較大的問題是,當使用者點選grid上的連結,在回到原本grid頁面的時候,原本篩選器的設定就被重設(經過測試Firefox不會有這個問題,而Google Chrome會),導致使用者需要重新設定篩選,一整個UX很糟。

比較好的解決方式是用sessionStorage來處理,把使用者作的篩選存在sessionStorage中,然後利用jquery window load事件(即使是透過瀏覽器的back或者 javascript 的 history.go(-1)也會觸發)來處理。

基本上邏輯是,當sessionStorage沒東西的時候,代表第一次進入該頁面,要先做 initialize。然後要記錄使用者的set/unset (其實就是 click event)。比較需要注意的是,當使用者重新回到這頁面的時候,要回復先前的 set/unset,但是the grid的 set/unset比較簡單的方式是用 jquery 送 click 事件來達到 set/unset,這時候要避免跟之前的 click handling function 衝突或者造成 infinite loop。

假設有四組條件篩選器,當篩選項目被set的時候,會將同組內的其他篩選器unset,而The Grid對於 Set & Unset 可以給予不同的 css (例如不同的字體顏色,在例子中分別為 rgb(255,255,255)與 rgb(255,204,0))。下面例子只拿其中一組來舉例(要不然程式碼真的又臭又長),然後部分程式用了 eval() 來精簡程式碼長度。

Leave a Reply

%d bloggers like this: