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)