I am embarking on my inaugural project and attempting to construct a product filtering system. So far, I have successfully implemented search and category filters; however, configuring the rating filter has proven to be challenging.
Here is an excerpt of my code:
<div class="heading">
<h6 class="mb-3">Filter By Area</h6>
</div>
<div class="form-check" v-for="filter in filters" :key="filter">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"
@click="() => filterAccommodations(filter)">
<label class="form-check-label area-filter-each" for="flexRadioDefault1">
{{ filter }}
</label>
</div>
<div class="heading">
<h6 class="mb-3 mt-3">Filter By Rating</h6>
</div>
<div class="form-check" v-for="starRating in starRatings" :key="starRating">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"
@click="() => starAccommodations(filter)">
<label class="form-check-label area-filter-each" for="flexRadioDefault1">
{{ starRating }}
</label>
</div>
The area search function works perfectly without any issues, along with the functioning search bar.
In addition, here is the script section:
const filters = [
"All",
"Dagana",
"Lhuentse",
"Mongar",
"Pemagatshel",
"Tashiyangtse",
"Trashigang",
"Zhemgang",
];
const starRatings = [
"All",
"1",
"2",
"3",
"4",
"5",
];
export default {
name: "SidebarFilter",
props: ["filterAccommodations", "searchAccommodations" ,'filteredAccommodations','starAccommodations'],
data() {
return {
filters,
starRatings
};
},
};
The components I've developed for the search filter seamlessly integrate with another component in a parent file, which serves as a model for my reference.
Displayed below is the template of the Parent file:
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xl-3 col-sm-12 col-xs-12">
<SidebarFilter :filterAccommodations="filterAccommodations"
:searchAccommodations="searchAccommodations"
:starAccommodations="starAccommodations"
/>
</div>
<div class="col-md-9 col-lg-9 col-xl-9 col-sm-12 col-xs-12">
<AccommodationElements :accommodations="accommodations" />
</div>
</div>
</div>
I'm currently creating functions to execute queries on the JSON data. Here's an overview of my script:
import ACCOMMODATION_DATA from '../Accommodation_DATA.json'
methods: {
filterAccommodations(filter) {
this.resetAcccomodations();
if (filter === "All") {
this.accommodations = ACCOMMODATION_DATA;
} else {
this.accommodations = ACCOMMODATION_DATA.filter(accommodation => {
return accommodation.location_id.toLowerCase().includes(filter.toLowerCase());
});
}
},
starAccommodations(filter) {
this.resetAcccomodations();
if (filter === "All") {
this.accommodations = ACCOMMODATION_DATA;
} else {
this.accommodations = ACCOMMODATION_DATA.filter(accommodation => {
return accommodation.star_rate.toLowerCase().includes(filter.toLowerCase());
});
}
},
searchAccommodations(search) {
this.resetAcccomodations();
this.accommodations = ACCOMMODATION_DATA.filter(accommodation => {
return accommodation.title.toLowerCase().includes(search.toLowerCase());
});
},
resetAccommodations() {
this.accommodations = ACCOMMODATION_DATA;
}
}
Here is a snippet of the sample JSON file:
{
"id": 100,
"title": "Onofredo Walkden",
"content": "Salivary operation NEC",
"image_id": "http://dummyimage.com/512x517.png/cc0000/ffffff",
"banner_image_id": "http://dummyimage.com/x.png/ff4444/ffffff",
"location_id": "Tashiyangtse",
"address": "9 Briar Crest Hill",
"map_lat": 40.5845053,
"map_lng": -8.0854006,
"is_featured": true,
"star_rate": 4,
"date_created": "6/22/2021",
"price": 19433.22
}