Wix 網站製作

作振
2025年2月5日
讀畢需時 7 分鐘

已更新：2025年6月13日

接下來，我要開始為"誠菓手作"這個品牌製作一個網站，這是一個由和菓子產品販賣以及教學的品牌，希望透過新的網站，獲得更多人的認識、分享更多關於和菓子的知識，以及能夠結合行銷廣告，可以分析客戶的喜好。當然，網路購物是不可少的環節。

整理一下上述的需求，是這個網站的設計目標:

首頁，讓別人可以一目了然可以認識這個品牌的地方。
能夠上架商品，進行網路購物 (可能是課程或是商品)
Blog，可以分享食譜、和菓子歷史等等。

有了需求，下一步要評估一下要使用的工具。

這裡評估使用Wix 來製作網站，主要有幾個原因：

之前使用過，體驗還不錯。
可以支援購物車。
可以使用手機就可以進行編輯 (這個真的是大大的加分，因為很多時候，靈感突然就來，如果能夠即時的記下，可以將內容逐步完善)

最後因為誠菓手作的目標是希望有販賣季節菓子，而這種和菓子可能製作的時間比較長，又由於不放防腐劑的關係，所以需要能夠排程製作，所以希望夠將排程的狀況在網頁端顯示，讓客戶能夠直接挑選，這樣就可以減少很多與客戶溝通什麼時候需要產品的時間了。

先說結論，這次使用Wix 來進行製作網頁的體驗很好，由於Wix 本身就是一個以UI 介面為主的網頁編輯平台，而且可支持支援購物車以及手機線上編輯，所以初步的網頁大概就在兩天左右就完全架起來了。

這裡設計的是一頁是首頁 + 部落格的設計，讓消費者可以在首頁直接獲取到所有的信息，然後誠菓手作的師傅可以分享他在製作的心得以及最新的消息。以下是網頁的概念設計

部落格撰寫處，可以區分"消息"以及"文章" 兩類，可以分別顯示在首頁的消息以及文章的部分。

唯一需要開始支付費用的地方，是要進入結帳頁面，如果支付了費用之後，就可以開始使用結帳裡面的支付功能。

在付款之後，一切都解鎖了，購物車可以順利的跑到結帳的頁面了 😎

以上，基本上就已經完成網頁90%的功能設計。設計時間大約兩個半天的時間，如果孰悉的話應該可以更快。

不過接下來10% 的工作卻花了我3~4 天的時間，而且只作了簡易的證明功能(POC)，但卻也是讓我更喜歡Wix這個設計平台。

先說我要做什麼。

如開始的需求，需要設計一個可供顧客選擇可以出貨的時間。為了讓誠菓手作的師傅容易操作，這個出貨時間需要簡單的讓師傅能夠操作(師傅不太可能到網頁更新太複雜的東西)，同時客戶在網頁操作後，可以同步更新到師傅這裡，讓師傅可以方便掌握每周需要製作的訂單。

要達到這個目標，我這裡想到的方法是使用 google App Script 與 Wix Velo 串聯。以下是網路溝通示意圖。

Wix Velo 是Wix 專門為網頁開發者設計的系統，個人覺得真的蠻好用的，只要在編輯頁面上方"開發模式"點下，然後"開啟開發模式"即可進入 Velo 開發模式。

一開始進入這個 Velo 開發模式的時候覺得怪怪的，因為看不到網頁程式碼，一開始根本不知道要從何改起。不過後來慢慢了解，這個Velo 比較偏向"修改"網頁設計，為什麼這麼說呢? 我們可以看一段簡單的程式碼描述。

import { updateCartDeliveryTime } from 'backend/storeUtils'; // 從後端導入函數

let selectedDeliveryDate = null; // 用來儲存客戶選擇的日期

