Ecommerce Shopify WordPress Discussion

Javascript select and sum column contents

I have implemented the WP_List_Table extension, which renders to a HTML table: <table class="wp-list-table widefat fixed striped table-view-list items"> <tbody id="the-list" data-wp-lists="list:item"> <tr bgcolor="#b2dfbc"> <th scope="row" class="check-column"> <input type="checkbox" name="id[]" value="34"> </th> <td class="title column-title has-row-actions column-primary" data-colname="Order">#34 customer name1 <span style="color:silver">(id:34)</span> <div class="row-actions"> <span class="edit"><a href="admin.php?page=wc-orders&action=edit&id=34">Edit</a> </span> </div><button type="button" class="toggle-row"> </td> <td class="date_created column-date_created" data-colname="Date created">February 6, 2024 </td> <td class="items column-items" data-colname="Items">Shirt - Green, Shoes </td> <td class="total column-total" data-colname="Total"> <span class="woocommerce-Price-amount amount"> <bdi>38,00&nbsp <span class="woocommerce-Price-currencySymbol">€ </span> </bdi> </span> </td> <td class="status column-status" data-colname="Status">submitted </td> <td class="processid column-processid" data-colname="Cotton Process ID"> </td> </tr> <tr bgcolor="#b2dfbc"> <th scope="row" class="check-column"><input type="checkbox" name="id[]" value="35"> </th> <td class="title column-title has-row-actions column-primary" data-colname="Order">#35 customer name2 <span style="color:silver">(id:35) </span> <div class="row-actions"> <span class="edit"><a href="admin.php?page=wc-orders&action=edit&id=35">Edit</a> </span> </div> </td> <td class="date_created column-date_created" data-colname="Date created">February 6, 2024 </td> <td class="items column-items" data-colname="Items">Jacket, Shirt - Cream </td> <td class="total column-total" data-colname="Total"> <span class="woocommerce-Price-amount amount"> <bdi>50,00  <span class="woocommerce-Price-currencySymbol">€ </span> </bdi> </span> </td> <td class="status column-status" data-colname="Status">submitted </td> <td class="processid column-processid" data-colname="Cotton Process ID"> </td> </tr> </tbody> </table> In each row there is a price row for example: <td class="total column-total" data-colname="Total"> <span class="woocommerce-Price-amount amount"> <bdi>38,00&nbsp <span class="woocommerce-Price-currencySymbol">€ </span> </bdi> </span> </td> Also each row has a checkbox. I want to write a javascript code, that captures which checkbox has been checked and then I want to sum the amount provided in the checked rows. I was able to write javascript code that captures which row has been selected and returns the ID of the selected row for example #34 or #35. Here is a code: <script type="text/javascript"> var checkboxes = document.querySelectorAll("input[type=checkbox]"); let enabledSettings = [] checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', function() { enabledSettings = Array.from(checkboxes) .filter(i => i.checked) .map(i => i.value) console.log(enabledSettings) }) }); </script> I need now to extract the amount provided on the specific selected rows and then sum it. Can you provide how to further modify the code? Thank you for any guidance!
Here is the corrected Code <script type="text/javascript"> var checkboxes = document.querySelectorAll("input[type=checkbox]"); let enabledSettings = [] checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', function() { console.log(parseFloat(checkbox.parentElement.parentElement.querySelector('.amount').querySelector('bdi').innerText)); enabledSettings = Array.from(checkboxes) .filter(i => i.checked) .map(i => i) console.log(enabledSettings) var sum=0; for (let i = 0; i < enabledSettings.length; i++ ) { sum += parseFloat(enabledSettings[i].parentElement.parentElement.querySelector('.amount').querySelector('bdi').innerText); } console.log(sum) // 15 }) }); </script>

February 13, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.