Cách thêm số thập phân và bước nhảy cho price filter woocommerce

Vấn đề được đặt ra khi khách hàng yêu cầu thêm dấu phẩy (,) hoặc dấu chấm (.) vào phần giá của price filter woocommerce và mỗi lần kéo thanh trượt sẽ có bước nhảy là 100.000 đ .

Khổ cái là mặc định woocommerce không hỗ trợ điều đó. Mặc định sẽ hiển thị dạng 1000000đ mặc dù đã cài đặt trong admin. Mục đích của bài này sẽ giúp chúng ta thay đổi thằng 1.000.000 đ và mỗi lần kéo sẽ nhảy 100.000 đ (từ 1.000.000đ -> 1.100.000đ -> 1.200.000đ …)

Để giải quyết được vấn đề này chúng ta cần phải sửa file jquery mặc định của woocommerce và tất nhiên mỗi lần update plugin sẽ bị mất. Nhưng không còn cách nào khác… do yêu cầu của khách thì phải làm thôi 😀

Chúng ta cần sửa tại file price-slider.min.js với đường dẫn sau.

/wp-content/plugins/woocommerce/assets/js/frontend/price-slider.min.js

do file trên đã được nén lại nên chúng ta không thể mò ở đó mà sửa được mã hãy tới file price-slider.js cùng folder để lấy code chưa được nén và sửa đổi nó. sau đó nén lại và paste vào file price-slider.min.js là được

Thêm số thập phân

Để thêm số thập phân bạn thêm đoạn code như sau

