Custom Order Create

Ask the community
, , ,
1

Question:
[Customize the order by selecting the percentage of ingredients and on the selected percentage calculate prices and add that bundle in the cart]

Product:
[Wix Editor.]

What are you trying to achieve:
[I am selling 15 ingredients bar store and I want to sell a custom order in which it will show all ingredients with an option of selecting their percentage and on the bases of the selected percentage the prices will be calculated and will show a table also the bundle will be added to the user’s cart and checkout]

What have you already tried:
[made two repeaters one connected with store products collection and the other will show the selected ingredients data but it just calculates the values, but not set in 2nd repeater even I console it correctly console the object from the calculation of the first repeater objects.

$w.onReady(function () {
const selectedProducts = ;
// Add event listener to all checkboxes in the repeater
$w(“#customproductrepeator”).onItemReady(($item, itemData, index) => {
const checkbox = $item(“#selectProduct”);
const inputPercentage = $item(“#PercentageIng”);
const ProductPrice = parseFloat($item(“#ProductPrice”).text);
const UpdatedPrice = $item(“#percentsage”);

    // Hide the input and updated price by default
    inputPercentage.collapse();
    // UpdatedPrice.collapse();

    // Event listener for checkbox click
    checkbox.onChange(() => {
        if (checkbox.checked) {
            inputPercentage.expand();
            UpdatedPrice.expand();
        } else {
            inputPercentage.collapse();
            UpdatedPrice.collapse();
        }
    });
});

// Event listener for GetPrice button click
$w("#GetPrice").onClick(() => {
    selectedProducts.length = 0;
    // Loop through each item in the repeater
    $w("#customproductrepeator").forEachItem(($item, itemData, index) => {
        const checkbox = $item("#selectProduct");
        const productImage = $item("#productImg");
        const inputPercentage = $item("#PercentageIng");
        const productTitle = $item("#productTitle");
        const originalPrice = parseFloat($item("#ProductPrice").text);

        if (checkbox.checked) {
            const percentageValue = parseFloat(inputPercentage.value);
            if (!isNaN(percentageValue) && percentageValue >= 0 && percentageValue <= 100) {
                const updatedPrice = calculateUpdatedPrice(originalPrice, percentageValue);
                selectedProducts.push({
                    title: productTitle.text,
					originalPrice:originalPrice,
                    percentage: percentageValue,
                    updatedPrice: updatedPrice,
					  image: productImage.src 
                });
            }
        }
    });
      // Calculate and display the total price based on selected percentages
   const totalPrice = selectedProducts.reduce((total, product) => total + product.updatedPrice, 0).toFixed(2);
    $w('#totalAmount').text = totalPrice;
    $w('#GetPrice').label = "Proceed To CheckOut";
    console.log("Total Price:", totalPrice);
    $w("#summaryRepeater").data = selectedProducts;
    setTimeout(() => {
        populateSummaryRepeater(selectedProducts);
    }, 2000);

console.log(selectedProducts); // You can implement further logic here, such as displaying the total price on your page
});
});
async function populateSummaryRepeater(products) {
// Loop through selected products and populate the repeater
$w(“#summaryRepeater”).data = products;
// Populate each item in the repeater
$w(“#summaryRepeater”).onItemReady(($item, itemData, index) => {
console.log(“Populating repeater item:”, itemData);
console.log(“title”, itemData.title);
// Assign data to each element in the repeater item
$item(“#sumimg”).src = itemData.image;
$item(“#sumreqpercentage”).text = itemData.percentage;
$item(“#sumcalculatedprice”).text = itemData.updatedPrice;
$item(“#sumtitle”).text = itemData.title;
$item(“#sumorignalprice”).text = itemData.originalPrice;
});
$w(‘#SummaryBox’).expand();
}
function calculateUpdatedPrice(originalPrice, percentage) {
return originalPrice * (percentage / 100);
}
]

Additional information:
[Out put after one attemp is following

Total Price: 1.40

Product Page

Line 55

Array(2)

jsonTableCopy JSON

0:

{…}

jsonTableCopy JSON

title:

“I’m a product”

originalPrice:

130

percentage:

1

updatedPrice:

1.3

image:

“wix:image://v1/22e53e_1ede4ec9bbed46e4bad5859763fb4176~mv2.jpg/file.jpg#originWidth=4000&originHeight=4000”

1:

{…}

mean object is getting fine just issue with mappping repeater summary]