Woocommerce plugin formats the price in javascript for Filter Products by Price widget. You may check out the source.
Here, I will try to show you how we can achieve this feature.
Let's create a class named PriceFomatterAsset in PriceFomatterAsset.php
<?php
use Automattic\Jetpack\Constants;
class PriceFomatterAsset {
/**
* Constructor.
*/
public function __construct() {
add_action('init', [ $this, 'register_scripts']);
add_action( 'wp_enqueue_scripts', [$this, 'enqueue_front_scripts' ]);
}
/**
* Register all Dokan scripts and styles.
*
* @return void
*/
public function register_scripts() {
$suffix = Constants::is_true( 'SCRIPT_DEBUG' ) ? '' : '.min';
$version = Constants::get_constant( 'WC_VERSION' );
wp_register_script( 'accounting', WC()->plugin_url() . '/assets/js/accounting/accounting' . $suffix . '.js', array( 'jquery' ), '0.4.2', true );
wp_register_script( 'wc-jquery-ui-touchpunch', WC()->plugin_url() . '/assets/js/jquery-ui-touch-punch/jquery-ui-touch-punch' . $suffix . '.js', array( 'jquery-ui-slider' ), $version, true );
// Replace according to your plugin and js file location.
wp_register_script( 'welabs_script_price_formatter', your-plugin-url . '/assets/frontend/js/price-formatter.js', array( 'jquery-ui-slider', 'wc-jquery-ui-touchpunch', 'accounting' ), null, true );
wp_localize_script(
'welabs_script_price_formatter',
'welabs_price_formatter_params',
array(
'currency_format_num_decimals' => 2,
'currency_format_symbol' => get_woocommerce_currency_symbol(),
'currency_format_decimal_sep' => esc_attr( wc_get_price_decimal_separator() ),
'currency_format_thousand_sep' => esc_attr( wc_get_price_thousand_separator() ),
'currency_format' => esc_attr( str_replace( array( '%1$s', '%2$s' ), array( '%s', '%v' ), get_woocommerce_price_format() ) ),
)
);
}
/**
* Enqueue front-end scripts.
*
* @return void
*/
public function enqueue_front_scripts() {
// You may apply logic to enqueue this script like did_action.
wp_enqueue_script( 'welabs_script_price_formatter' );
}
}
Now, let's create JS file named price-formatter.js where we will define a global function welabs_price_format to format the price according to Woocommerce settings.
window.welabs_price_format = function(price) {
if ( typeof welabs_price_formatter_params === 'undefined' ) {
return false;
}
return accounting.formatMoney( price, {
symbol: welabs_price_formatter_params.currency_format_symbol,
decimal: welabs_price_formatter_params.currency_format_decimal_sep,
thousand: welabs_price_formatter_params.currency_format_thousand_sep,
precision: welabs_price_formatter_params.currency_format_num_decimals,
format: welabs_price_formatter_params.currency_format
});
}
Now, you have to instantiate the PriceFomatterAsset class. For example
function load_price_formatter_asset() {
new PriceFomatterAsset();
}
add_action( 'plugins_loaded', 'load_price_formatter_asset' );
Now, You are ready to use welabs_price_format function in any javascript file.
Top comments (0)