I have a custom search form with different filters, one of them is the "custom taxonomy filter" with both parent and child term. What I want to accomplish is re-arrange and style the parent and child so that all the child terms will be underneath its parent.
please take a look at the image i uploaded where in 'what i want.png', you can see the parent terms, styled orange in colour, are arranged on top its child, all with checkboxes.
I can do select/checkboxes filters which are working but no way to style and rearrange them.
now take a look at "what i've accomplished.png", I have created taxonomy view (child view inside a parent term view) from this ticket https://toolset.com/forums/topic/parent-child-taxonomy-front-end-layout/ However, I can't find a way to make it checkboxes and work with the search form.
"Checkbox filters aren't easily organized like this, but I can offer some additional guidance for arranging the output of a taxonomy View. Here's how I would accomplish it:"
As guidance shown in the above ticket, there should be a way to organise checkbox filter. Please help me take a look what I have done wrong. thank you so much.
Search Business View: where the custom search view located
district parent view: parent taxonomy view
district child view: child taxonomy view
home: page where the search view is shown
please feel free to access anything you need
Hello,
As the thread you mentioned above, the taxonomy checkboxes filter won't be able to arrange as your screenshot:
hidden link
As a workaround you can setup a nested view to display the taxonomy links, and arrange them to what you want, for example:
1) Edit the "district parent filter view",
hidden link
in section "Loop item in district parent filter view", display the top level term's link like this:
<a href="?wpv-district=[wpv-taxonomy-title]">[wpv-taxonomy-title]</a>
use above link to pass URL parameter "wpv-district" to view
2) Same as step 1), edit the "district child filter view",
hidden link
in section "Loop item in district child filter view", display the link as below:
<a href="?wpv-district=[wpv-taxonomy-title]">[wpv-taxonomy-title]</a>
Dear Luo, thank you so much for your help. although this is closer to what i needed, it still need further modification.
Any workaround could make the terms into checkboxes as shown in the screenshot with multi-select capability, so that when the user press search, the URL of multiple terms checked could be passed to view? thank you again for your help
You can setup the HTML codes, for example, edit the parent taxonomy view, in section "Loop item in district parent filter view", add a checkbox field with HTML codes, like this:
<input name="wpv-district[]" type="checkbox" value="[wpv-taxonomy-title]">
It will also pass same URL parameter "wpv-district" to view
This is it! you are very helpful, thank you so much luo!
there is one more thing on top of that, if a parent is checked by user, then its children will also be automatically checked in the front-end. is it possible to achieve using the view and js editor? if this is too complicated or outside of support policy, it will be much appreciated if some directional guidance could be provided! again thank you so much for your help!
It needs custom JS codes, for example, when users checked the top term checkbox field, you can setup JS codes to check all following child term's checkboxes, More help:
hidden link
for example:
https://stackoverflow.com/questions/8423217/jquery-checkbox-checked-state-changed-event
Hi Luo, thank you for the guidance. I am very close to the final result!
I have written the JS code to detect change event (check/uncheck) on the parent term, but I couldn't target its child terms to do the check/uncheck action. Please look at the code in the following. I tried to insert the parent title into the child as id, then find the child by both child-district-checkbox class and id, however I can't find the parent title shortcode in child view.
Or is there a trivial way to find the child of checked parent terms in JS code? Hope you could help me out luo, thank you in advance
jQuery(function($) {
$('input.parent-disctrict-checkbox').on('change', function(){
if(this.checked) {
// checkbox is checked
var checkbox = $(this);
var parent = "#" + checkbox.prop('value')
console.log(parent);
$(parent).find('input.child-disctrict-checkbox').prop('checked', true);
}
if(!this.checked) {
// checkbox is unchecked
console.log('uncheked');
}
});
});
Hi luo, I managed to make the check/uncheck all child terms when its parent is checked/unchecked function with custom JS, therefore please ignore my previous post.
However, I have encountered another problem which is probably a tiny one i can feel it.
For some reason, the checkboxes html now cannot pass taxonomy URL parameter to view, some linkage is broken but I cant find it, thus no result is returned when search is pressed. The checkboxes were once worked when you taught me in the afternoon. Moreover, I have checked that when the ordinary shortcode is added, the filter works as normal.
normal filter that works:
[wpv-control-post-taxonomy taxonomy="district" type="checkboxes" url_param="wpv-district"]
my code now in the district parent filter view:
<div id="[wpv-taxonomy-slug]">
<div class="parent-term">
<input class="parent-district-checkbox" name="wpv-district[]" type="checkbox" value="[wpv-taxonomy-title]" id="[wpv-taxonomy-slug]">
[wpv-taxonomy-title]
</div>
<hr>
[wpv-view name="district-child-filter-view"]
<br>
</div>
JS code:
jQuery(function($) {
$('input.parent-district-checkbox').on('change', function(){
if(this.checked) {
// checkbox is checked
var checkbox = $(this);
var path = "#" + checkbox.prop('id') + ' input.child-district-checkbox'
$(path).prop('checked', true);
}
if(!this.checked) {
// checkbox is unchecked
var checkbox = $(this);
var path = "#" + checkbox.prop('id') + ' input.child-district-checkbox'
$(path).prop('checked', false);
}
});
});
Things i have modified that might have broken the linkage:
I have added or changed the taxonomy slug to english from empty/chinese.
Thank you so much for your help
Thanks for the details, I am checking it in your website, will update here if there is anything found
Here are what I found, since you are using term's slug in filter, so you will need to pass term's slug as URL parameters, I have done below modifications in your website:
1) Edit the parent taxonomy view "district parent filter view", in section "Loop item in district parent filter view", change the codes from:
<input class="parent-district-checkbox" name="wpv-district[]" type="checkbox" value="[wpv-taxonomy-title]" id="[wpv-taxonomy-title]">
To:
<input class="parent-district-checkbox" name="wpv-district[]" type="checkbox" value="[wpv-taxonomy-slug]" id="[wpv-taxonomy-slug]">
2) Same as above, edit the child taxonomy view, change the codes to:
<input class="parent-district-checkbox" name="wpv-district[]" type="checkbox" value="[wpv-taxonomy-slug]" id="[wpv-taxonomy-slug]">
More help:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-taxonomy-slug
Outputs the taxonomy slug
Please test again, check if it is fixed, thanks
That is very efficient and helpful, thank you so much for your help luo!
