Wix Tutorial - Add Up Numbers with Wix Code Calculations
To configure a customized shopping cart, you have to calculate the total price of all products by adding up the subtotal prices of the products.
Elements:
User Input:
-
Quantity For Product 1: #quantity1 | Add onChange event in the Properties Panel
-
Quantity For Product 2: #quantity2 | Add onChange event in the Properties Panel
Text Elements:
-
Unit Price For Product 1: #UnitPrice1
-
Unit Price For Product 2: #UnitPrice2
-
Final Price For Product 1: #SubtotalPrice1
-
Final Price For Product 2: #SubtotalPrice2
-
Total Price: #TotalPrice
Wix Code:
export function quantity1_change(event, $w) {
let price = Number($w('#UnitPrice1').text);
let selectedQuantity = Number(event.target.value);
$w('#SubtotalPrice1').text = String(selectedQuantity * price);
$w('#TotalPrice').text = String(Number($w('#SubtotalPrice1').text) + Number($w('#SubtotalPrice2').text));
}
export function quantity2_change(event, $w) {
let price = Number($w('#UnitPrice2').text);
let selectedQuantity = Number(event.target.value);
$w('#SubtotalPrice2').text = String(selectedQuantity * price);
$w('#TotalPrice').text = String(Number($w('#SubtotalPrice1').text) + Number($w('#SubtotalPrice2').text));
}
Demo:
Product
Price ($)
Quantity
Total Price ($)
Turquoise socks with pink dots
$
5
$
5
Yellow socks with pink cats
$
4
$
4
Total Price
$
4
