SureCart 小技巧 – 如何善用 SureCart 登入機制，建立不中斷的訪客瀏覽體驗 (登入後轉址)

大家都知道良好的訪客瀏覽體驗能降低訪客跳出率、提高轉換的可能性，這對電商網站來說尤其關鍵重要，訪客瀏覽商品後決定購買的登入體驗、訪客登入後是否停留在原本瀏覽的商品頁面上？

這些關鍵一但沒做好，訪客失去耐心可能就會離開網站。

要如何改善訪客的登入體驗？WordPress 的登入機制遇上快取與各種外掛相互間的影響，真的是會讓網站管理者與訪客都失去耐心。

要如何善用 SureCart 的登入功能，營造無縫、流暢的登入體驗，同時讓訪客登入後還能留在原本瀏覽的商品頁面？

我們會在這篇文章中與大家分享我們遇到的問題以及本篇的主題 – 如何善用 SureCart 登入機制，建立不中斷的訪客瀏覽體驗。

訪客登入體驗

原方案

我們在架設 F&F Collection 當代藝術商店時，嘗試使用過 WordPress 的登入/登出 (Login/out) 區塊與 Kadence 可放在頁首選單中的 Header Account。

Kadence 的 Header Account 我們選用 Modal Login 的方式，點擊登入後，會出現一個 Popup 登入視窗，相當有質感，也能讓訪客登入後能夠停留在原本瀏覽的頁面中。

但是如果訪客的瀏覽視野已經略過了頁首的選單部分，或許需要在商品頁面中提供登入選項，讓決定購買的訪客能夠迅速登入進行購買。

因此，我們在商品頁面中使用登入/登出區塊加入登入連結。

在會員制商店中，隱藏了商品價格與購買、加入購物車等功能，並提供登入選項，希望可以利用登入/登出區塊的「重新導向至目前網址 (Redirect to current URL)」功能，讓訪客可以有更為流暢的登入、購物體驗。

遭遇問題

登入體驗不一致

首先，這樣的方案無法讓使用者有一致的登入體驗，因為頁首選單的登入功能與登入/登出區塊的介面差異很大。

登入後顯示舊頁面內容

其次，網站的快取機制造成不少困惱，訪客時常在登入後仍然看到未登入時的舊頁面內容，即使我們已經在 Cloudflare 排除登入後的快取。

要為了解決這個問題放棄使用快取嗎？

似乎也可以，畢竟有許多受歡迎電商網站的頁面載入速度、結帳速度也不是很快，而我們使用 SureCart 已經在這方面取得不少優勢。

但我還是不想這麼快放棄，畢竟提升頁面載入效率、縮短時間，就能讓訪客的購物體驗更流暢。

防火牆過於敏感

第三個是相當特別的問題，網站實際上線後才發現「原來有這麼多顧客不會記得登入密碼、時常需要重設密碼」。

這個問題結合了 Cloudflare WAF 防火牆機制與 Facebook 的內建瀏覽器之後也變成另一種災難。

顧客因為不記得密碼，所以習慣使用瀏覽器「記得我的密碼」與網站上的「重設密碼」功能，在登入頁面上像這樣與登入表單的頻繁互動也時常造成 Cloudflare 的誤封鎖。

訪客被無端誤封鎖，帶來的瀏覽體驗肯定會是最差的。

解決方案

SureCart 登入帳號功能

SureCart 的登入 Customer Dashboard 功能相當優秀，預設可以讓訪客選擇「發送驗證碼至 Email 信箱」或是直接輸入密碼登入帳號。

現在許多具備優秀瀏覽體驗的電商網站也都會提供「發送驗證碼」的功能，畢竟要求顧客記住每一個曾經使用過網站的密碼是相當不切實際的。

透過 SureCart 的登入帳號功能，顧客不需要重設密碼或重複登入，我們就能解決前面提到的「防火牆過於敏感」與「登入體驗不一致」問題。

因為預設是登入到 SureCart 的 /customer-dashboard/ 頁面，我們只剩一個步驟，只要能夠登入後轉址回到原本瀏覽的商品頁面就大功告成了。

登入後轉址回到原瀏覽頁面

為了解決登入帳號後預設進入 Customer Dashboard 無法停留在原瀏覽商品頁面的問題，我們可以參考登入/登出區塊的「重新導向至目前網址」機制。

在頁面上點擊登入/登出區塊的登入連結時，大家可以看到連結的尾端會加上「?redirect_to=原瀏覽網址」的參數，透過 WordPress 的 login_redirect 核心功能可以在登入後將訪客轉址至原瀏覽頁面，相當方便。

https://domain.com/wp-login.php?redirect_to=Current_URL

為了達到相同的目的，我們使用能夠插入動態連結 Dynamic Link 的任何區塊編輯器或頁面編輯器，在 Customer Dashboard 連結後動態加入「原瀏覽頁面」。

https://domain.com/customer-dashboard/?redirect_to=Current_URL

除此之外，再加上一點 PHP 程式碼指定轉址的機制，我們就能完成「登入後轉址回到原瀏覽頁面」的功能了！

透過 SureCart 的登入帳號功能，登入後再轉址回到原瀏覽頁面，也會順利地重新載入更新頁面，不再會有「登入後顯示舊頁面內容」的問題了。

結語

SureCart 社群中許多成員不斷地向官方許願、敲碗，希望能夠使用 SureCart 的登入頁面來取代傳統的 WordPress 登入介面，或是希望能夠結合 SureMembers 的登入轉址 (Login Redirect) 功能取得更高的設計彈性與空間。

因為 SureCart 的登入機制真的相當理想、方便顧客使用。

不僅採用步驟詢問式的方式協助顧客登入，更可以以「發送驗證碼至 Email 信箱」讓顧客不再需要強記每個購物網站的密碼。

如果你也是 SureCart 的使用者，只要善用本文所說的解決方案，還能讓顧客在登入帳號後，隨著管理者設計的流程流暢的轉換到各種自訂頁面網址，建立不中斷的訪客瀏覽體驗。

想要知道詳細的設定步驟與 PHP 程式碼嗎？

只要一杯咖啡的價錢 (請我喝一杯咖啡) 就能獲得包含詳細設定步驟與 PHP 程式碼的教學工具包唷！

→ 前往查看 SureCart Login Redirect 工具包