Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX REPEATER SUM TOTAL OF ALL ITEMS

Need a customized checkout for your Wix website? This tutorial will show you how to calculate the sum total of items in a Wix Repeater using Wix Code. You can now customize your own checkout and shopping cart. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/1

THE ELEMENTS

The Page

Text Element:

  • Menu Items: #titles

  • Total Price (Sum Total of All Items): #TotalPrice

Repeater Elements:

  • Item Name: #ItemName

  • Unit Price: #UnitPrice

  • Quantity Ordered: #quantity

  • Total Price of Each Item (#UnitPrice X #quantity): #price

​​

Button Element: #CheckOut

The Database

Create a database OrderForm (dataset1) with the same fields as your form.

Database fields

  • Item Name: ItemName

  • Quantity Ordered: quantity

  • Unit Price of Each Item: unitprice

  • Total Price (Unit Price X quantity): price

For eCommerce checkouts, include customer identifier and use dynamic pages instead of static page.

THE CODE

Page Code

$w.onReady(function () {

let count = $w("#dataset1").getTotalCount(); // No. of items in dataset //

    

$w("#dataset1").getItems(0, count) // Get all items //

.then((results) => {

    let sumTotal = 0; 

    let items = results.items;

 

    items.forEach(item => {

         sumTotal = sumTotal + Number(item.price);

    });

 

    $w("#total").text = "" + sumTotal;

    // Add other calculations here //

    }).catch((err) => {

     console.log(err);

    });

});

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

Great sample code... thank you. Having an issue though.

Here is what I am using.

$w.onReady(function () {
let count = $w("#dataset4").getTotalCount(); // No. of items in dataset //
$w("#dataset4").getItems(0, count) // Get all items //
.then((results) => {
let sumTotal = 0;
let items = results.items;
items.forEach(item => {
sumTotal = sumTotal + Number(item.comPaymentTotal);
});
$w("#total").text = "" + sumTotal;
// Add other calculations here //
}).catch((err) => {
console.log(err);
});
});


dataset4 is filtered dataset and comPaymentTotal is the column where the values are that I want to sum together. When I run the my #total text box gets a 0 but no math is done. My table is filled with 2 results and there are values in that column.

John Evans

Aug 06, 2018

1

Hi John,

I am glad you like our sample code.

There are a few basic things that you should do:
1. Use console.log to determine which section of code is giving you an issue. For example, what is the count? or what was the sumTotal?
2. Are you trying to sum values from a table? Are the results and values what you expect?
3. Check your dataset & element names.

Do let me know if you can solve it. Good luck!

Ben (Vorbly)

Aug 07, 2018

1

Ben, thanks for the reply I will dig into Console.log and see what I can figure out. Not a dev guy technically. Yeah I have a page that pulls records from a table and one of the columns is a dollar value and I want to add all of the filtered lines values together to get a total dollar amount.

John Evans

Aug 08, 2018

1

Hi John, if you are still having trouble resolving the issue, do send across the console.logs and screenshots and we can take a look. We do provide troubleshooting and code implementation services if you are keen. Good luck!

Ben (Vorbly)

Aug 08, 2018

0

Ben very keen depending on price, need to have this wrapped up this week.

John Evans

Aug 08, 2018

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP