JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<li class="product-item" data-price="36900" data-discount="18.97">Item 1</li>
<li class="product-item" data-price="36900" data-discount="18.97">Item 2</li>
<br/>
<div>Valor total: R$ <span id="result">0</span></div>

CSS

body {
    color: #FFF;
    font-family: sans-serif;
    background-color: #20262e;
}

JavaScript

"use strict";

function formatReal(int) {
    var tmp = int + '';
    tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
    if (tmp.length > 6) {
        tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
    }
    return tmp;
}

function formatDiscount(price, discount) {
    var priceFinal = '';
    price = parseFloat(price);
    discount = parseFloat(discount);
    discount = (price * discount) / 100;
    priceFinal = (price - discount);
    return parseFloat(priceFinal.toFixed());

}

var customCart = {
    getProducts: function() {
        vtexjs.checkout.getOrderForm().done(function(orderForm) {
            var productItem = orderForm.items;
            if (productItem.length > 0) {
                for (var i = 0; i < productItem.length; i++) {
                    var productId = productItem[i].productId;
                    var productQty = productItem[i].quantity;
                    var productPrice = productItem[i].price;
                    var productPriceFormated = formatReal(productPrice);
                    var productTotalPrice = productQty * productPrice;

                    var newItem = '<li class="product-item list-group-item" data-id="' + productId + '" data-price="' + productTotalPrice + '" data-discount="">' +
                        '<div class="product-image"><img src="' + productItem[i].imageUrl + '"/></div>' +
                        '<h3 class="product-name"><a class="product-name-link block" href="' + productItem[i].detailUrl + '">' + productItem[i].name + '</a></h3>' +
                        '<div class="product-quantity">' + productQty + '</div>' +
                        '<div class="product-best-price">R$></div>' +
                        '<div class="product-list-price">R$ ' + productPriceFormated + '</div>' +
                        '<div class="product-remove"><i class="fas fa-trash-alt"></i></div>' +
                        '</li>';

                    $('#product-list .list-content').append(newItem);

                   ...