$w.onReady(function () {
    // *** 核心修改：將保存邏輯綁定到日期選擇器的 onChange 事件 ***
    // 假設您的日期選擇器下拉式選單 ID 是 'deliveryDatePicker'
    if ($w('#dropdown1').isVisible) { // 檢查元素是否存在
        $w('#dropdown1').onChange(async (event) => {
            selectedDeliveryDate = event.target.value; // 獲取選擇的日期值
            //console.log("前端，選擇的日期: ", selectedDeliveryDate)
            if (selectedDeliveryDate) {
                try {
                    // 只要日期選擇器的值改變，就立即將選擇的日期發送到後端函數處理
                    await updateCartDeliveryTime(selectedDeliveryDate);
                    console.log("前端：日期選擇器值改變，已將出貨日期發送到後端。");
                    
                    // 可選：在頁面顯示選擇的日期給客戶看 (例如一個文本元素 #deliveryDateDisplay)
                    // if ($w('#deliveryDateDisplay').found) {
                    //     $w('#deliveryDateDisplay').text = `您選擇的出貨日期為: ${selectedDeliveryDate}`;
                    // }

                } catch (error) {
                    console.error("前端：保存出貨日期失敗:", error);
                    // 可以在這裡顯示錯誤訊息給用戶
                }
            } else {
                // 如果用戶清空了選擇（如果您的下拉選單允許），也可以處理
                console.warn("前端：日期選擇器值被清空。");
                // 可選：可以再次呼叫後端清空資料庫中的日期，或顯示提示
                // if ($w('#deliveryDateDisplay').found) {
                //     $w('#deliveryDateDisplay').text = "請選擇預計出貨日期！";
                // }
            }
        });
    } else {
        console.warn("前端：未找到 ID 為 'deliveryDatePicker' 的日期選擇器。");
    }

    // *** 移除對「結帳」按鈕 onClick 事件的綁定 ***
    // 因為日期在日期選擇器 onChange 時就已經保存了，結帳按鈕不需要額外操作
    // 如果您之前有這段代碼，請將其移除或註釋掉：
    // $w('#checkoutButton').onClick(async () => { ... }); 
});

首先Wix 使用的JavaScript 的語言，所以如果孰悉JS的創友可能會覺得好開勳 😁

$w.onReady(function ()

主要描述，這個網頁準備好($w.onReady)的時候要執行的動作，所以可以看的出來，他的基本動作是當網頁開啟之後去調整開啟之後的動作。

接下來是Velo 的運作邏輯，基本上設計與一般網站的架構是一樣的，這次我使用的只是其中的幾個功能，我的使用示意圖如下:

由此示意圖可以看出，Velo是透過後台(backend)為核心，與其他各部進行溝通的。可以在這裡配置需要的檔案。

前台的位置是在各頁面開啟都會看的到，例如上圖右側的程式碼，就是在購物車頁面裡的程式碼。

最後是CMS，他有點像是簡易的資料庫，Wix裡稱為集合，透過各種集合，可以直接與前台與後台進行互動。在跟前台互動的時候，甚至可以直接在UI介面上面進行點選，就可以直接連結CMS 的內容，十分方便。

解說完基本的組成之後，接下來就開始正式的串聯工作囉。

由於Wix 的結帳系統屬於封閉系統，中間花了蠻多時間想要續修改結帳資訊，以串聯到最後給到客戶端的資訊，但是最後都是失敗收場 😭

所以最後使用決定完全不"修改"結帳資訊，僅將我們想要的預計出貨日其資訊結合結帳的資訊一起輸出，這中間就要使用到上述說到的CMS。所以預想的操作流程是這樣的:

整個流程看起來複雜得，但化繁為簡，只是要完成兩個動作:

誠菓手作師傅在Google sheet 新增可預約時間以及數量:
透過App Script 的程式碼，擷取Google Sheet 的內容並將資訊以 JASON 的形式拋到 Wix 後台。然後後台裡面的 deliveryDate_googlesheet.jsw 負責把這個這些資訊更新到CMS 裡面的 ShippintDate 的這個集合當中，最後透過下拉選單可以選擇CMS 裡面的內容。
消費者在網頁進行消費，選擇了可預約時間以及商品的數量後進行結帳 :
在消費者選擇預約時間的過程當中，操作的過程被記錄下來存在CMS 的OrderDeliveryDate 裡面，然後當消費者結完帳的那一剎那，後台裡面的events.js 收到了結帳完成的信息，保留OrderDeliveryDate 裡面的最後一個操作動作作為選定，然後收集訂貨資訊以及選定的可預約時間傳遞給同在後台的mailgun以及deliveryDate_googlesheet.jsw。
然後mailgun 負責將收集好的訂貨資訊以及可預約時間以email 寄出。
從OrderDliveryDate 裡面的資訊透過 deliveryDate_googleseet.jsw 將訊息拋給App Script，然後運算後在Google Sheet 上面進行更新。