This is a basic tutorial on using the Tori Ajax plugin to create a simple woo comerce product filter by price. Therefore, it doesn’t focus on styling the UI.
functions.php
require_once trailingslashit( get_stylesheet_directory() ) . '/public/public.php';
function my_simple_ajax() {
// Magic happens here.
$args = array(
'post_type' => 'product',
'post_status' => 'publish',
'numberposts' => -1,
'meta_query' => array(
array(
'key' => '_price',
'value' => array( trim( $_POST['from_price'] ), trim( $_POST['to_price'] ) ),
'compare' => 'BETWEEN',
'type' => 'numeric',
),
),
);
$products = get_posts( $args );
$html = '
<table>
<tr>
<th>Name</th>
<th>SKU</th>
<th>Price</th>
</tr>';
foreach ( $products as $product ) {
$html .= '<tr>
<td>' . esc_html( $product->post_title ) . '</td>
<td>' . esc_html( get_post_meta( $product->ID, '_sku', true ) ) . '</td>
<td>' . esc_html( get_post_meta( $product->ID, '_price', true ) ) . '</td>
</tr>';
}
$html .= '
</table>';
echo json_encode( trim( $_POST['from_price'] ) . ' to ' . trim( $_POST['to_price'] ) . $html );
}
if ( function_exists( 'toria_add_ajax' ) ) {
toria_add_ajax(
'simple',
'my_simple_ajax',
get_stylesheet_directory_uri() . '/includes/my_custom_ajax/toria_ajax.js'
);
}
public\public.php
$tt3c_public_dir = trailingslashit( get_stylesheet_directory() ) . 'public';
$tt3c_public_uri = trailingslashit(get_stylesheet_directory_uri() ). 'public';
add_action( 'wp_enqueue_scripts', 'tt3c_enqueue_public_scripts' );
function tt3c_enqueue_public_scripts() {
global $tt3c_public_uri;
wp_enqueue_style( 'dual-range-slider-css', $tt3c_public_uri . '/css/dual-range-slider.css', array(), '1.0.0', false );
wp_enqueue_script( 'dual-range-slider-js', $tt3c_public_uri . '/js/dual-range-slider.js', array(), '1.0.0', true );
}
public\css\dual-range-slider.scss
/*
Reference https://medium.com/@predragdavidovic10/native-dual-range-slider-html-css-javascript-91e778134816
*/
$color_1: #635a5a;
$color_2: #8a8383;
$background-color_1: #fff;
$background-color_2: #C6C6C6;
.range_container {
display: flex;
flex-direction: column;
width: 80%;
margin: 35% auto;
}
.tt3c_sliders_control {
position: relative;
min-height: 50px;
}
.tt3c_form_control {
position: relative;
display: flex;
justify-content: space-between;
font-size: 24px;
color: $color_1;
}
input[type=range] {
&::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: $background-color_1;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
&:hover {
background: #f7f7f7;
}
&:active {
box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
-webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}
}
&::-moz-range-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: $background-color_1;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
}
}
input[type="number"] {
color: $color_2;
width: 100px;
height: 30px;
font-size: 20px;
border: none;
}
input[type=number] {
&::-webkit-inner-spin-button {
opacity: 1;
}
&::-webkit-outer-spin-button {
opacity: 1;
}
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 2px;
width: 100%;
position: absolute;
background-color: $background-color_2;
pointer-events: none;
}
#tt3c_fromSlider {
height: 0;
z-index: 1;
}
public\js\dual-range-slider.js
//Reference https://medium.com/@predragdavidovic10/native-dual-range-slider-html-css-javascript-91e778134816
function controlFromInput(tt3c_fromSlider, tt3c_fromInput_price, tt3c_toInput_price, controlSlider) {
const [from, to] = getParsed(tt3c_fromInput_price, tt3c_toInput_price);
fillSlider(tt3c_fromInput_price, tt3c_toInput_price, '#C6C6C6', '#25daa5', controlSlider);
if (from > to) {
tt3c_fromSlider.value = to;
tt3c_fromInput_price.value = to;
} else {
tt3c_fromSlider.value = from;
}
}
function controlToInput(tt3c_toSlider, tt3c_fromInput_price, tt3c_toInput_price, controlSlider) {
const [from, to] = getParsed(tt3c_fromInput_price, tt3c_toInput_price);
fillSlider(tt3c_fromInput_price, tt3c_toInput_price, '#C6C6C6', '#25daa5', controlSlider);
setToggleAccessible(tt3c_toInput_price);
if (from <= to) {
tt3c_toSlider.value = to;
tt3c_toInput_price.value = to;
} else {
tt3c_toInput_price.value = from;
}
}
function controlFromSlider(tt3c_fromSlider, tt3c_toSlider, tt3c_fromInput_price) {
const [from, to] = getParsed(tt3c_fromSlider, tt3c_toSlider);
fillSlider(tt3c_fromSlider, tt3c_toSlider, '#C6C6C6', '#25daa5', tt3c_toSlider);
if (from > to) {
tt3c_fromSlider.value = to;
tt3c_fromInput_price.value = to;
} else {
tt3c_fromInput_price.value = from;
}
}
function controlToSlider(tt3c_fromSlider, tt3c_toSlider, tt3c_toInput_price) {
const [from, to] = getParsed(tt3c_fromSlider, tt3c_toSlider);
fillSlider(tt3c_fromSlider, tt3c_toSlider, '#C6C6C6', '#25daa5', tt3c_toSlider);
setToggleAccessible(tt3c_toSlider);
if (from <= to) {
tt3c_toSlider.value = to;
tt3c_toInput_price.value = to;
} else {
tt3c_toInput_price.value = from;
tt3c_toSlider.value = from;
}
}
function getParsed(currentFrom, currentTo) {
const from = parseInt(currentFrom.value, 10);
const to = parseInt(currentTo.value, 10);
return [from, to];
}
function fillSlider(from, to, sliderColor, rangeColor, controlSlider) {
const rangeDistance = to.max-to.min;
const fromPosition = from.value - to.min;
const toPosition = to.value - to.min;
controlSlider.style.background = `linear-gradient(
to right,
${sliderColor} 0%,
${sliderColor} ${(fromPosition)/(rangeDistance)*100}%,
${rangeColor} ${((fromPosition)/(rangeDistance))*100}%,
${rangeColor} ${(toPosition)/(rangeDistance)*100}%,
${sliderColor} ${(toPosition)/(rangeDistance)*100}%,
${sliderColor} 100%)`;
}
function setToggleAccessible(currentTarget) {
const tt3c_toSlider = document.querySelector('#tt3c_toSlider');
if (Number(currentTarget.value) <= 0 ) {
tt3c_toSlider.style.zIndex = 2;
} else {
tt3c_toSlider.style.zIndex = 0;
}
}
const tt3c_fromSlider = document.querySelector('#tt3c_fromSlider');
const tt3c_toSlider = document.querySelector('#tt3c_toSlider');
const tt3c_fromInput_price = document.querySelector('#tt3c_fromInput_price');
const tt3c_toInput_price = document.querySelector('#tt3c_toInput_price');
fillSlider(tt3c_fromSlider, tt3c_toSlider, '#C6C6C6', '#25daa5', tt3c_toSlider);
setToggleAccessible(tt3c_toSlider);
tt3c_fromSlider.oninput = () => controlFromSlider(tt3c_fromSlider, tt3c_toSlider, tt3c_fromInput_price);
tt3c_toSlider.oninput = () => controlToSlider(tt3c_fromSlider, tt3c_toSlider, tt3c_toInput_price);
tt3c_fromInput_price.oninput = () => controlFromInput(tt3c_fromSlider, tt3c_fromInput_price, tt3c_toInput_price, tt3c_toSlider);
tt3c_toInput_price.oninput = () => controlToInput(tt3c_toSlider, tt3c_fromInput_price, tt3c_toInput_price, tt3c_toSlider);
includes\my_custom_ajax\toria_ajax.js
function tori_ajax(from, to) {
jQuery.ajax({
type: "post",
url: toria.ajax_url, // admin-ajax.php path,
data: {
action: toria.action, // action
nonce: toria.nonce, // pass the nonce here
from_price: from,
to_price: to,
},
success: function (data) {
console.log(data.trim());
data_object=JSON.parse(data.trim());
document.getElementById("tt3c_product_result").innerHTML = data_object;
//alert(data.trim());
},
error: function (errorThrown) {
console.log(errorThrown);
}
});
}
function tt3cFromSliderChange(){
tt3cProductPriceFilter();
}
function tt3cToSliderChange(){
tt3cProductPriceFilter();
}
function tt3cFromInputPriceChange(){
tt3cProductPriceFilter();
}
function tt3cToInputPriceChange(){
tt3cProductPriceFilter();
}
function tt3cProductPriceFilter(){
var from = document.getElementById("tt3c_fromInput_price").value;
var to= document.getElementById("tt3c_toInput_price").value;
tori_ajax(from, to);// call the function.
}