Merge pull request #16838 from woocommerce/fix/16834

Init price slider after using customizer
This commit is contained in:
Claudiu Lodromanean 2017-09-17 09:24:07 -07:00 committed by GitHub
commit 2bf8a742f2
2 changed files with 53 additions and 43 deletions

View File

@ -6,23 +6,6 @@ jQuery( function( $ ) {
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 ) {
$( '.price_slider_amount span.from' ).html( accounting.formatMoney( min, {
@ -44,30 +27,54 @@ jQuery( function( $ ) {
$( document.body ).trigger( 'price_slider_updated', [ min, max ] );
});
$( '.price_slider' ).slider({
range: true,
animate: true,
min: min_price,
max: max_price,
values: [ current_min_price, current_max_price ],
create: function() {
function init_price_filter() {
$( 'input#min_price, input#max_price' ).hide();
$( '.price_slider, .price_label' ).show();
$( '.price_slider_amount #min_price' ).val( current_min_price );
$( '.price_slider_amount #max_price' ).val( current_max_price );
var min_price = $( '.price_slider_amount #min_price' ).data( 'min' ),
max_price = $( '.price_slider_amount #max_price' ).data( 'max' ),
current_min_price = $( '.price_slider_amount #min_price' ).val(),
current_max_price = $( '.price_slider_amount #max_price' ).val();
$( document.body ).trigger( 'price_slider_create', [ current_min_price, current_max_price ] );
},
slide: function( event, ui ) {
$( '.price_slider:not(.ui-slider)' ).slider({
range: true,
animate: true,
min: min_price,
max: max_price,
values: [ current_min_price, current_max_price ],
create: function() {
$( 'input#min_price' ).val( ui.values[0] );
$( 'input#max_price' ).val( ui.values[1] );
$( '.price_slider_amount #min_price' ).val( current_min_price );
$( '.price_slider_amount #max_price' ).val( current_max_price );
$( document.body ).trigger( 'price_slider_slide', [ ui.values[0], ui.values[1] ] );
},
change: function( event, ui ) {
$( document.body ).trigger( 'price_slider_create', [ current_min_price, current_max_price ] );
},
slide: function( event, ui ) {
$( document.body ).trigger( 'price_slider_change', [ ui.values[0], ui.values[1] ] );
}
});
$( '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] ] );
}
});
}
init_price_filter();
hasSelectiveRefresh = (
'undefined' !== typeof wp &&
wp.customize &&
wp.customize.selectiveRefresh &&
wp.customize.widgetsPreview &&
wp.customize.widgetsPreview.WidgetPartial
);
if ( hasSelectiveRefresh ) {
wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function() {
init_price_filter();
} );
}
});

View File

@ -37,14 +37,17 @@ class WC_Widget_Price_Filter extends WC_Widget {
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' ), WC_VERSION, true );
wp_register_script( 'wc-price-slider', WC()->plugin_url() . '/assets/js/frontend/price-slider' . $suffix . '.js', array( 'jquery-ui-slider', 'wc-jquery-ui-touchpunch', 'accounting' ), WC_VERSION, true );
wp_localize_script( 'wc-price-slider', 'woocommerce_price_slider_params', array(
'min_price' => isset( $_GET['min_price'] ) ? esc_attr( $_GET['min_price'] ) : '',
'max_price' => isset( $_GET['max_price'] ) ? esc_attr( $_GET['max_price'] ) : '',
'currency_format_num_decimals' => 0,
'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() ) ),
) );
if ( is_customize_preview() ) {
wp_enqueue_script( 'wc-price-slider' );
}
parent::__construct();
}
@ -67,12 +70,9 @@ class WC_Widget_Price_Filter extends WC_Widget {
return;
}
$min_price = isset( $_GET['min_price'] ) ? esc_attr( $_GET['min_price'] ) : '';
$max_price = isset( $_GET['max_price'] ) ? esc_attr( $_GET['max_price'] ) : '';
wp_enqueue_script( 'wc-price-slider' );
// Find min and max price in current result set
// Find min and max price in current result set.
$prices = $this->get_filtered_price();
$min = floor( $prices->min_price );
$max = ceil( $prices->max_price );
@ -107,6 +107,9 @@ class WC_Widget_Price_Filter extends WC_Widget {
$max = $class_max;
}
$min_price = isset( $_GET['min_price'] ) ? esc_attr( $_GET['min_price'] ) : apply_filters( 'woocommerce_price_filter_widget_min_amount', $min );
$max_price = isset( $_GET['max_price'] ) ? esc_attr( $_GET['max_price'] ) : apply_filters( 'woocommerce_price_filter_widget_max_amount', $max );
echo '<form method="get" action="' . esc_url( $form_action ) . '">
<div class="price_slider_wrapper">
<div class="price_slider" style="display:none;"></div>