Excel/Google Sheets Auto Calculations

Hi there, in this video we'll be taking a look at Wix data hooks.

We will set up an onUpdate hook for a collection that will do some basic calculations between fields like you might do on an Excel sheet.

Creating auto calculations in the Wix CMS (Content Management System) involves using Wix Code, which allows you to add custom JavaScript code to your Wix site. Here's a step-by-step guide on how you can achieve auto calculations in Wix CMS:

1. Set Up Your Wix Site:

• Create a New Site:

  • Log in to your Wix account.

  • Click on "Create New Site" or choose an existing site where you want to implement auto calculations.

  • 
    

2. Add a Database Collection:

• Create a Database Collection:

  • In the Wix Editor, go to the left-hand menu.

  • Click on the "Database" icon.

  • Click on "New Collection" to create a new database collection.

  • Define fields for your collection, including fields for the values you want to calculate.

  • 
    

3. Add Input Fields to Your Page:

• Add Input Elements:

  • Go back to the Wix Editor.

  • Drag and drop input elements (text boxes, dropdowns, etc.) onto your page.

  • Connect these input elements to your database collection fields.

  • 
    

4. Set Up Code for Auto Calculations:

• Access Wix Code:

  • Click on the "Settings" icon in the left-hand menu.

  • Click on "Developer Tools" and then "Code."

• Write JavaScript Code:

  • Write JavaScript code using the Wix Code editor.

  • For example, if you want to calculate the sum of two input fields and display the result in another field, you can use code like this:

  javascriptCopy code

  $w.onReady(function () { // Add event handlers for your input elements $w('#input1').onChange(updateTotal); $w('#input2').onChange(updateTotal); }); function updateTotal() { // Get values from input fields let value1 = $w('#input1').value; let value2 = $w('#input2').value; // Perform the calculation let total = parseInt(value1) + parseInt(value2); // Update the result field $w('#result').value = total; }

• 
  

5. Implement Calculations on Dataset Updates:

• Update Dataset:

  • Ensure your dataset is set to update in real-time or on a user action.

  • In the code, you might need to handle dataset updates and recalculate the values accordingly.

  • 
    

6. Test Your Site:

• Preview and Test:

  • Click "Preview" to test your site and see if the auto calculations work as expected.

  • Debug and refine your code as needed.

  • 
    

7. Publish Your Site:

• Publish Your Site:

  • Once you are satisfied with the functionality, click "Publish" to make your site live.

Remember that this is a basic example, and you may need to customize the code based on your specific requirements. Additionally, if you're dealing with sensitive calculations or complex logic, you might want to consult with a developer to ensure accuracy and security.

$w.onReady(function () {

// Add event handlers for your input elements

$w('#input1').onChange(updateTotal);

$w('#input2').onChange(updateTotal);

});

function updateTotal() {

// Get values from input fields

let value1 = $w('#input1').value;

let value2 = $w('#input2').value;

// Perform the calculation

let total = parseInt(value1) + parseInt(value2);

// Update the result field

$w('#result').value = total;

}