Shopping+ 購物搜尋 - Pinterest 流商品搜尋

2012年6月4日


Pinterest 是近期最火紅的圖片收藏社群網站,它憑著創新的點子與令人眼睛一亮的介面在短時間內成為網路圈最火紅的焦點。此外,Pinterest 漂亮的瀑布流版型也成為許多網站爭相仿效的範本。
其實,只要使用現成的 jQuery Masonry 就能做到一模一樣的功能喔。我認為瀑布流的圖片呈現方式非常適合用來展示商品,這次的 jQuery Masonry 練習作品以 Yahoo! 購物中心 做為對象,實做了 Pinterest 流的 Shopping+ 購物搜尋

DEMO 功能展示

新介面 - Pinterest 流視覺化商品搜尋

Before - 目前有兩種方法可以搜尋 Yahoo! 購物中心的商品 (重點在搜尋介面):

1. 直接上 Yahoo! 購物中心搜尋:


2. 使用 Yahoo! 購物搜尋 ( http://tw.shopping.search.yahoo.com/ (可同時搜尋拍賣、超級商城與購物中心):
http://tw.shopping.search.yahoo.com/search?p=%E6%B4%8B%E8%A3%9D

After - 視覺化大圖購物搜尋介面
http://pupushopin.appspot.com/?q=%E6%B4%8B%E8%A3%9D
上面兩個搜尋方式功能都非常完整,不過圖片略小。竊以為 Shopping+ 購物搜尋 以圖片為主的呈現,看起來非常賞心悅目:

搜尋建議 - 關鍵字自動補完 (Auto Complete)

"搜尋建議" 是找商品不可或缺的功能,Shopping+ 購物搜尋 也把它整合進來囉!

使用技術/API

Shopping+ 購物搜尋 使用到的技術平台與 API 如下:

結論

實做產品是學習新技術最好也最有成就感的方式之一,Shopping+ 購物搜尋 就是我的 jQuery Masonry 練習小品。它的功能簡單(只是改良 Yahoo! 購物中心 的搜尋介面),不過卻很實用喔!
延伸閱讀

3 意見 :

Related Posts Plugin for WordPress, Blogger...