I'm trying to make a product cart, and that's fine, it's already working, beautiful thing, but, as always, there are problems, I'm kind of new to JS, so I'm picking up a lot,
HTML
<button class="add-to-cart" data-price="25.99">
<em>Adicionar ao Carrinho</em>
<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
<path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
</svg>
</button>
JS
addToCartBtn.on('click', function() { updateCart(); });
function updateCart() {var cartWrapper = $('.cd-cart-container'),
cartWrapperPrice = cartWrapper.find('.add-to-cart'),
cartPrice = cartWrapperPrice.attr('data-price'),
cartBody = cartWrapper.find('.body'),
cartList = cartBody.find('.cd-cart-items');
productAdded = $('<li><span class="cd-qty">1x</span>Produto<div class="cd-price">'+cartPrice+'</div><a href="#" class="cd-item-remove cd-img-replace">Remove</a></li>');
cartList.prepend(productAdded);};
The above one returns me "undefined".
This from below, I get the price, but when I test in another with a different value, it returns only one value, as if it were the one value for all products.
var cartWrapper = $('.cd-cart-container'),
cartWrapperPrice = $('.add-to-cart'),
cartPrice = cartWrapperPrice.attr('data-price'),
cartBody = cartWrapper.find('.body'),
cartList = cartBody.find('.cd-cart-items');
productAdded = $('<li><span class="cd-qty">1x</span>Produto<div class="cd-price">'+cartPrice+'</div><a href="#" class="cd-item-remove cd-img-replace">Remove</a></li>');
cartList.prepend(productAdded);