Hello, I’m new and I need help with shortening my code, I tried global objects but couldn’t get them to work.
It’s a custom form with 6 different paid packages. It works but it’s clunky and a pain to adapt.
This is what the Form looks like without the paid packages.
-This form link is a prop, it works but doesn’t include the Pay API.
-Below is what the package buttons look like on the actual page I’m building.
Requirements for the Form:
-
Only the first 5 fields are required, the rest are not.
-
There are 2 Databases, database1 takes all the information and database2 only collects the name and email.
-
On checkout, a string is uploaded to database1’s item “package.” This string changes according to which button is clicked, such as ‘package 1’. (This informs me of which package was picked)
Code:
import wixData from 'wix-data';
import wixPay from 'wix-pay'
import { package1, package2, package3, package4, package5, package6} from 'backend/BE_PayAPI';
import wixLocation from 'wix-location';
$w.onReady(function () {});
//Button 1 - 1 Month $5.99 Checkout
export function buy_click1(event, $w) {
//This checks if required fields are filled, if not, shows & scrolls to error message.
if ($w('#name').valid === false || $w('#email').valid === false || $w('#business').valid === false || $w('#title').valid === false || $w('#description').valid === false) {
$w('#error').show();
$w("#error").scrollTo();
//This checks if the image upload field contains a file, if it DOES NOT, then it starts Pay API and after successful payment the form submits without image upload.
} else if ($w('#image').value.length === 0) {
package1().then(payment => { //Starts payment API for package 1
wixPay.startPayment(payment.id, )
.then((result) => {
if (result.status === "Successful") //If the package 1 Pay API is a success then...
$w('#uploadingGif').show() //Shows hidden uploading animation.
let saveWithoutImage = { //Defines the input values for database.
"name": $w("#name").value,
"email": $w("#email").value,
"title": $w("#title").value,
"start": $w("#start").value,
"businessName": $w("#business").value,
"package": "package 1", //This field needs to change for each package.
"price": $w("#price").value,
"description": $w("#description").value,
"eventStart": $w("#eventStart").value,
"eventEnd": $w("#eventEnd").value,
"timeStart": $w("#timeStart").value,
"timeEnd": $w("#timeEnd").value,
"weekDays": $w("#weekDays").value,
"website": $w("#website").value,
"location": $w("#location").value,
"phone": $w("#phone").value,
"notes": $w("#notes").value,
};
wixData.save('database1', saveWithoutImage) //Save to database1
.then((results) => {
let item = results;
})
.catch((err) => {
let errorMsg = err;
});
let subscribes = { //Save to database2
"email": $w("#email").value,
"name": $w("#name").value,
};
wixData.save('database2', subscribes)
.then((results) => {
let item = results;
})
.catch((err) => {
let errorMsg = err;
});
wixLocation.to("/thankyou"); //Brings to Thank you page after upload.
// If the upload image field DOES contain a file, the Pay API starts and after a successful payment the form submits with image upload.
} else {
package1().then(payment => {
wixPay.startPayment(payment.id, )
.then((result) => {
if (result.status === "Successful") {
$w('#uploadingGif').show()
$w("#image").startUpload()//Image upload
.then((uploadedFile) => {
let url = uploadedFile.url;
let saveWithImage = {
"package": "package 1",
"name": $w("#name").value,
"email": $w("#email").value,
"title": $w("#title").value,
"start": $w("#start").value,
"businessName": $w("#business").value,
"image": url, //Image preview sent to database1
"price": $w("#price").value,
"description": $w("#description").value,
"eventStart": $w("#eventStart").value,
"eventEnd": $w("#eventEnd").value,
"timeStart": $w("#timeStart").value,
"timeEnd": $w("#timeEnd").value,
"weekDays": $w("#weekDays").value,
"website": $w("#website").value,
"location": $w("#location").value,
"phone": $w("#phone").value,
"notes": $w("#notes").value,
};
wixData.save('database1', saveWithImage)
.then((results) => {
let item = results;
})
.catch((err) => {
let errorMsg = err;
});
let subscribes = {
"email": $w("#email").value,
"name": $w("#name").value,
};
wixData.save('database2', subscribes)
.then((results) => {
let item = results;
})
.catch((err) => {
let errorMsg = err;
});
wixLocation.to("/thankyou");
})
}
});
});
}
}
I have to write this for every buttons 6 times! Help me shorten it please .
Thank you so much, let me know if you need more information and I hope this can be of use to other people.