Cover me in AJAX

Support
#1

Hi friends,
I like the checkmark notification that’s triggered on my woocommerce ‘products’ page when the user clicks ‘add to cart’, but I want that “Enable AJAX add to cart buttons on archives” effect to be injected into every page that has an ‘add to cart’ button. The notification does not appear on individual ‘product’ pages, or on the homepage which uses [woocommerce short codes]
Can you offer any advice re: this? Please find the attached screenshot of the checkmark effect I’m trying to achieve upon clicking ‘add to cart’ site-wide.
Much obliged,
Andy

#2

Hello There,

Thanks for writing in! By default the AJAX notification will only appear in the product index. To resolve your issue, please add the following code in your child theme’s functions.php file.

// AJAX
// =============================================================================

if ( ! function_exists( 'x_woocommerce_navbar_cart_ajax_notification' ) ) :
  function x_woocommerce_navbar_cart_ajax_notification() {

    //if ( x_is_product_index() && get_option( 'woocommerce_enable_ajax_add_to_cart' ) == 'yes' ) {
      $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', 'x_woocommerce_navbar_cart_ajax_notification' );
endif;

We would loved to know if this has work for you. Thank you.

1 Like
.x-cart-notification Display on single product page
#3

I can’t find the functions.php file in the x-child folder. Where is it located?

#4

Hey There,

You may not have uploaded the file yet or you may have deleted it. Since you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );



// Additional Functions
// =============================================================================

// AJAX
// =============================================================================

if ( ! function_exists( 'x_woocommerce_navbar_cart_ajax_notification' ) ) :
  function x_woocommerce_navbar_cart_ajax_notification() {

    //if ( x_is_product_index() && get_option( 'woocommerce_enable_ajax_add_to_cart' ) == 'yes' ) {
      $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', 'x_woocommerce_navbar_cart_ajax_notification' );
endif;

3] Save the file named as functions.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/

We would loved to know if this has work for you. Thank you.

1 Like
#5

Dear @RueNel and friends,
This worked perfectly, and I couldn’t be happier! Thanks so much! Suppose a concurrent update of x parent is released with this functionality? Would I have to remove this block of code from x-child functions.php?
Best wishes,
Andy

#6

Hey Andy,

Since you added the code in the child theme, any updates to the parent theme will not override or disable the function. You do not need to remove it. I will simply work just fine with no issues.

If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

1 Like
#7

Thanks again!

#8

You are welcome :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.