Hello!

So I made a nice price-range-slider on the front-end and Im trying to make it filter some of the products (in this case houses). For the filtering Im using Ajax and Php. So I have a database with prices in it and I manage to get the prices out of the database with php-functions in my php-block. I also manage to display the maximum and minimum-price in the range-slider on the front end. But I think that I am having trouble getting the user-input-values back or that I do not manage to filter the database with them.

Im really not managing to figure this out somehow ;) Can anyone help me to figure this out? Any tips are welcome!

The slider looks like this (see the price-range-slider): https://spanje.centralxl.com/
The code of the price-ranger looks like this:

<div class="col-12 col-md-6 col-lg-3">

  <div style="margin-bottom: 1rem;">
    <span class="slider-span" style="color: white;" >Price: </span>
 {% if price %}
      <input name="Filter[minprice]" type="text" class="sliderValue2" style="width: 5rem" data-index="0" value="{{ minprice }}" />

      <input name="Filter[maxprice]" type="text" class="sliderValue2" style="width: 5rem" data-index="1" value="{{ maxprice }}" />
 {% endif %}
    <span class="slider-span" style="color: white;">euro</span>
 </div>

 <div id="slider"></div>

</div>

So, I am trying to use AJAX and PHP and I have the following code in the PHP-block on the page:

==
<?php
use RafaelTeBoekhorst\Rafael\Models\House;

  function onStart() {

     $this->prepareVars();
     $this->preparePrices();

  }

  function onFilterHouses() { $this->prepareVars(); }

  function prepareVars() {

    $options = post('Filter', []);

    $this['houses'] = House::listFrontEnd($options);

    $this['pages'] = $this['houses']->lastPage();

    $this['page'] = $this['houses']->currentPage();

    // $this['sortOptions'] = House::$allowedSortingOptions;

  }

# prices
function preparePrices() {

$houses = House::all();
$price = [];

foreach ($houses as $province) {

      $price[] = $province->price;

    };

$price = array_unique($price);

$this['price'] = $price;

$maxprice = max($price);

$this['maxprice'] = $maxprice;

$minprice = min($price);

$this['minprice'] = $minprice;

}
?>
==

And the prepared values from this block go to my model-php-file in the backend:

 <?php namespace RafaelTeBoekhorst\Rafael\Models;

use Model;
use Input;

/**
 * Model
 */
class House extends Model
{
    use \October\Rain\Database\Traits\Validation;

    /*
     * Disable timestamps by default.
     * Remove this line if timestamps are defined in the database table.
     */
    public $timestamps = false;

    /**
     * @var string The database table used by the model.
     */
    public $table = 'rafaelteboekhorst_rafael_spaanse_huisjes_';

    /**
     * @var array Validation rules
     */
    public $rules = [
    ];

    public function scopeListFrontEnd($query, $options = []){

      extract(array_merge([

    'page' => 1,
    'perPage' => 10,
    'price' => '',
    'minprice' => '',
    'maxprice' => ''

    ], $options));

    $lastPage = $query->paginate($perPage, $page)->lastPage();

    if($lastPage < $page){
      $page = 1;
    }

    if($price && $minprice && $maxprice) {

      $query->whereBetween('price', [$minprice, $maxprice]);

      }

    return $query->paginate($perPage, $page);

    }

}

Check your browser's dev console, the javascript for your slider isn't running at all because there's an error in your code that breaks it. An easy way to see if you're actually sending the data you expect is to watch the Network tab in your browser dev tools and then view the details of the request that's sent to the server for the filtering request and check the request body to see if the values you expect are there.

Thanks a lot for your advice!

Haha, but my js was working fine actually! I dunno why it did not show up though. The thing that I had to change was the query:

   if($minprice && $maxprice) {

  $query->whereBetween('price', [$minprice, $maxprice]);

  }

(I deleted $price from ifstatement)

And now things are working! Almost! I can filter the products with the price range slider. But: When the min and max values are below any of the prices for the houses, the query shows all houses! It should show no houses at all and instead give a message: "No houses in this price range." Notice that this messages does show up when the min and max values are above any prices of houses. Any idea why this is about?

UPDATE: the price slider works only if the min or max values are 1 or above. When I enter zero they do not work. So issue is with the "0" ))

Last updated 3 years ago