Hi everyone
I have a problem with the code on a Wedding RSVP page, which has left me no choice but to turn off RSVP'ing for the time being, as the invitations were sent early, and guests are now trying to RSVP, which with how it is currently functioning could see RSVP's disappear into the ether. I only hope it was turned off in time and no RSVP's have been lost.
I have another post ( https://www.wix.com/corvid/forum/community-discussion/code-trigerring-emails-when-it-shouldn-t ).
Essentially some of the problems have been resolved (no longer sending emails when email address already exists in the collection), but I am stilling having troubles with this code. I have tried everything suggested and it was still sending the emails when it shouldn't, but the drop downs and the submit button ended up working ok (other than sending emails when it shouldn't).
So I had a long, long look at the code and set some more console logs and came to the conclusion that the sendEmail code was executing regardless of the outcome of the code for the export function btn_Submit. So I set about trying to ensure that the promise was resolved before the remainder of code executed and to put the sendEmail code into a function, which is only called when the email address entered by a guest on the RSVP page does not exist in the collection and the required fields are not empty.
I have searched high and low for other posts that might help me resolve but I just can't find what I need.
It has been tested by myself and a number of other people, and some times everything works perfectly and sometimes it doesn't.
The errors that have occurred when RSVP'ing attending with 1 or more additional guest are:-
1. Only some guests data entered being returned to the collection (Guest1/main guest is returning) but RSVP Confirmation email sent, but no RSVP submitted email sent;
2. RSVP Confirmation being sent; RSVP email being sent, not all guests data being returned to collection;
3. No data being returned to collection, RSVP confirmation send, RSVP submitted email not sent.
As you can see the problems vary in different instances. Of particular concern is the data not returning to the collection. I could abandon the auto emails if I knew all the data was getting returned to the collection as I could do those manually, but without it, it's a bit of a pickle.
Once more ANY suggestions or assistance would be greatly appreciated, as mentioned invites have been sent so I need this working ASAP. Thanks in advance.
Full page code below :
import wixlocation from 'wix-location';
import wixData from 'wix-data';
import {sendEmail} from 'backend/email';
$w.onReady(function () {
});
export function NoAddGuests_change_1(event){
if ($w('#NoAddGuests').value=== "1"){
($w('#AddGuestsHead')).expand();
($w('#Guest2Grp')).expand();
($w('#Guest3Grp')).collapse();
($w('#Guest4Grp')).collapse();
($w('#Guest5Grp')).collapse();
($w('#Guest6Grp')).collapse();
($w('#Guest7Grp')).collapse();
} else if ($w('#NoAddGuests').value === "2"){
($w('#AddGuestsHead')).expand();
($w('#Guest2Grp')).expand();
($w('#Guest3Grp')).expand();
($w('#Guest4Grp')).collapse();
($w('#Guest5Grp')).collapse();
($w('#Guest6Grp')).collapse();
($w('#Guest7Grp')).collapse();
} else if ($w('#NoAddGuests').value === "3"){
($w('#AddGuestsHead')).expand();
($w('#Guest2Grp')).expand();
($w('#Guest3Grp')).expand();
($w('#Guest4Grp')).expand();
($w('#Guest5Grp')).collapse();
($w('#Guest6Grp')).collapse();
($w('#Guest7Grp')).collapse();
} else if ($w('#NoAddGuests').value === "4"){
($w('#AddGuestsHead')).expand();
($w('#Guest2Grp')).expand();
($w('#Guest3Grp')).expand();
($w('#Guest4Grp')).expand();
($w('#Guest5Grp')).expand();
($w('#Guest6Grp')).collapse();
($w('#Guest7Grp')).collapse();
} else if ($w('#NoAddGuests').value === "5"){
($w('#AddGuestsHead')).expand();
($w('#Guest2Grp')).expand();
($w('#Guest3Grp')).expand();
($w('#Guest4Grp')).expand();
($w('#Guest5Grp')).expand();
($w('#Guest6Grp')).expand();
($w('#Guest7Grp')).collapse();
} else if ($w('#NoAddGuests').value === "6"){
($w('#AddGuestsHead')).expand();
($w('#Guest2Grp')).expand();
($w('#Guest3Grp')).expand();
($w('#Guest4Grp')).expand();
($w('#Guest5Grp')).expand();
($w('#Guest6Grp')).expand();
($w('#Guest7Grp')).expand();
} else if ($w('#NoAddGuests').value==="0"){
($w('#AddGuestsHead')).expand();
($w('#Guest2Grp')).collapse();
($w('#Guest3Grp')).collapse();
($w('#Guest4Grp')).collapse();
($w('#Guest5Grp')).collapse();
($w('#Guest6Grp')).collapse();
($w('#Guest7Grp')).collapse();
}
}
export function btnSubmit_click_1(event,$w) {
wixData.query("YvonneandJosh")
.eq("email", $w('#emailaddr').value)
.find()
.then(res => { if (res.length > 0)
{
$w('#emailaddr').value=""
$w('#Guest1Name').value=""
$w('#Guest2Name').value=""
$w('#Guest3Name').value=""
$w('#Guest4Name').value=""
$w('#Guest5Name').value=""
$w('#Guest6Name').value=""
$w('#Guest7Name').value=""
$w('#Guest1Surname').value=""
$w('#Guest2Surname').value=""
$w('#Guest3Surname').value=""
$w('#Guest4Surname').value=""
$w('#Guest5Surname').value=""
$w('#Guest6Surname').value=""
$w('#Guest7Surname').value=""
$w('#Guest1Food').value=""
$w('#Guest2Food').value=""
$w('#Guest3Food').value=""
$w('#Guest4Food').value=""
$w('#Guest5Food').value=""
$w('#Guest6Food').value=""
$w('#Guest7Food').value=""
$w('#Guest1Songs').value=""
$w('#Guest2Songs').value=""
$w('#Guest3Songs').value=""
$w('#Guest4Songs').value=""
$w('#Guest5Songs').value=""
$w('#Guest6Songs').value=""
$w('#Guest7Songs').value=""
$w('#NoAddGuests').value=0
$w('#ErrorMsgGrp').expand()
return;
// 5-24-2019 - Since e-mail address was found, they already got an RSVP (don't send another)
} else if ($w('#Guest7Name').value !== "") {
//dataset 7 for Guest 7
$w('#dataset1').save();
console.log("Dataset1 is saving")
$w('#dataset2').save();
console.log("Dataset2 is saving")
$w('#dataset3').save();
console.log("Dataset3 is saving")
$w('#dataset4').save();
console.log("Dataset4 is saving")
$w('#dataset5').save();
console.log("Dataset5 is saving")
$w('#dataset6').save();
console.log("Dataset6 is saving")
$w('#dataset7').save()
console.log("Dataset7 is saving")
confirmRSVP();
} else if ($w('#Guest6Name').value !== "") {
// Dataset 6 for Guest 6 details
$w('#dataset1').save();
console.log("Dataset1 is saving")
$w('#dataset2').save();
console.log("Dataset2 is saving")
$w('#dataset3').save();
console.log("Dataset3 is saving")
$w('#dataset4').save();
console.log("Dataset4 is saving")
$w('#dataset5').save();
console.log("Dataset5 is saving")
$w('#dataset6').save();
console.log("Dataset6 is saving")
confirmRSVP();
} else if ($w('#Guest5Name').value !== "") {
// Dataset 5 for Guest 5 details
$w('#dataset1').save();
console.log("Dataset1 is saving")
$w('#dataset2').save();
console.log("Dataset2 is saving")
$w('#dataset3').save();
console.log("Dataset3 is saving")
$w('#dataset4').save();
console.log("Dataset4 is saving")
$w('#dataset5').save();
console.log("Dataset5 is saving")
confirmRSVP();
} else if ($w('#Guest4Name').value !== "") {
// Dataset 4 for Guest 4 details
$w('#dataset1').save();
console.log("Dataset1 is saving")
$w('#dataset2').save();
console.log("Dataset2 is saving")
$w('#dataset3').save();
console.log("Dataset3 is saving")
$w('#dataset4').save();
console.log("Dataset4 is saving")
confirmRSVP();
} else if ($w('#Guest3Name').value !== "") {
// Dataset 3 for Guest 3 details
$w('#dataset1').save();
console.log("Dataset1 is saving")
$w('#dataset2').save();
console.log("Dataset2 is saving")
$w('#dataset3').save();
console.log("Dataset3 is saving")
confirmRSVP();
} else if ($w('#Guest2Name').value !== "") {
// Dataset 2 for Guest 2 details
$w('#dataset1').save();
console.log("Dataset1 is saving")
$w('#dataset2').save();
console.log("Dataset2 is saving")
confirmRSVP();
} else if ($w('#Guest1Name').value !== "") {
//dataset 1 for Guest 1 details
$w('#dataset1').save();
console.log("Dataset1 is saving")
confirmRSVP();
}
});
}
function confirmRSVP(){
let myprovider = "gmail"; // The alias you used for this service in emailJS
let mytemplate = "yjrsvpconfirmation"; // The template name you defined in emailJS
let myparams = {
"Email": $w('#emailaddr').value,
"Name1": $w('#Guest1Name').value,
"Surname1": $w('#Guest1Surname').value,
"Food1": $w('#Guest1Food').value,
"Songs1": $w('#Guest1Food').value,
"Name2": $w('#Guest2Name').value,
"Surname2": $w('#Guest2Surname').value,
"Food2": $w('#Guest2Food').value,
"Songs2": $w('#Guest2Songs').value,
"Name3": $w('#Guest3Name').value,
"Surname3": $w('#Guest3Surname').value,
"Food3": $w('#Guest3Food').value,
"Songs3": $w('#Guest3Songs').value,
"Name4": $w('#Guest4Name').value,
"Surname4": $w('#Guest4Surname').value,
"Food4": $w('#Guest4Food').value,
"Songs4": $w('#Guest4Songs').value,
"Name5": $w('#Guest5Name').value,
"Surname5": $w('#Guest5Surname').value,
"Food5": $w('#Guest5Food').value,
"Songs5": $w('#Guest5Songs').value,
"Name6": $w('#Guest6Name').value,
"Surname6": $w('#Guest6Surname').value,
"Food6": $w('#Guest6Food').value,
"Songs6": $w('#Guest6Songs').value,
"Name7": $w('#Guest7Name').value,
"Surname7": $w('#Guest7Surname').value,
"Food7": $w('#Guest7Food').value,
"Songs7": $w('#Guest7Songs').value,
"Attending1": $w('#Guest1Response').value,
"Attending2": $w('#Guest2Response').value,
"Attending3": $w('#Guest3Response').value,
"Attending4": $w('#Guest4Response').value,
"Attending5": $w('#Guest5Response').value,
"Attending6": $w('#Guest6Response').value,
"Attending7": $w('#Guest7Response').value,
};
sendEmail (myprovider, mytemplate, myparams);
let myprovider1= "gmail";
let mytemplate1 = "yjrsvpsubmitted"; // The template name you defined in emailJS
let myparams1 = {
"Name1": $w('#Guest1Name').value,
"Surname1": $w('#Guest1Surname').value,
"Food1": $w('#Guest1Food').value,
"Songs1": $w('#Guest1Food').value,
"Name2": $w('#Guest2Name').value,
"Surname2": $w('#Guest2Surname').value,
"Food2": $w('#Guest2Food').value,
"Songs2": $w('#Guest2Songs').value,
"Name3": $w('#Guest3Name').value,
"Surname3": $w('#Guest3Surname').value,
"Food3": $w('#Guest3Food').value,
"Songs3": $w('#Guest3Songs').value,
"Name4": $w('#Guest4Name').value,
"Surname4": $w('#Guest4Surname').value,
"Food4": $w('#Guest4Food').value,
"Songs4": $w('#Guest4Songs').value,
"Name5": $w('#Guest5Name').value,
"Surname5": $w('#Guest5Surname').value,
"Food5": $w('#Guest5Food').value,
"Songs5": $w('#Guest5Songs').value,
"Name6": $w('#Guest6Name').value,
"Surname6": $w('#Guest6Surname').value,
"Food6": $w('#Guest6Food').value,
"Songs6": $w('#Guest6Songs').value,
"Name7": $w('#Guest7Name').value,
"Surname7": $w('#Guest7Surname').value,
"Food7": $w('#Guest7Food').value,
"Songs7": $w('#Guest7Songs').value,
"Attending1": $w('#Guest1Response').value,
"Attending2": $w('#Guest2Response').value,
"Attending3": $w('#Guest3Response').value,
"Attending4": $w('#Guest4Response').value,
"Attending5": $w('#Guest5Response').value,
"Attending6": $w('#Guest6Response').value,
"Attending7": $w('#Guest7Response').value,
};
sendEmail (myprovider1, mytemplate1, myparams1);
if (($w('#Guest1Response').value === "Attending") ^ ($w('#Guest2Response').value.value === "Attending") ^ ($w('#Guest3Response').value.value === "Attending") ^ ($w('#Guest4Response').value.value === "Attending") ^ ($w('#Guest5Response').value.value === "Attending") ^ ($w('#Guest6Response').value.value === "Attending") ^ ($w('#Guest7Response').value.value === "Attending"))
{
wixlocation.to("/yvonneandjosh-thankyou");
} else {
wixlocation.to("/yvonneandjosh-sorry");
}
}
export function ClearForm_click(event) { $w('#ErrorMsgGrp').collapse() }
UPDATE: Success on the input boxes and repeater! There is one thing that I need to do differently and this is only display in the repeater those items that are being entered for that RSVP.
I have setup the check to see if the email address of the person RSVP'ing already exists and if it does an error message is displayed, If it doesn't then a container box in which I have added all the fields/inputs I need for each guest and linked these to a the appropriate field in a dataset named "addRSVPS"
I have coded a button to save each entry and this is all being returned to the collection, but the repeater was showing all items in the database after btnNext_click event.
The repeater is connected to a dataset named "RSVPS", and I want to filter what is displayed in the repeater by an RSVPID, which is a number field.
I am having 2 problems:
1. Returning the max value of the RSVPID field in the collection and then incrementing it by 1 and setting an input on the form to this value;
2. I do not think the filter I am trying to set in code for the repeater is working. I changed this to email to test, but no matter it just returns all items in the collection except the one just entered.
I have found documentation on both max aggregate and filtering the dataset as well as reading wix-data API stuff, but I must be missing something.
I have had to setup a wix events registration age temporarily to catch RSVP's which is not ideal by any stretch of the imagination, so any help greatly appreciated.
Page code:
import wixlocation from 'wix-location'; import wixData from 'wix-data'; import {sendEmail} from 'backend/email';
$w.onReady(function () { }); export function RSVPS_ready() { //setRSVPIDfilTer() } export async function btnNext_click(event) { wixData.query("RSVPYvonneandJosh") .eq("email", $w('#emailaddr').value) .find() .then( (results) => { if(results.items.length > 0) { $w('#emailerrorgrp').expand(); } else { maxRSVPID() $w('#emailmsg').collapse(); $w('#instructions').expand(); $w('#guestaddgrp').expand(); $w('#btnaddguest').expand(); } } ) } export async function btnaddguest_click(event) { let emailid=$w('#emailaddr').value await $w('#addRSVPS').save(); $w('#repeaterheader').expand(); $w('#repeater1').expand(); $w('#firstnameinput').value="" $w('#surnameinput').value="" $w('#responseinput').value="" $w('#allergiesinput').value="" $w('#songsinput').value="" $w('#emailaddr').value=emailid } export function tryagain_click(event) { $w('#emailaddr').value="" $w('#emailerrorgrp').collapse() $w('#emailmsg').expand(); $w('#instructions').collapse(); } export async function btnsubmit_click(event) { let emailid=$w('#emailaddr').value await $w('#addRSVPS').save(); $w('#firstnameinput').value="" $w('#surnameinput').value="" $w('#responseinput').value="" $w('#allergiesinput').value="" $w('#songsinput').value="" $w('#emailaddr').value=emailid } function setRSVPIDfilter() { $w('#RSVPS').setFilter(wixData.filter() .eq('email'), $w('#emailaddr').value); } async function maxRSVPID() { await wixData.aggregate("RSVPYvonneandJosh") .max("rsvpid") .run() .then( (results) => { if (results.items.length > 0) { $w('#RSVPID').value = results.items + 1 return; } }); }
@Yisrael (Wix)
Thanks for of the information!!! I have read through but will be honest I am a little daunted and dazed with all this!
I have had a play with your TodoList example and have followed most of how that is working, however, I need to be able to collect 6 individual elements and have these display on key press. I have played with a few syntax but not sure if I need to set up separate functions for that or if I can somehow group them in the addTodoInput_keypress event?? I have been playing with the data binding page and not the Data API page.
Please any advice would be welcome as I am going out of my mind!
Once again thanks in advance.
Thanks so much Yisrael and givemeawhisky. I started off using sendgrid initially but switched to emailjs. I'll have a good read through all that you have directed me to. Hopefully I can resolve once I have. I suspect I may have more questions though ;)
To add further to Yisrael's superb replies and agree with the why so many datasets reply too.
You can also see if Wix already have the EmailJS in their package manager and use the npm through there, just remember to add it to your backend too.
https://support.wix.com/en/article/corvid-managing-external-code-libraries-with-the-package-manager
EmailJS info for it.
https://www.emailjs.com/docs/sdk/installation/
https://www.emailjs.com/docs/sdk/send/
https://www.emailjs.com/docs/sdk/sendform/
You can even look at using EmailJS own Rest API with Wix Fetch.
https://support.wix.com/en/article/corvid-accessing-third-party-services-with-the-fetch-api#backend-service-call
EmailJS Info for it.
https://www.emailjs.com/docs/rest-api/send/
https://www.emailjs.com/docs/rest-api/send-form/
They even provide a Wix Code sample themselves too for using their Rest API through Wix Fetch.
https://www.emailjs.com/docs/examples/wix-code/
Plus, EmailJS support other companies like SendGrid too, which I've used for free and it all works fine.
https://www.emailjs.com/docs/user-guide/adding-email-services/
With Wix once again already having a tutorial for using SendGrid to send emails on form submissions.
https://support.wix.com/en/article/corvid-tutorial-sending-an-email-on-form-submission
Although with the above tutorial you are not running it through EmailJS, you are only using SendGrid themselves and they are free with no cost per month, see pricing for more info.
https://sendgrid.com/pricing/
Especially when you look at EmailJS pricing and see that they are only free for testing only, when you want to go live it will cost you to use them per month.
https://www.emailjs.com/pricing/
Finally, Yisrael has also done a tutorial too for if you want to use SendGrid's own Node.js too.
https://www.wix.com/corvid/forum/wix-tips-and-updates/example-send-email-with-the-sendgrid-npm-interface
If you do go for SendGrid, then I recommend you setup all your domain and server authentication etc as shown here, so that you don't get the 'sent via SendGrid' line on your emails and all the email companies know that SendGrid has your permission to send emails for you, so sort of whitelisting you so to speak.
https://sendgrid.com/docs/ui/account-and-settings/how-to-set-up-domain-authentication/
So there are ways around your problem and cutting out on the number of datasets and a bit of code too.
Plus, it is always worth having a complete read of any third party service that you are looking to use with Wix, so that you can see if there are easier ways to connect it rather than having to do everything the hard way.
I would suggest creating your guest list using the technique demonstrated in the TodoList example. I believe it will simplify your code. You won't need to specify "how many" guests - just enter each guest and an entry is created.
Regarding the dataset save() function - don't forget save() returns a Promise and you will need to either provide a .then() or use await for each save.
Thank you Yisrael,
I did originally try with only one dataset, however, if entering more than one guest, once you entered the second guest name it changed the the first guest name to the second guest name and so on, so no matter how many guests you entered, by the time you got to the last row every guest was exactly identical. Is there a way to stop that?
Here is the link to the editor site. https://editor.wix.com/html/editor/web/renderer/edit/82485b02-5ada-4fa2-80c5-b45cb1980fee?metaSiteId=e55a8209-4837-4808-a02b-784372408280&editorSessionId=468FA4E3-197B-4F26-873B-5E421D6A51E0
The page concerned is YvonneandJosh/RSVP.
In the meantime I might have a play with those dataset saves.
Yisrael
Yes they are all connected to the same collection.
Hi Yisrael
The RSVP form can have up to 7 individuals on it, and for each guest we are asking questions such as food allergies or dietary requirements, song recommendations, so I need to keep that information with the individual guest, so I have one dataset per guest.
Top of page is first guest details, and if responding for others selecting the number of additional guests will display the appropriate additional fields to collect their information.
Here are some snippets of the page when first opened, and then when the No of Additional Guests is selected as 6. Each of the rows for the additional guests are set up as groups for purpose of expanding/collapsing, so only the correct additional rows appear for the number selected.
I am only saving the datasets that have data to be saved as far as I am aware. I have written code to deal with maximum number of guests first to avoid all datasets being saved.
As long as someone is not trying to enter a new RSVP using an email address that is already in the collect, I just need to save what data is entered and if one or more of the guests on the RSVP select attending, send the RSVP Confirmation and RSVP Submitted email.
Is there a way to fix this code so it works or should I be doing it another way?
Expanded Form - everything incl. No. of Additional Guest for RSVP Drop Down and above are dataset 1.
Each row below Additional Guests for RSVP expand/collapse dependant in number selected in drop down and, are dataset 2 - 6 in ascending order.
Why do you have so many datasets? And why are you saving to all of them?
The dataset.save() function returns a Promise.