I’m confused now haha. I think I have had every method for sending emails on my site (form - wix form - sendgrid) - . The issue I had before was I could not format it or give it a styled email response just basic text (Code below). I used Sendgrid API as this was the only method for my needs at the time. We now have Nodes and NPMs which rocks but has made me redesign accordingly. This is what was prepared before and I wish to now add a triggered email/ convert to the new NPM module
import { sendEmail, sendEmailWithRecipient } from 'backend/email';
$w.onReady(function () {
$w("#dataset1").onAfterSave(sendFormData);
});
function sendFormData() {
const subject = `AIO Request ${$w("#opt1").value}`;
const body = `Dear ${$w("#in1").value }
\r
\rThank you for showing interest in our All-In-One computing solution.
\rWe have received your request and will be contacted shortly.
\r
\
\rHere is a summary of your request:
\r
\rEmail Address: ${$w("#in2").value}
\rCompany: ${$w("#in3").value}
\rModel: ${$w("#opt1").value}
\rSize: ${$w("#opt2").value}
\rProcessor: ${$w("#opt3").value}
\rSystem Memory: ${$w("#opt4").value}
\rIsolation: ${$w("#opt5").value}
\rCable Accesory: ${$w("#opt6").value}
\rQTY: ${$w("#qty").value}
\r
\r
\rContact request -${$w("#mp1").value}
\rSubscribed - ${$w("#mp2").value}
\
\
\rKind Regards
\n
\rBytec Healthcare
\n
\rwww.bytechealth.com `;
const recipient = $w("#in2").value;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));
sendEmail(subject, body)
.then(response => console.log(response));
}
import { multiply } from 'backend/aModule';
$w.onReady(function () {
multiply(4, 5).then(product => {
console.log(product);
// Logs: 20
})
.catch(error => {
console.log(error);
});
});
export function subemail_change(event, $w) {
if($w("#subemail").checked===true){
$w("#mp2").enable()
$w('#hide').hide();
}
if($w("#subemail").checked===false){
$w("#mp2").disable()
$w('#hide').show();
}
}
I am getting worried to the amount of code I am using since I also have a filter function in the custom form & section which enables whens a product type is selected. Is there a better way to do all of this?
import wixData from 'wix-data';
$w.onReady(function () {
SELECTOR1();
uniqueDropDownAIO();
});
export function options_change(event) {
switch ($w('#options').value) {
case "Mobile Carts & Stands":
$w('#opt1').expand();
$w('#opt2').collapse()
$w('#opt3').collapse()
break;
case "Mounting Solutions":
$w('#opt2').expand();
$w('#opt1').collapse()
$w('#opt3').collapse()
break;
case "All-In-One PCs":
$w('#opt3').expand();
$w('#opt2').collapse()
$w('#opt1').collapse()
break;
default:
// otherwise
}
}
function SELECTOR1() {
wixData.query("Form-Product-Options")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#FILTER1").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.ProductType);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
/////////////////// 2
export function FILTER1_change(event, $w) {
SELECTOR2();
$w("#FILTER2").enable();
}
function SELECTOR2() {
wixData.query("Form-Product-Options")
.contains("ProductType", $w("#FILTER1").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#FILTER2").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.heightType);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
///////////3rdfilter//////////////////
export function FILTER2_change(event, $w) {
SELECTOR3();
$w("#FILTER3").enable();
}
function SELECTOR3() {
wixData.query("Form-Product-Options")
.contains("ProductType", $w("#FILTER1").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#FILTER3").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.mountOptions);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
///////////////////////////////////////////////// 4
export function FILTER3_change(event, $w) {
SELECTOR4();
$w("#FILTER4").enable();
}
function SELECTOR4() {
wixData.query("Form-Product-Options")
.contains("ProductType", $w("#FILTER1").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#FILTER4").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.powerOptions);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
////////////////////////////AIO DROP LIST//////// Independant from filter.
function uniqueDropDownAIO() {
wixData.query("AIO-Options")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown7").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.aioOptions);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function aio_change(event,$w) {
}
Also is there a way to include the previous page URL they were on before submitting the form?