JS and PHP needed for Single Product template to use AJAX Add To Cart functionality

single-product-ajax-add-to-cart.js

jQuery(document).ready(function($){
  
// The X/Pro "Added to cart" overlay    
var notification = $('.x-cart-notification');

$(".single_add_to_cart_button").on('click', function(e) {

  e.preventDefault();

  var quantity = $('input[name="quantity"]').val(),
      button = $(this),
      product_id = $(this).val();

  // Optional, will disable and change text of add to cart button on click 
  button.prop('disabled', true).text('Adding...');

  // If overlay exists, let's show it
  if (notification.length > 0) {    
    notification.addClass('bring-forward appear loading');
  }

  $.ajax({   
    url: wc_add_to_cart_params.ajax_url,
    type: 'POST',
    data: 'action=mb_wc_add_cart&product_id=' + product_id + '&quantity=' + quantity,
    timeout: 10000,
    success: function() {
                $(document.body).trigger('wc_fragment_refresh');
                $(document.body).trigger('added_to_cart');
                setTimeout(function() {
                    button.prop('disabled', false).text('Add to Cart');
                }, 200);
    },
    error: function(xhr, ajaxOptions, thrownError) {
      // For debugging, console log any errors. In production, do something different.
      console.log(xhr.status);
      console.log(thrownError);
            }
  });
});
  
});

single-product-ajax-add-to-cart.php

<?php
/*
 * This can all go in your functions.php file
 */


// create ajax callback for add to cart function
// =============================================================================

function mb_wc_add_cart_ajax() {
  
  // Grab POSTed data, typecast as INT.
  $product_id = (int) $_POST['product_id'];
  $quantity = ($_POST['quantity']) ? (int) $_POST['quantity'] : 1;

  // if a valid integer is provided, try to add it to cart. Woo can handle the validation for that.
  if ($product_id) {
    WC()->cart->add_to_cart( $product_id, $quantity);
  }

  exit();
}

add_action('wp_ajax_mb_wc_add_cart', 'mb_wc_add_cart_ajax');
add_action('wp_ajax_nopriv_mb_wc_add_cart', 'mb_wc_add_cart_ajax');


// add X cart notification overlay to single product page
// =============================================================================

function mb_woocommerce_navbar_cart_ajax_notification() {

  if ( is_product() ) {
    $notification = '<div class="x-cart-notification">'
    . '<div class="x-cart-notification-icon loading">'
    . '<i class="x-icon-cart-arrow-down" data-x-icon="&#xf218;" aria-hidden="true"></i>'
    . '</div>'
    . '<div class="x-cart-notification-icon added">'
    . '<i class="x-icon-check" data-x-icon="&#xf00c;" aria-hidden="true"></i>'
    . '</div>'
    . '</div>';
  } else {
    $notification = '';
  }

  echo $notification;

}
add_action( 'x_before_site_end', 'mb_woocommerce_navbar_cart_ajax_notification' );