Customising Ajax alerts in x.js?

[sguilliard]

I have a custom product type in Woocommerce and was going to use sweetalert.js to add ajax confirmation notices, when I discovered that you guys have an alert already built into PRO, but it only works for ‘simple’ product types.

Is there any way of changing framework/dist/js/site/x.js to listen for just the ‘ajax_add_to_cart’ class rather than both ‘product_type_simple’ & ’ ajax_add_to_cart'? Or, even better, add other classes?

For now, I can get around this by either editing x.js or adding the class ‘product_type_simple’ to the button on my product type through the woocommerce_loop_add_to_cart_link filter. This isn’t ideal for obvious reasons.

Hoping you can offer some guidance on any hooks/filters and/or template files that can be overridden in a child theme. Alternatively, how do I disable the built in Ajax notification listening in x.js to use sweetalert.js as I originally planned?

[marc_a]

Hi @sguilliard,

x.js is compiled code and it’s not recommended it to edit it, you may edit it but we can’t provide support or cover issues created by the customization.

You can use this code below to customize the add ajax confirmation notices, add this code to your child theme functions.php and you can play around the code with your desire output.

if ( ! function_exists( 'x_woocommerce_navbar_cart_ajax_notification' ) ) :
  function x_woocommerce_navbar_cart_ajax_notification() {
    $fa_solid_enable = (bool) x_get_option( 'x_font_awesome_solid_enable' );
    $fa_regular_enable = (bool) x_get_option( 'x_font_awesome_regular_enable' );
    $fa_light_enable = (bool) x_get_option( 'x_font_awesome_light_enable' );
    if ( $fa_solid_enable || $fa_regular_enable || $fa_light_enable ){
      // light
      if ( $fa_light_enable ){
        $data_x_icon = 'data-x-icon-l';
      }
      // regular
      if ( $fa_regular_enable ){
        $data_x_icon = 'data-x-icon-o';
      }
      // solid
      if ( $fa_solid_enable ){
        $data_x_icon = 'data-x-icon-s';
      }
    }else{
      // default
      $data_x_icon = 'data-x-icon-l';
    }
    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;

"Please note that providing custom code is outside the scope of our theme support. Issues that will arise from the use of custom codes should be forwarded to a 3rd party developer."

Thank you.

[sguilliard]

Thanks for this. I didn’t want to edit x.js for precisely that reason.

The code you’ve posted allows me to customse the appearance of the Ajax notification.

However, I want to control what classes trigger it. It’s currently listening ONLY for elements with BOTH classes, product_type_simple AND ajax_add_to_cart which prevents it from being triggered by a product that only has ajax_add_to_cart.

As a work-around, I’ve added the class product_type_simple to my custom product type to get it working, but this is not ideal (causes other CSS issues, which I can solve, but are annoying).

I think I have two options:

• Disable your js listener (can this be done without touching x.js? Dequeue the script and Enqueue a new version of x.js without the listener?)
• Keep the workaround that I’m using where all products that use Ajax buttons should have BOTH product_type_simpleANDajax_add_to_cart` classes.

If you can help with the first option (I may just try it anyway)?

[sguilliard]

My apologies, the two classes be used by x.js are .add_to_cart_button & .product_type_simple and it’s these I’d like to be able to change (I had mis-remembered what I’d readin the code as .ajax_add_to_cart seems to make more sense)…

[friech]

Hi @sguilliard,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

Thank you for your understanding.

[sguilliard]

Wow! A canned response, really?!

If you’d bothered to read what I wrote, it’s clear I’m not asking for any such thing. Just an answer to a simple question: can x.js be overridden in a ‘clean’ manner (hooks/filters etc).

Forget about it, I’ll work this out myself…

[rad]

Hi @sguilliard,

Nope, you can’t override the x.js in any part of the theme or script. It’s a compiled script. Hence, editing of that file is user responsibility and it’s something we can cover by support.

If you have a custom product type, then there is no restriction on how you’ll implement your own add-cart notification as well. There is no requirement that all product type notification should adhere to x.js implementation. In fact, it’s Woocommerce that decides to where the ajax add-cart will appear (it’s the trigger of add-cart notification), it can’t appear on a product with multiple attributes, it’s mostly simple product (hence product_type_simple).

If you’re familiar with added_to_cart trigger, then you can implement your own notification. Please check this https://stackoverflow.com/questions/34334797/woocommerce-added-to-cart-trigger. It’s the same how it’s implemented on x.js. And this is the idea

1. Create a click event for your add cart button, that will display your notification. It’s up to you which class and selector.

2. Use on('added_to_cart') to close your notification, you can add timeout and animation. This is always triggered when there is Ajax add-cart action, and Add-cart action is only applicable for simple product.

Thanks!