1

estou tentando fazer um carrinho de produtos, e até ai tudo bem, já ta funcionando, coisa linda, porém, como sempre, tem os problemas, eu sou meio novo no JS, então to apanhando muito, eu estou tentando pegar o atributo dentro da data-price (data-price="25.99") porém eu não estou conseguindo fazer isso para poder adicionar junto ao carrinho, e o mesmo iria pra pegar o nome do produto, cor, quantidade, etc.

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);};

Esse de cima me retorna "undefined".

Esse de baixo, me retorna o preço, mas quando eu testo em outro com valor diferente, ele me retorna somente um valor, como se fosse o um valor para todos produtos.

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);

1 Resposta 1

1

No primeiro caso, você pode fazer da seguinte forma, enviando o elemento como parâmetro para a função:

addToCartBtn.on('click', function() {   updateCart($(this)); });

E na função, você pode usar a sintaxe i.data("price") para pegar o valor do atributo:

function updateCart(i) {
   var cartWrapper = $('.cd-cart-container'),
   cartPrice = i.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);
};

No segundo caso, seria quase a mesma coisa:

var cartWrapper = $('.cd-cart-container'),
    cartWrapperPrice = $('.add-to-cart'),
    cartPrice = cartWrapperPrice.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);

Veja:

addToCartBtn= $(".add-to-cart");

addToCartBtn.on('click', function() {   updateCart($(this)); });

var cartWrapper = $('.cd-cart-container'),
    cartWrapperPrice = $('.add-to-cart'),
    cartPrice = cartWrapperPrice.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);
   console.log("Valor fora da função: "+cartPrice);

function updateCart(i) {
   var cartWrapper = $('.cd-cart-container'),
   cartPrice = i.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);
   console.log("Valor dentro da função: "+cartPrice);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

2
  • Cara, tu é foda. obrigado, me ajudou demais. Commented 13/12/2017 às 1:33
  • @ThomasFranklin De nada broder! Precisando tamos aí. Abs!
    – Sam
    Commented 13/12/2017 às 1:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .