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 đ .
UPDATE 26.02.2020
Bài viết bên dưới là dành cho bản Woo cũ. Hiện tại woocommerce đã hỗ trợ format giá và bước nhảy cho phần giá ở bộ lọc mà không cần sửa file js của woo nữa. Bạn chỉ cần thêm đoạn code bên dưới đây nếu muốn tăng bước nhảy khi kéo thanh trượt. Mặc định là 10
Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.
Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino hosting
- iNet
- Nước ngoài thì Vultr
/*
* Author: levantoan.com
* Code tăng bước nhảy cho bộ lọc giá. Mặc định là 10
* Trong ví dụ là 1000
* */
add_filter('woocommerce_price_filter_widget_step', 'devvn_woocommerce_price_filter_widget_step');
function devvn_woocommerce_price_filter_widget_step(){
return 1000;
}
=================================
DƯỚI ĐÂY LÀ BÀI VIẾT CŨ. BẠN CÓ THỂ BỎ QUA NẾU ĐANG DÙNG BẢN WOO MỚI NHẤT
=================================
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!
- Bình luận
