Post by NTCart.com » Sun Sep 19, 2021 10:26 am

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

一頁式購物主要的結構是商品介紹與結帳表單,建構的模式大致分可為三種:
1. 創造一組全新的功能模組,包含 Controller、Model、View 等等,自行將商品介紹與結帳表單設計在上面。
2. 修改商品頁(包含 Controller、View),加上結帳表單區塊。
3. 修改結帳頁(包含 Controller、View),加上商品介紹區塊。

因為我認為結帳表單的處理最複雜,所以我選擇了第 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 個來自廣告圖片模組的區塊,讓商家可以將每個商品固定都會顯示的內容(通常是商家介紹、尺寸規格表、退換貨說明等等)做成圖片共用,只需要在商品編輯時用選擇的方式設定,無須重複編輯。

Image

Image

成果可以參考 https://onepage.twecer.com/index.php?ro ... &onepage=1

如果買家選擇超取,結帳後仍會有跳轉到超商門市選擇在跳回網站的動作,不過在瀏覽及下單的動作,可以維持在同一個頁面中,購物流程的簡化確實非常有感,對手機族群促銷單一組商品時,絕對可以比一般購物模式得到更好的轉單率。

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

台灣頂級 OpenCart 技術支援廠商
OpenCart 網站代管、客製、維護 https://www.osec.tw/
OpenCart 台灣優化版 https://www.osec.tw/opencart.html
OpenCart 台灣電商社團 https://www.facebook.com/groups/opencart.taiwan/


New member

Posts

Joined
Tue Nov 15, 2016 9:15 pm

Who is online

Users browsing this forum: No registered users and 3 guests