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