Reputation:
Ok, I'm going to try to explain this the best I can.
I have a product filter on my website that is built using php foreach to create the filter headers and options from a data base. The code it generates is below.
<div class="card mb-2 card-body alert-filters">
<h4>Product Filter</h4>
<div class="row">
<div
class="col-md-3">
<h5>Price</h5>
<input type="hidden" id="hidden_minimum_price" value="0"> <input
type="hidden" id="hidden_maximum_price" value="50">
<p id="price_show">£0 - £50</p>
<div
id="price_range" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-
content">
<div class="ui-slider-range ui-corner-all ui-widget-header" style="left: 0%; width:
100%;"></div>
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"
style="left: 0%;"></span><span tabindex="0" class="ui-slider-handle ui-corner-all ui-
state- default" style="left: 100%;"></span>
</div>
</div>
<div class="col-md-3">
<h5>Material</h5>
<div
style="height: 180px; overflow-y: auto; overflow-x: hidden;">
<div class="list-group-item
checkbox"><label><input type="checkbox" class="common_selector brand1" value="3">
Metal</label>
</div>
<div class="list-group-item checkbox"><label><input type="checkbox"
class="common_selector
brand1" value="1"> PLA</label></div>
<div class="list-group-item checkbox"><label><input
type="checkbox" class="common_selector brand1" value="4"> Resin</label></div>
</div>
</div>
<div
class="col-md-3">
<h5>Base</h5>
<div style="height: 180px; overflow-y: auto; overflow-x: hidden;">
<div class="list-group-item checkbox"><label><input type="checkbox"
class="common_selector
brand2" value="2"> Included</label></div>
</div>
</div>
<input type="hidden" name="cPath" id="cPath"
value="15_13_14">
</div>
The category id is added to the class 'brand'. This is then passed to the jquery below -
$(document).ready(function(){
filter_data();
function filter_data()
{
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var minimum_price = $('#hidden_minimum_price').val();
var maximum_price = $('#hidden_maximum_price').val();
var cPath = $("#cPath").val();
var brand = get_filter('brand');
$.ajax({
url:"ext/filter/fetch_data.php",
method:"POST",
data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price,
brand:brand, cPath: cPath},
success:function(data){
$("#product_list").html(data);
}
});
}
function get_filter(class_name)
{
var filter = [];
$('.'+class_name+':checked').each(function(){
filter.push($(this).val());
});
return filter;
}
$('.common_selector').click(function(){
filter_data();
});
$('#price_range').slider({
range:true,
min:0,
max:50,
values:[0, 50],
step:1,
stop:function(event, ui)
{
$('#price_show').html('£' + ui.values[0] + ' - ' + '£' + ui.values[1]);
$('#hidden_minimum_price').val(ui.values[0]);
$('#hidden_maximum_price').val(ui.values[1]);
filter_data();
}
});
});
This works fine if I do not add the category ID as it just uses the 'brand'.
What I am wanting to do is have a var for 'brand1', 'brand2' etc depending on how many categories there are or a way to group them together and I can split them out on the proceeding page.
Upvotes: 0
Views: 617
Reputation: 23664
If I am understanding you, you need a way of cycling through different brands without knowing ahead of time what those brands are. You're using the brand 'name' as a class. Instead you can set it as a separate attribute (not a classname), so as to make it easier to segregate. Here I used data-brand
to store the brand name and a simple loop to gather the checked category ids after clicking.
Update: Not sure if you need the category id values or the brand names, so this filter function returns both. Look at the console.log I put in there.
$(document).ready(function() {
filter_data();
function filter_data() {
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var minimum_price = $('#hidden_minimum_price').val();
var maximum_price = $('#hidden_maximum_price').val();
var cPath = $("#cPath").val();
var filter = get_filter('brand');
// to get the brand names: filter.brand
// or if you wan tthe category values: filter.values
$.ajax({
url: "ext/filter/fetch_data.php",
method: "POST",
data: {
action: action,
minimum_price: minimum_price,
maximum_price: maximum_price,
brand: filter.brand,
cPath: cPath
},
success: function(data) {
$("#product_list").html(data);
}
});
}
// filters by dataset and value
function get_filter(what) {
let filter = {
[what]: [],
values: []
};
$('.common_selector:checked').each(function() {
let b = $(this).data(what)
if (!filter[what].includes(b)) filter[what].push(b)
filter.values.push($(this).val())
})
console.log('filter', filter)
return filter;
}
$('.common_selector').click(function() {
filter_data();
});
/*$('#price_range').slider({
range:true,
min:0,
max:50,
values:[0, 50],
step:1,
stop:function(event, ui)
{
$('#price_show').html('£' + ui.values[0] + ' - ' + '£' + ui.values[1]);
$('#hidden_minimum_price').val(ui.values[0]);
$('#hidden_maximum_price').val(ui.values[1]);
filter_data();
}
});*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card mb-2 card-body alert-filters">
<h4>Product Filter</h4>
<div class="row">
<div class="col-md-3">
<h5>Price</h5>
<input type="hidden" id="hidden_minimum_price" value="0"> <input type="hidden" id="hidden_maximum_price" value="50">
<p id="price_show">£0 - £50</p>
<div id="price_range" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-
content">
<div class="ui-slider-range ui-corner-all ui-widget-header" style="left: 0%; width:
100%;"></div>
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 0%;"></span><span tabindex="0" class="ui-slider-handle ui-corner-all ui-
state- default" style="left: 100%;"></span>
</div>
</div>
<div class="col-md-3">
<h5>Material</h5>
<div style="overflow-y: auto; overflow-x: hidden;">
<div class="list-group-item
checkbox"><label><input type="checkbox" class="common_selector" data-brand="brand1" value="3">
Metal</label>
</div>
<div class="list-group-item checkbox"><label><input type="checkbox"
class="common_selector" data-brand="brand1" value="1"> PLA</label></div>
<div class="list-group-item checkbox"><label><input
type="checkbox" class="common_selector" data-brand="brand1" value="4"> Resin</label></div>
</div>
</div>
<div class="col-md-3">
<h5>Base</h5>
<div style="overflow-y: auto; overflow-x: hidden;">
<div class="list-group-item checkbox"><label><input type="checkbox"
class="common_selector" data-brand="brand2" value="2"> Included</label></div>
</div>
</div>
<input type="hidden" name="cPath" id="cPath" value="15_13_14">
</div>
Upvotes: 1