Creating frontend record filter in October CMS

Viewed 251

I am in the process of creating a set of frontend filters in OctoberCMS.

So far everything is working, you can filter the courses by:

Accreditation - field in Course Model
Duration - field in Course Model
Funding - field in Course Model
Category - Relationship to Category Model

Here are my models: Course Category

At the moment i have to hard code the options in the select fields for all the options.

I am trying to currently pull through the categories in a loop in the component.

Here is the code for the Component

<?php namespace Learnconstruction\Learnconstruction\Components;

use Cms\Classes\ComponentBase;
use LearnConstruction\LearnConstruction\Models\Course;
use LearnConstruction\LearnConstruction\Models\Category;
use Illuminate\Support\Facades\Input;

class FilterCourses extends ComponentBase
{
    public function componentDetails()
    {
        return [
            'name'        => 'Filter Courses',
            'description' => 'No description provided yet...'
        ];
    }

    public function defineProperties()
    {
        return [];
    }

    public function onRun() {

        $this->courses = $this->filterCourses();
    
    }


    protected function filterCourses() {
        
        $funding = Input::get('funding');
        $duration = Input::get('duration');
        $accreditation = Input::get('accreditation');
        $category = Input::get('category');
        $query = Course::query();

        if ($funding) $query = $query->where('funding', $funding);
        if ($duration) $query = $query->where('duration', $duration);
        if ($accreditation) $query = $query->where('accreditation', $accreditation);
        if ($category) $query = $query->whereHas('category', function ($query) use ($category) {
              $query->where('name', 'like', $category);
         });
        
        
        return $query->get();

    }
    
    public $courses;

    public $category;

}

And here is the code for the frontend:

<div class="lecture-overview-item">
   <div class="question-overview-filter-wrap my-course-filter-wrap d-flex align-items-center">
      <div class="my-course-filter-by-content">
         <div class="question-overview-filter-item">
            <span class="badge font-size-14 font-weight-semi-bold">Filter by</span>
            <form method="GET" action="{{ url('courses')}}" id="filterCourse">
               <div class="d-flex align-items-center mt-2">
                  <div class="sort-ordering user-form-short">
                     <select name="category" class="sort-ordering-select" onchange="this.form.submit()">
                        <option disabled selected>Category</option>
                        {% for item in __SELF__.category %}
                        <option>{{ item.name }}</option>
                        {% endfor %}
                     </select>
                  </div>
                  <div class="sort-ordering user-form-short">
                     <select name="duration" class="sort-ordering-select" onchange="this.form.submit()">
                        <option disabled selected>Duration</option>
                        <option>1/2 Day</option>
                        <option>1 Day</option>
                        <option>2 Day</option>
                        <option>3 Day</option>
                        <option>4 Day</option>
                        <option>5 Day</option>
                        <option>6 Day</option>
                        <option>9 Day</option>
                     </select>
                  </div>
                  <div class="sort-ordering user-form-short">
                     <select name="funding" class="sort-ordering-select" onchange="this.form.submit()">
                        <option disabled selected>Funding</option>
                        <option>CITB Grant</option>
                     </select>
                  </div>
                  <div class="sort-ordering user-form-short">
                     <select name="accreditation" class="sort-ordering-select" onchange="this.form.submit()">
                        <option disabled selected>Accreditation</option>
                        <option>Certificate</option>
                        <option>IPAF Card & Certficate</option>
                        <option>City & Guilds</option>
                        <option>Pasma Photo ID</option>
                        <option>Red CPCS Card</option>
                        <option>Green CSCS Card</option>
                     </select>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>

For some reason the categories aren't pulling through.

Am i doing this right?

Any help would be appreciated

1 Answers

You can do it like

public function onRender() {
    $this->category =  $this->page['category'] = CategoryModel::all();
}

Now in code __SELF__.category is available as well category is available to use

{% for item in __SELF__.category %}
    <option>{{ item.name }}</option>
{% endfor %}

OR

{% for item in category %}
    <option>{{ item.name }}</option>
{% endfor %}

This should work.

if any doubt please comment

Related