CODEWITHSUNDEEP
phpajaxwordpress
Mayeenul Islam
Mayeenul Islam

Reputation: 4762

Update Cart count with AJAX success - WordPress

In my custom WordPress theme, I placed my Cart icon in the header.php, where with other things I placed it in an <li class="user-cart">. I placed the db Query within this <li> and with the "Add to Cart" button I'm trying to reload the <li> so that it can query again and show the updated count of the products added.

On AJAX success I can do it using:

success: function (data) {
   $('.user-cart').load(window.location.href + ' .user-cart');
}

When I'm clicking on the Add to Cart button, it's reloading the <li> with the update count(), but it's taking another <li> within the parent <li>, like:

<li class="user-cart">
   <li class="user-cart">
      <a href="/view-cart"><span class="user-cart-icon"></span>&nbsp;15</a>
   </li> <!-- cloned li -->
</li> <!-- parent or original li -->

But the good part is that, the cloned <li> loads only once, on the first click after a page reload, then all the count comes within the second <li>.

What's the wrong part in my code? I don't want any duplicate <li> — just want to reload the <li class="user-cart">.

Upvotes: 0

Views: 705

Answers (1)

code-jaff
code-jaff

Reputation: 9330

You should try like this

success: function (data) {
   $('.user-cart').load(window.location.href + ' .user-cart a');
}

P.S what does that response data contain? I would prefer to use that to update the count, without making an additional request to server

Upvotes: 1

Related Questions