只有已login的會員才可以填寫的form

我們參考了"Get current member data and submit in the collection"的教學, 製作了會員專區內的Wix Form, 會員於登入後無需填寫姓名及電郵地址就可以填寫及送出, 無需使用Velo Form(製作需要coding太複雜, 又需要Backend functions, Fetch API...), 請參考以下方法:

1) 開啟開發模式

2) 於會員專區新增頁面

3) 新增表單, 設定需要填寫的項目, 這裡我們新增了一份活動的表單, 上面有會員ID欄, 以及電郵地址欄, 這兩項資料將會透過程式碼query "PrivateMembersData"內, 有關該個已登入會員的獨特ID, 以及他的電郵地址, 無需輸入就會顯示出來。

4) 點擊Wix Form就可以新增項目, 以及提交總表(集合Collection)。先設計表格, 然後設定提交總表, 然後打開提交總表>更多操作>集合設定, 記錄您的集合ID。 5) 增加一個資料集(Dataset), 連結你的提交總表。 6) 在新增程式碼之前, 必須理解那一個是物件的ID。點擊該物件, 有#開頭的那個就是, 必須留意英文字母大小寫法。

7) 請程式碼面板新增以下程式碼:

import wixMembers from 'wix-members';
import wixData from 'wix-data';

$w.onReady(async()=>{
    let currentMember = wixMembers.currentMember; console.log();
    let member = await currentMember.getMember(); console.log();
    let loginEmail = member.loginEmail; console.log();
    let memberID = member._id; console.log();
  
    $w("#dataset1").onReady(() => { 
        let item = $w("#dataset1").getCurrentItem(); console.log("Current-Item: ", item); 
        $w('#input10').value = "品酒活動30/04/2023"; //<---你的活動名稱
        $w('#input2').value = memberID;            
        $w('#input9').value = loginEmail;
    });
 $w('#button14').onClick(()=>{//<---送出資料的按鈕
        start_SubmissionWixData();
    }); 
});

 function start_SubmissionWixData() {
    wixData.query("PrivateMembersData")
    .eq("loginEmail", "memberID")
    .find()
    .then((res)=> {console.log();
        let items = res.items[0];
        items._id = $w('#input2').value;        
        items.email = $w('#input9').value;
        items.value = $w('#input10').value;

        wixData.save("enterContest032", items).then(()=>{ //<---提交總表ID
            console.log("Data saved!")
        })
    });
}

8) 以上程式碼紅色的部分就是根據物件的ID設定, 你設定的一定會與以上的不同, 必須改為你頁面上的物件ID。其他項目也可以根據你設定的表格題目有所增減。

9) 只是要留意, 會員提交表格後Admin將會收到電郵通知, 但係會員沒有。有需要請設定自動化Automation。

10) 會員提交表格後, 提交總表可以顯示對應PrivateMembersData集合內的會員ID, 以及顯示會員的電郵。這裡有我們設定的樣板, 可以加入會員試用看看。

#會員專區表格