Is there any javascript event for Cart Modal element

Support
#1

Hi,

I am using this script for converting woocommerce prices to arabic/english format:

jQuery(document).ready( function(){
      var els = document.querySelectorAll('.woocommerce-Price-amount, .amount, .product-quantity');
      els.forEach(function(item) {
      item.textContent = persianJs(item.textContent).englishNumber().toString();
    });
});

jQuery(document).ready( function(){
      jQuery( 'body' )
      .on( 'init init_checkout updated_checkout checkout_error wc_cart_emptied update_checkout updated_wc_div adding_to_cart added_to_cart removed_from_cart ', function() {
      var els = document.querySelectorAll('.woocommerce-Price-amount, .amount, .product-quantity');
      els.forEach(function(item) {
      item.textContent = persianJs(item.textContent).englishNumber().toString();
      });
   });
});

It works nice on Shop front page, Cart page and Checkout page but I am not able to run it in Cart Modal elements.

Is there any JavaScript event trigger for Cart Modal and for using in above jquery code?
You may check my shop here: gandom.vip/fa/

Regards

#2

Hello Omid,

Thanks for writing in! Where did you added int cart modal element? If you have added it in the header, you should translate your custom header as well.

Please check out this documentations:

Before you can translate the header and footer, you must enable it first in the WPML settings.
Please go to WPML > Translation Options > Custom posts and make sure all custom posts are translatable. Then create your header and footer on your default language. Then edit your header and footer, and you can simply click the flag icon at the bottom cornerstone to edit in specific language and translate the header.

Please check these links for your reference as well:

Regards.

#3

Hello @ruenel,
I have no problem with translations, I want to convert English number (price) to Arabic/Persian number (price) and because of dynamic properties of prices, the prices are not translatable. Of course I have placed my script into translated header where the the Modal Cart there is too.
I think below screenshot can explain it better, the price in Shop Page is converted but the price in Modal Cart is not.

Regards

#4

Hello Omid,

Please have your JS code updated and use this:

jQuery(document).ready( function(){
      var els = document.querySelectorAll('.woocommerce-Price-amount, .amount, .product-quantity, .woocommerce-mini-cart-item .woocommerce-Price-amount, .woocommerce-mini-cart-item .amount, .woocommerce-mini-cart-item .product-quantity');
      els.forEach(function(item) {
      item.textContent = persianJs(item.textContent).englishNumber().toString();
    });
});

We would love to know if this has worked for you. Thank you.

#5

Hi,

This script didn’t work for Cart Modal too.

Thanks

#6

Hey Omid,

I tested the code Ruenel posted in the console and it works. Make sure the code is added in the Persian bar and nothing is conflicting with the code.

The Cart elements uses the WooCommerce Mini Cart feature. Ruenel just added the WooCommerce Mini Cart selectors in your JS. In theory and as tested in the console, it works.

If that doesn’t help when integrated into the actual header, please consider using WooCommerce Multilingual so you can change the price format per language.

If you wish to continue with the custom JS method, please consider hiring a personal developer. Please note that we will be veering into custom WooCommerce development if we get hands on advising you with this.

Thank you for understanding.

#7

Hello @christian,

Indeed using css selectors wasn’t enough to accomplish this converting script; I used these two new events to make it working in all situations:
wc_fragment_refresh & wc_fragments_refreshed

Regards

#8

Hello Omid,

It’s good to know that you have finally figured out a resolution to the issue.

Best Regards.

#9

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