Antoine/Metiers_du_patrimoine_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handling checking/unchecking subtaxonomies
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2024-11-13 13:53:53 +01:00
parent fb729e9bc1
commit 2cd207b946
3 changed files with 135 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/css/pages/repertoire-metiers.css
View File

@ -13,17 +13,29 @@
h4 {
@apply my-0;
}
.checkbox-choice {
@apply pl-0;
@apply flex flex-wrap;
.checkbox-choice {
@apply pl-0 pt-1;
@apply flex flex-wrap;
transition: all 0.3s ease;
&__subtaxonomy-list {
@apply pl-4 my-1 w-full hidden;
}
&:has(> input[type='checkbox']:checked) {
.checkbox-choice__subtaxonomy-list {
@apply block bg-patrimoine-sante-securite-light;
@apply block;
}
}
&.checkbox-choice-parent {
@apply px-2 rounded-2xl;
}
&.checkbox-choice-parent:has(.child-checkbox:checked) {
transition: all 0.3s ease;
@apply bg-patrimoine-sante-securite-light pt-3;
.checkbox-choice__subtaxonomy-list {
@apply block;
}
}
@ -93,6 +105,7 @@
&__metiers-filters {
@apply border border-neutral-300 p-4 rounded-3xl my-4 w-full;
}
&__elements-batiments-filters,
&__metiers-filters {
@apply hidden;

82
resources/js/dynamicSearch.js
View File

@ -26,17 +26,20 @@ async function hydrateFields(formObjectDatas) {
.querySelector('body')
.getAttribute('current-language');
const taxonomy = formObjectDatas.search_by;
const localisation = formObjectDatas.localisation ?? null;
console.log(`localisation : ${localisation}`);
const taxonomyIds =
taxonomy === 'metiers'
? formObjectDatas.metiers
: formObjectDatas.elementsbatiments;
const response = await fetch(
`/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}&taxonomy=${taxonomy}&taxonomy-ids=${taxonomyIds}`
`/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}&taxonomy=${taxonomy}&taxonomy-ids=${taxonomyIds}&localisation=${localisation}`
);
const artisansDatas = await response.json();
console.log(artisansDatas);
// console.log(artisansDatas);
const artisansGrid = document.querySelector(
'.artisans-posts__grid'
@ -48,6 +51,69 @@ async function hydrateFields(formObjectDatas) {
// );
}
function handleHierarchicalCheckboxRelation(e) {
// If parent is checked, check all children
if (
e.target.checked &&
e.target.classList.contains('parent-checkbox')
) {
const parentRootTag = e.target.closest(
'.checkbox-choice'
);
const children = parentRootTag.querySelectorAll(
'.child-checkbox'
);
children.forEach((child) => {
child.checked = true;
});
}
if (
!e.target.checked &&
e.target.classList.contains('parent-checkbox')
) {
// alert('uncheck parent');
const parent = e.target.closest('.checkbox-choice');
const children = parent.querySelectorAll(
'.child-checkbox'
);
children.forEach((child) => {
child.checked = false;
});
}
if (
!e.target.checked &&
e.target.classList.contains('child-checkbox')
) {
const checkboxRootTag = e.target.closest(
'.checkbox-choice'
);
const parentCheckbox =
checkboxRootTag.parentElement.parentElement.querySelector(
'.parent-checkbox'
);
parentCheckbox.checked = false;
}
}
function handleFormChange(e) {
e.preventDefault();
if (
e.target.type === 'checkbox' &&
e.target.classList.contains('taxonomy-checkbox')
) {
handleHierarchicalCheckboxRelation(e);
}
const form = e.target.closest('form');
const formData = new FormData(form);
let formObjectDatas = formatFormDataArray(formData);
hydrateFields(formObjectDatas);
}
export default function dynamicSearch() {
const form = document.querySelector(
'.metier-patrimoine-searchform'
@ -56,15 +122,5 @@ export default function dynamicSearch() {
if (!form) {
return;
}
form.addEventListener('change', (e) => {
e.preventDefault();
const form = e.target.closest('form');
const formData = new FormData(form);
let formObjectDatas = formatFormDataArray(formData);
console.log(formObjectDatas);
hydrateFields(formObjectDatas);
});
form.addEventListener('change', handleFormChange);
}

84
template-repertoire-des-metiers.php
View File

@ -44,7 +44,6 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
?>
<section class="artisans-posts">
<aside class="metier-patrimoine-searchbar">
<div class="metier-patrimoine-searchbar__results-indications">
@ -82,37 +81,15 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
</div>
<ul>
<?php
// Récupérer tous les termes de la taxonomie 'elementsbatiments' avec une hiérarchie
$ElementBatimentsTerms = get_terms([
'taxonomy' => 'elementsbatiments',
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => false,
]);
if ($ElementBatimentsTerms) :
// Organiser les termes par parent (hiérarchie)
$terms_by_parent = [];
// Boucle pour organiser les termes en fonction de leurs parents
foreach ($ElementBatimentsTerms as $term) {
if ($term->parent == 0) {
// Si c'est un parent, on le place dans le tableau des parents
$terms_by_parent[$term->term_id] = [
'term' => $term,
'children' => [],
];
} else {
$terms_by_parent[$term->parent]['children'][] = $term;
}
}
$terms_by_parent = getAllBatimentsTermsByParents();
// Afficher les termes parents et leurs enfants
foreach ($terms_by_parent as $parent_term_data) :
$parent_term = $parent_term_data['term'];
?>
<li class="checkbox-choice">
<input type="checkbox" name="elementsbatiments[]" value="<?php echo esc_attr($parent_term->term_id); ?>" data-term="<?php echo esc_attr($parent_term->slug); ?>">
<li class="checkbox-choice checkbox-choice-parent">
<input class="parent-checkbox taxonomy-checkbox" type="checkbox" name="elementsbatiments[]" value="<?php echo esc_attr($parent_term->term_id); ?>" data-term="<?php echo esc_attr($parent_term->slug); ?>">
<label>
<?php echo esc_html($parent_term->name); ?>
</label>
@ -120,8 +97,8 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
<?php if (!empty($parent_term_data['children'])) : ?>
<ul class="checkbox-choice__subtaxonomy-list">
<?php foreach ($parent_term_data['children'] as $child_term) : ?>
<li class="checkbox-choice">
<input type="checkbox" name="elementsbatiments[]" value="<?php echo esc_attr($child_term->term_id); ?>" data-term="<?php echo esc_attr($child_term->slug); ?>">
<li class="checkbox-choice checkbox-choice-child">
<input class="child-checkbox taxonomy-checkbox" type="checkbox" name="elementsbatiments[]" value="<?php echo esc_attr($child_term->term_id); ?>" data-term="<?php echo esc_attr($child_term->slug); ?>">
<label>
<?php echo esc_html($child_term->name); ?>
</label>
@ -131,7 +108,7 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
<?php endif; ?>
</li>
<?php endforeach;
endif; ?>
?>
</ul>
</fieldset>
@ -145,45 +122,14 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
<ul>
<?php
// Récupérer tous les termes de la taxonomie 'metiers' avec une hiérarchie
$MertiersTerms = get_terms([
'taxonomy' => 'metiers',
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => false,
'stat'
]);
if ($MertiersTerms) :
$terms_by_parent = [];
foreach ($MertiersTerms as $term) {
if ($term->parent == 0 && !isset($terms_by_parent[$term->term_id])) {
$terms_by_parent[$term->term_id] = [
'term' => $term,
'children' => [],
];
}
if ($term->parent == 0 && isset($terms_by_parent[$term->term_id])) {
$terms_by_parent[$term->term_id]['term'] = $term;
} else {
if (!isset($terms_by_parent[$term->parent])) {
$terms_by_parent[$term->parent] = [
'term' => null,
'children' => [],
];
}
$terms_by_parent[$term->parent]['children'][] = $term;
}
}
$terms_by_parent = getAllMetiersTermsByParents();
foreach ($terms_by_parent as $parent_term_data) :
$parent_term = $parent_term_data['term'];
?>
<li class="checkbox-choice">
<input type="checkbox" name="metiers[]" value="<?php echo esc_attr($parent_term->term_id); ?>" data-term="<?php echo esc_attr($parent_term->slug); ?>">
<li class="checkbox-choice checkbox-choice-parent">
<input class="parent-checkbox taxonomy-checkbox" type="checkbox" name="metiers[]" value="<?php echo esc_attr($parent_term->term_id); ?>" data-term="<?php echo esc_attr($parent_term->slug); ?>">
<label>
<?php echo esc_html($parent_term->name); ?>
@ -193,9 +139,9 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
<?php if (!empty($parent_term_data['children'])) : ?>
<ul class="checkbox-choice__subtaxonomy-list">
<?php foreach ($parent_term_data['children'] as $child_term) : ?>
<li class="checkbox-choice">
<li class="checkbox-choice checkbox-choice-child">
<input type="checkbox" name="metiers[]" value="<?php echo esc_attr($child_term->term_id); ?>" data-term="<?php echo esc_attr($child_term->slug); ?>">
<input class="child-checkbox taxonomy-checkbox" type="checkbox" name="metiers[]" value="<?php echo esc_attr($child_term->term_id); ?>" data-term="<?php echo esc_attr($child_term->slug); ?>">
<label>
<?php echo esc_html($child_term->name); ?>
</label>
@ -205,7 +151,7 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
<?php endif; ?>
</li>
<?php endforeach;
endif; ?>
?>
</ul>
</fieldset>
@ -223,15 +169,15 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
<label> <?php echo __("Toute la Belgique", "metiers-patrimoine-theme") ?></label>
</li>
<li class="checkbox-choice">
<input type="checkbox" name="localisation[]" value="wallonie">
<input type="checkbox" name="localisation[]" value="wallonia">
<label> <?php echo __("Wallonie", "metiers-patrimoine-theme") ?></label>
</li>
<li class="checkbox-choice">
<input type="checkbox" name="localisation[]" value="bruxelles">
<input type="checkbox" name="localisation[]" value="brussels" checked>
<label> <?php echo __("Bruxelles", "metiers-patrimoine-theme") ?></label>
</li>
<li class="checkbox-choice">
<input type="checkbox" name="localisation[]" value="flandre">
<input type="checkbox" name="localisation[]" value="flanders">
<label> <?php echo __("Flandre", "metiers-patrimoine-theme") ?></label>
</li>
</ul>