Hellooo!

Im a beginning programmer and Im bulding my first website on Octobercms. I am having this searchbar (which is now fully functional hurray!) and when I apply some filters (like price minimum and maximum values) and then click on search I want this to happen:

1. the product page should open
2. the product page should show the results of the filter-queries I entered in the search-bar

Here is some of my code to give you an idea of what Im doing at the moment:

A. I have the following to price-range-sliders in my searchbar and some ajax code concerning the partial (#partialHouses, which holds a layout for each product) that has to be updated in order to show filtered results:

// ajax code
{{ form_ajax('onFilterHouses', { update: { 'sections/houses': '#partialHouses', 'sections/paginate': '#partialPaginate' } }) }}

<div id="HousesFilter" 

//price range sliders

<div class="col-12">
<div class="sliderbox1">
    <label for="minvalue" name="Filter[maxbuilt]" class="slider-span" style="color: white;" >
     <input name="Filter[minbuilt]" id="minvalue" class="sliderbox-input-min" style="width: 5rem"  value="1"> - </label>
     <input name="Filter[maxbuilt]" id="maxvalue" class="sliderbox-input-max" style="width: 5rem" value="{{ maxbuilt }}" >
      <label for="maxvalue" name="Filter[minbuilt]" class="slider-span" style="color: white;">m<sup>2</sup></label>
     <div class="sliderbox-slider ranger-height-custom" style="margin-top: 0.5rem;"></div>
  </div>
</div>

<div class="col-12">
<div class="sliderbox2">
     <label for="minvalue" class="slider-span" style="color: white;" >
     <input name="Filter[minprice]" id="minvalue" class="sliderbox-input-min" style="width: 5rem"  value="1"> - </label>
     <input name="Filter[maxprice]" id="maxvalue" class="sliderbox-input-max" style="width: 5rem" value="{{ maxprice }}" >
     <label for="maxvalue" class="slider-span" style="color: white;"> &euro;</label>
     <div class="sliderbox-slider ranger-height-custom" style="margin-top: 0.5rem;"></div>
  </div>
</div>

...

// partial that has to be updated
<div id="partialHouses" style="display: none;">

      {% partial 'sections/houses' %}

</div>

</div>

B. And I have the following php-block on the page:

use \Models\House;

  function onStart() {

     $this->prepareVars();
     $this->prepareLocationDetails();
     $this->prepareTowns();
     $this->prepareProvinces();
     $this->preparePrices();
     $this->prepareBeds();
     $this->prepareBaths();
     $this->prepareBuilt();

  }

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

  function prepareVars() {

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

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

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

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

  }

# 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;

}

(...)

C. Values are acquired through the php and are send to my model (and back) through jquery code which looks like this:

//Submit data on form change
(function($){

    $('#HousesFilter').on('change', 'select, input', function(){

      var $form = $(this).closest('form');

      $form.request();

    });

})(jQuery);

D. The php-block above connects to my model, which looks something like this:

<?php namespace \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 = 'db_table';

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

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

      extract(array_merge([

        'page' => 1,
        'perPage' => 12,
        'id' => '',
        'price' => null,
        'maxbuilt' => '',
        'minbuilt' => ''

    ], $options));

    if($minprice && $maxprice) {

      $query
      ->where('price', '>', $minprice)
      ->where('price', '<', $maxprice)
      ->get();

      }

(...)

My thought: So... I think that I have to make some changes to the jquery right? So it can specify where the request should appear? Im a little lost, never done this, so Im curious for all tips you can give me!

Best M

Last updated 4 years ago