I have put together a little code to allow customers to select a delivery date on my website. Since this feature isn’t directly supported, my work-around was to open the ‘my cart’ page with the shopping cart and the option to checkout collapsed. Instead, a date form appears and when filled out and submitted, the response is stored in a session variable. After this, the date form collapses and the cart expands, allowing the customer to checkout as usual. I have tried to use an ‘onNewOrder’ event to store the date in a database when the customer checks out.
I am pretty new to web development and using Velo so I am not sure if my approach will work. Unfortunately, it seems that I cannot easily test my code, as backend code needs to be on a published site to work. I am currently working on a copy of my live, premium site as I make edits, so I can’t publish the site. Is there a way of testing the code that I have missed? Failing that, I would appreciate anyone taking the time to look at my code and see if there are any obvious errors.
Thank you!
On the Cart page I have the following:
import {session} from 'wix-storage';
$w.onReady(function () {
});
export function submitdate_click(event) {
validateAndSubmitForm();
}
async function validateAndSubmitForm() {
$w('#errormessage').hide();
$w('#submitdate').disable();
if ($w('#date').value != null ) {
$w('#date').collapse();
$w('#submitdate').collapse();
$w('#shoppingCart1').expand();
session.setItem('date', $w('#date').value.toDateString());
}
else {
$w('#errormessage').show();
$w('#submitdate').enable();
}
}
And in events.js in the backend section of the code I have:
import wixData from 'wix-data';
import {session} from 'wix-storage';
export async function wixStores_onNewOrder(event) {
const newOrderId = event.orderId;
const number = event.number;
const newOrderBuyerInfo = event.buyerInfo;
const date = session.getItem('date');
wixData.insert('Pre-Orders',{"orderNumber": number, "deliveryDate": date})
// Get the new order's line items from the Stores/Orders collection
const orderLineItems = await wixData.get("Stores/Orders", newOrderId)
.then((results) => {
return results.lineItems
})
.catch((error) => {
// Order not found in the Stores/Orders collection
console.error(error);
});
}
Thank you! That is exactly what I needed. My code seems to work except for the fact the wix-storage module isn’t available in the backend. How can I pass variables from the front end to the back end?
@tedcjenks You are correct - wix-storage is only available in the frontend since the storage is browser-based.
You can can pass data from the frontend either by calling a backend function from the frontend that passes the data, or by saving the data in a database collection and then accessing the data in the backend.
On your front-end…(calling a function from backend …
let DataToBeSend=
{
firstName: “aaaaaa”,
lastName: “bbbbb”
}
let myResult = await
function xxx(DataToBeSend);
console.log(myResult)
@russian-dima Sensitive data is vulnerable whenever it appears in the front end. Of course, if the data isn’t personal or sensitive, then it most likely won’t be a security issue.
Case-1: Ok this one is very clear… here we can find emidiately a big security risk, if it would be a sensitive data.
{
firstName: "aaaaaa",
lastName: "bbbbb"
}
What about …
Case-2: The same data but as closed data-object recieved from BACKEND.
let xxx = await myFunctionOnBackend(); console.log(xxx) --> gives back a DATA-Object
What would be now a hackers going way to crack that DATA-PACKAGE?
How someone can know → what is inside the package/object?
How it is structured and so on…
Is it already vulnerable → when the closed object just arrives on FRONTEND?
Or does it gets vulnurable when i start to open it (start to use it in the frontend-code)?
Just trying to understand the security risks on front-end.
@russian-dima Let’s say you call a backend function that performs a database query that returns one item. Instead of returning the entire item returned in the query, you can create a new object leaving out fields that might be sensitive, such as: passport number, telephone number, etc. Of course, sometimes sensitive information is meant to be viewed - by the owner of the information, or a system administrator or authorized user. However, if the intent to display information to other site visitors then you need to be careful what data is returned to the frontend.
Let’s say you call a backend function that performs a database query that returns one item. Instead of returning the entire item returned in the query, you can create a new object leaving out fields that might be sensitive, such as: passport number, telephone number, etc
Ok this one is not realy a problem. I know about this possibility. So let’s stay on the last part of your post…
Of course, sometimes sensitive information is meant to be viewed - by the owner of the information, or a system administrator or authorized user. However, if the intent to display information to other site visitors then you need to be careful what data is returned to the frontend.
As i understand → once a sensitive data landed on frontend → it is immediately vulnerable, no matter if it is a closed or already opened (used) data-object → so a secure interaction with a user is impossile.
What about a lightbox?
Here we have another situation, where a security-risk is given (paralel running post)…
A password-field on front-end → does a LIGHTBOX solve this problem ?
Or even better!
A user wants to pay with CREDIT-CARD. He has to type in his payment-data.
He interacts on front-end → but as soon as i have sensitive data on front-end → i have a problem.
This is where i have my problem to understand it, the right way.
Perhaps you can give a clear and details example for one of the mentioned example-situations.