Wix Tutorial - Add Up Numbers with Wix Code Calculations

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