Function to reload cart icon without reloading the whole page

Hi,

I made a function to add products to the cart without having to reload the whole page, and I’m trying to make the cart icon update, but my function is not making the cart icon reload properly, there is a delay and sometimes it even doesn’t updates until I reload the page manually.

Is there a function I can use in order to reload the cart icon with the items and number of items properly without having to reload the whole page?

Here is the code to my function:

jQuery(document).ready(function( $ ){
$(‘#featureTrackLicense .line1’).click(function(e) {
e.preventDefault();

prodId = $(this).attr(“data-prod-id”);
addToCart(prodId);
console.log(prodId);
$(‘#mainMenuBanner’).load(‘https://joemexican.com/beats/?elementor_library=main-header #mainMenuBanner > *’); /*This is the code that updates the cart icon but it fails to update sometimes and is very slow, the rest of the code add the product to the cart*/

lastP = $(this).parent();
lastP = $(lastP).children().last();
$(“<p class=’addedCartMsgFeatureTrack’>Your beat has been added to the cart.</p>”).insertAfter(lastP);
return false;
});

function addToCart(p_id) {
$.get(‘?add-to-cart=’ + p_id, function() {
// call back
});
}
});

• This topic was modified 4 years, 4 months ago by jsalcedo88. Reason: Adjustment

The page I need help with: [log in to see the link]