Hi everyone!
I am creating an Order Request form (no payment transaction taking place), and I have a repeater with checkboxes. When the user selects an item from the repeater to add to their order, a Quantity field appears so they can select the number of items they want included in their order. They can select/check many different items, and then pick the quantity of each different item to add to their order.
I would then like to pass this info into another repeater, like a “cart”, where they can review their order selections before confirming.
I want to send the info from each checked row of the 1st repeater (named: “repeaterCurrentAvailability”) into a 2nd repeater (named: “repeaterOrderReview”) for the user’s review.
Currently, my code is retrieving each of the selected items, and I can see each different item correctly in the console log, but when I retrieve it back to pass along to the 2nd repeater (“repeaterOrderReview”) for user’s order review, only the last/most recently selected item appears in the 2nd repeater.
I know I’m likely missing something rather simple, but have been trying everything I can find/think of, and my coding experience is self-taught so I know it’s not always perfect. PLEASE HELP!
I am currently using session storage to accomplish this. And it half-works, but like I said, my 2nd repeater where the user would review their order is only showing the last/most recently selected item from the whole order.
See code & console snippets below:
THIS IS THE CODE I AM USING TO “SAVE” THE CHECKED/SELECTED ORDER ITEMS TO SESSION STORAGE:
export function buttonPlaceOrder_click(event) {
$w('#repeaterCurrentAvailability').forEachItem( ($item, itemData, index) => {
let isCheckedReview = $item('#checkboxAddToOrder').checked;
if(isCheckedReview===true){
let orderFlower = $item('#textTypeFilter').text;
let orderFlowerPrice = Number($item("#price").value);
let orderFlowerColor = $item('#textColor2').text;
let orderQtyAvailable = Number($item('#qtyAvailable').text);
let orderQtyRequested = Number($item("#qtyRequested").value);
let orderItemSubtotal = Number($item("#orderSubtotal").value);
let orderQtyRemaining = Number($item("#quantityRemaining").text);
session.setItem("orderFlower", orderFlower);
session.setItem("orderFlowerPrice", orderFlowerPrice);
session.setItem("orderFlowerColor", orderFlowerColor);
session.setItem("orderQtyRequested", orderQtyRequested);
session.setItem("orderItemSubtotal", orderItemSubtotal);
session.setItem("orderQtyRemaining", orderQtyRemaining);
console.log("orderFlower: " + orderFlower);
console.log("orderFlowerPrice: " + orderFlowerPrice);
console.log("flowerColor: " + orderFlowerColor);
console.log("quantityRequested: " + orderQtyRequested);
console.log("quantityRemaining: " + orderQtyRemaining);
console.log("itemSubtotal: " + "$" + orderItemSubtotal);
}
else{
console.log("N/A")
}
})
setOrderReviewRepeater();
}
And this is what I see in the console.log during the “setItem” part of the code, where it looks like it is saving the info from each checked/selected row of the 1st repeater for the session … it seems as if this is working properly?
A) FIRST SELECTED ITEM:
B) SECOND SELECTED ITEM:
C) THIRD SELECTED ITEM:
Then this is the code I am using to TRY to populate the 2nd repeater (named: “repeaterOrderReview”) FROM THE SESSION STORAGE
export function setOrderReviewRepeater() {
$w('#repeaterOrderReview').forEachItem( ($item, itemData, index) => {
let orderFlower = session.getItem("orderFlower");
let orderFlowerPrice = session.getItem("orderFlowerPrice");
let orderFlowerColor = session.getItem("orderFlowerColor");
let orderQtyRequested = session.getItem("orderQtyRequested");
let orderItemSubtotal = session.getItem("orderItemSubtotal");
let orderQtyRemaining = session.getItem("orderQtyRemaining");
console.log("orderFlowerReview: " + orderFlower);
console.log("orderFlowerPriceReview: " + orderFlowerPrice);
console.log("orderFlowerColorReview: " + orderFlowerColor);
console.log("orderQuantityRequestedReview: " + orderQtyRequested);
console.log("orderItemSubtotalReview: " + orderItemSubtotal);
console.log("orderQuantityRemainingReview: " + orderQtyRemaining);
$w("#textFlowerName").text = orderFlower;
$w("#inputItemPrice").value = orderFlowerPrice;
$w("#inputItemQty").value = orderQtyRequested;
$w("#inputItemSubtotal").value = orderItemSubtotal;
})
}
But then as the code continues … And as you can see from this console screenshot, when I use “getItem” to add the checked/selected repeater row items to the 2nd repeater (“repeaterOrderReview”) only the last/most recent selection is shown, both in the console.log and within the 2nd repeater itself:
This is what I see on the website page preview, as you can see, the code populates the 2nd repeater (“repeaterOrderReview”) with only the most recent checked selection from the order, not each item checked, and then fills each row of the 2nd repeater with the same info over & over, rather than 3 different order items:
I hope this makes sense, and appreciate any help – I’ve been stuck on this last step of a very long bit of code for A LONG time – please help if you can, I really need to finish this project & send off to the client (and move on with my life)! Thanks in advance!!!