.
.
.
$( document.body ).bind( 'price_slider_create price_slider_slide', function( event, min, max ) {
		
		//Thêm số thập phân
		var min = min.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.");
		var max = max.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.");
		
		if ( woocommerce_price_slider_params.currency_pos === 'left' ) {

.
.
.

 

Thay đổi bước nhảy

Để thay đổi bước nhảy bạn thêm step vào đoạn sau

 

.
.
.
$( '.price_slider' ).slider({
		range: true,
		step:100000, // Thay đổi bước nhay tại đây
		animate: true,
		min: min_price,
		max: max_price,
.
.
.

Hoàn thành

Sau khi hoàn thành ta được code như sau. trong ví dụ này sẽ thêm dấu chấm và bước nhảy là 100.000đ
File price-slider.js

/* global woocommerce_price_slider_params */
jQuery( function( $ ) {

	// woocommerce_price_slider_params is required to continue, ensure the object exists
	if ( typeof woocommerce_price_slider_params === 'undefined' ) {
		return false;
	}

	// Get markup ready for slider
	$( 'input#min_price, input#max_price' ).hide();
	$( '.price_slider, .price_label' ).show();

	// Price slider uses jquery ui
	var min_price = $( '.price_slider_amount #min_price' ).data( 'min' ),
		max_price = $( '.price_slider_amount #max_price' ).data( 'max' ),
		current_min_price = parseInt( min_price, 10 ),
		current_max_price = parseInt( max_price, 10 );

	if ( woocommerce_price_slider_params.min_price ) {
		current_min_price = parseInt( woocommerce_price_slider_params.min_price, 10 );
	}
	if ( woocommerce_price_slider_params.max_price ) {
		current_max_price = parseInt( woocommerce_price_slider_params.max_price, 10 );
	}

	$( document.body ).bind( 'price_slider_create price_slider_slide', function( event, min, max ) {
		
		//Thêm số thập phân
		var min = min.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.");
		var max = max.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.");
		
		if ( woocommerce_price_slider_params.currency_pos === 'left' ) {

			$( '.price_slider_amount span.from' ).html( woocommerce_price_slider_params.currency_symbol + min );
			$( '.price_slider_amount span.to' ).html( woocommerce_price_slider_params.currency_symbol + max );

		} else if ( woocommerce_price_slider_params.currency_pos === 'left_space' ) {

			$( '.price_slider_amount span.from' ).html( woocommerce_price_slider_params.currency_symbol + ' ' + min );
			$( '.price_slider_amount span.to' ).html( woocommerce_price_slider_params.currency_symbol + ' ' + max );

		} else if ( woocommerce_price_slider_params.currency_pos === 'right' ) {

			$( '.price_slider_amount span.from' ).html( min + woocommerce_price_slider_params.currency_symbol );
			$( '.price_slider_amount span.to' ).html( max + woocommerce_price_slider_params.currency_symbol );

		} else if ( woocommerce_price_slider_params.currency_pos === 'right_space' ) {

			$( '.price_slider_amount span.from' ).html( min + ' ' + woocommerce_price_slider_params.currency_symbol );
			$( '.price_slider_amount span.to' ).html( max + ' ' + woocommerce_price_slider_params.currency_symbol );

		}

		$( document.body ).trigger( 'price_slider_updated', [ min, max ] );
	});

	$( '.price_slider' ).slider({
		range: true,
		step:100000,
		animate: true,
		min: min_price,
		max: max_price,
		values: [ current_min_price, current_max_price ],
		create: function() {

			$( '.price_slider_amount #min_price' ).val( current_min_price );
			$( '.price_slider_amount #max_price' ).val( current_max_price );

			$( document.body ).trigger( 'price_slider_create', [ current_min_price, current_max_price ] );
		},
		slide: function( event, ui ) {

			$( 'input#min_price' ).val( ui.values[0] );
			$( 'input#max_price' ).val( ui.values[1] );

			$( document.body ).trigger( 'price_slider_slide', [ ui.values[0], ui.values[1] ] );
		},
		change: function( event, ui ) {

			$( document.body ).trigger( 'price_slider_change', [ ui.values[0], ui.values[1] ] );
		}
	});

});

File sau khi đã nén

File price-slider.min.js đã nén

jQuery(function(a){if("undefined"==typeof woocommerce_price_slider_params)return!1;a("input#min_price, input#max_price").hide(),a(".price_slider, .price_label").show();var b=a(".price_slider_amount #min_price").data("min"),c=a(".price_slider_amount #max_price").data("max"),d=parseInt(b,10),e=parseInt(c,10);woocommerce_price_slider_params.min_price&&(d=parseInt(woocommerce_price_slider_params.min_price,10)),woocommerce_price_slider_params.max_price&&(e=parseInt(woocommerce_price_slider_params.max_price,10)),a(document.body).bind("price_slider_create price_slider_slide",function(b,c,d){var c=c.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1."),d=d.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1.");"left"===woocommerce_price_slider_params.currency_pos?(a(".price_slider_amount span.from").html(woocommerce_price_slider_params.currency_symbol+c),a(".price_slider_amount span.to").html(woocommerce_price_slider_params.currency_symbol+d)):"left_space"===woocommerce_price_slider_params.currency_pos?(a(".price_slider_amount span.from").html(woocommerce_price_slider_params.currency_symbol+" "+c),a(".price_slider_amount span.to").html(woocommerce_price_slider_params.currency_symbol+" "+d)):"right"===woocommerce_price_slider_params.currency_pos?(a(".price_slider_amount span.from").html(c+woocommerce_price_slider_params.currency_symbol),a(".price_slider_amount span.to").html(d+woocommerce_price_slider_params.currency_symbol)):"right_space"===woocommerce_price_slider_params.currency_pos&&(a(".price_slider_amount span.from").html(c+" "+woocommerce_price_slider_params.currency_symbol),a(".price_slider_amount span.to").html(d+" "+woocommerce_price_slider_params.currency_symbol)),a(document.body).trigger("price_slider_updated",[c,d])}),a(".price_slider").slider({range:!0,step:1e5,animate:!0,min:b,max:c,values:[d,e],create:function(){a(".price_slider_amount #min_price").val(d),a(".price_slider_amount #max_price").val(e),a(document.body).trigger("price_slider_create",[d,e])},slide:function(b,c){a("input#min_price").val(c.values[0]),a("input#max_price").val(c.values[1]),a(document.body).trigger("price_slider_slide",[c.values[0],c.values[1]])},change:function(b,c){a(document.body).trigger("price_slider_change",[c.values[0],c.values[1]])}})});

Chúc các bạn thành công!

Cách thêm số thập phân và bước nhảy cho price filter woocommerce
5 (100%) 6 votes
  • Bình luận
Có thể bạn quan tâm
x