為 OpenCart 系統開發「一頁式購物」的功能

一頁式購物,主要的受眾是以手機瀏覽為主的使用者,與一般購物網站的差別,在於一頁式購物是將商品介紹及訂購表單,整合在同一個頁面上,讓使用者瀏覽商品介紹及下單,都無須進行任何換頁動作,無須點擊與等待頁面切換,讓操作動線極簡化,只需滑動頁面、填寫訂購資料即可,對於手機族群是相當友善的購物模式。

雖然一頁式購物有其優點,但也並非所有商家都適合建置一頁式購物,例如,買家可能在瀏覽完商品後因為不打算購買就關閉頁面,而不像一般購物網站,可以用各種方式引導買家去瀏覽商店中的其他商品,另外,一頁式購物的目標是直接結帳,所以也不太適合在頁面上放置各種行銷活動,影響轉換率。

商家若能同時擁有購物網站,也具有一頁式購物的頁面,將會有更強大的經營彈性,尤其手機族群似乎還在增長中,所以 「一頁式購物」 是我近一年來,最頻繁被商家詢問的功能之一。不過我尋遍了 OpenCart MarketPlace 上的 Extensions,似乎都沒看過這種 「一頁式購物」 的擴充模組,有可能在國外並不流行,所以沒有廠商願意開發,還好 OpenCart 的優點就是開放與自由,所以就嘗試以最低的工程幅度,自己來創造一個 OpenCart 系統的一頁式購物模組。

一頁式購物主要的結構是商品介紹與結帳表單,建構的模式大致分可為三種:

  1. 創造一組全新的功能模組,包含 Controller、Model、View 等等,自行將商品介紹與結帳表單設計在上面。
  2. 修改商品頁,加上結帳表單區塊。
  3. 修改結帳頁,加上商品介紹區塊。

因為我認為結帳表單的處理最複雜,所以我選擇了第 3 個選項,修改 Journal 3 的快速結帳(Quick Checkout),在上方加上商品介紹的區塊,成果雖然與正統的一頁式購物有點差別,但至少可以達到無須換頁就能瀏覽商品介紹及下單,提供手機族群一個友善的購物介面,相信絕對能幫商家轉換出更多手機客群的訂單。

作法說明

  1. 由於 Journal 的 Quick Checkout 是 hack OpenCart 內建的 checkout/checkout,所以應該要在 checkout/checkout 或是更之前的頁面,加上判斷是否要進入一頁式購物的模式,我選擇的是修改 product/product,解析 Query String 是否帶有 onepage 的參數,若有就視為要進入一頁式購物的模式,先呼叫 $this->cart->add() 將該商品加入購物車,然後跳轉到 checkout/checkout,以便切換到結帳頁面。
  2. 修改 Controller 的 journal3/checkout,這是 Journal 3 快速結帳的主程式,結帳頁上的區塊內容都是在這支程式中準備的,所以修改這支程式,為商品介紹的內容新增一個區塊變數,同時多帶一個變數來傳遞是否為一頁式購物模式,存入 $data 以便傳送給 Journal 進行 renderView(),至於商品介紹的內容,可以直接讀取系統內建的商品描述(description),也可像我的作法,讀取我專為一頁式購物所額外建立的欄位,不過這種專用欄位的作法,得配合修改後台的商品管理功能,新增一個一頁式購物商品介紹的欄位編輯。
  3. 修改 journal3/checkout/checkout.twig,這是 Journal 3 快速結帳的主要版型檔,必須新增一個商品介紹區塊來顯示商品介紹內容,我放的位置是在 {{ content_top }} 的上方。

上面的關鍵動作,即是我設計這個一頁式購物模組的原型,商家可依據自身的需求,再進行其他細節的調整,想嘗試的人可以自行發揮想像力,例如我後來追加了 2 個來自廣告圖片模組的區塊,讓商家可以將每個商品固定都會顯示的內容(通常是商家介紹、尺寸規格表、退換貨說明等等)做成圖片共用,只需要在商品編輯時用選擇的方式設定,無須重複編輯。

成果可以參考 https://onepage.twecer.com/index.php?route=product/product&product_id=43&onepage=1
如果買家選擇超取,結帳後仍會有跳轉到超商門市選擇在跳回網站的動作,不過在瀏覽及下單的動作,可以維持在同一個頁面中,購物流程的簡化確實非常有感,對手機族群促銷單一組商品時,絕對可以比一般購物模式得到更好的轉單率。

對熟悉 OpenCart 的工程師來說,看完我上述的解說之後,相信已能自行動手實做,並且可以很快就做出來,但對於程式不是那麼在行的讀者,建議還是不要貿然行動,因為過程會有一些小細節需要處理,可能不是那麼容易如法炮製,不過至少我已幫大家測試開發過,幫 OpenCart 開發一個一頁式購物的模組,是一個可行的方案,且效果還不算太差,希望有興趣的人都能順利完成它。

=====================================================
OpenCart 網站代管、客製、維護 https://www.osec.tw/
台灣電商社團 https://www.facebook.com/groups/opencart.taiwan/
=====================================================