admin diviser les categories

<div style="" data-oresize="data_product_categories" class="namebox-popup-resize namebox-popup-container">
    <div id="data_product_categories_otree" class="oTree namebox-popup-content">
        <div class="oTreeNode"><img id="data_product_categories_i1" alt=""
                src="../media/com_hikashop/images/otree/world.png"><a id="data_product_categories_s1" class="node"
                href="#" onclick="window.oTrees.data_product_categories.sel(1);return false;">racine</a></div>
     ...

<div class="oTreeNode">
  <a id="data_product_categories_s17" class="node" href="#"
        onclick="window.oTrees.data_product_categories.sel(17);return false;">40</a></div>

$container = $checked = $multi = $catalias = $catname = '';
$catid = $choice =  null;

$alreadySelected = array_keys($this->product->categories);

//var_dump($alreadySelected);

$db = JFactory::getDBO();

$q1 = "SELECT * FROM #__hikashop_category WHERE category_parent_id = 1 AND category_type = 'product' AND category_choice !='null';";
$db->setQuery($q1);
$categories = $db->loadObjectList();

foreach ($categories as $category) {
	$catalias = $category->category_alias;
	$catname = $category->category_name;
    $catid = (int)$category->category_id;
	$choice = $category->category_choice;
	if($choice == "checkbox"){$multi = '[]';};

    $q2 = "SELECT category_id, category_name FROM #__hikashop_category WHERE category_parent_id = '{$catid}' ORDER BY category_name ASC;";
    $db->setQuery($q2);
    $subcategories = $db->loadObjectList();
    $container .= "<dl id='subcat-list-{$category->category_id}' class='hk-pro-form-cats-list'>";
	$container .= "<dt>{$catname}</dt><dd>";
    foreach ($subcategories as $subcategory) {
		$checked = in_array($subcategory->category_id, $alreadySelected, true) ? ' checked' : '';
        
        $container .= "<input type='$choice' $checked  
                        name='{$catalias}{$multi}' 
                        id='subcat{$subcategory->category_id}'
                        value='{$subcategory->category_id}' />
                        <label for='subcat{$subcategory->category_id}'>{$subcategory->category_name}</label><br />";
    }
    $container .= '</dd></dl>';
}
echo "<style>
.hk-pro-form-cats{
	display: flex;
    flex-wrap: wrap;
    gap: 10px;
		dl{
		flex: 1 1 45%;
		border:1px solid black;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    
        padding: 10px;
      background-color:#ccc;


		dt{
		   width: 100%;
        text-align: center;
        margin-bottom: 10px;
        display:block;
		}
		dd{
		   display: block;

		}
		}
	}
</style>";
echo "<section class='hk-pro-form-cats'>$container</section>";

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	4.0.3
 * @author	hikashop.com
 * @copyright	(C) 2010-2019 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die; 
$container = $container_cat = $checked = $multi = $class = $catalias = $catname = $name =  '';
$catid = $choice =  null;

$alreadySelected = array_keys($this->product->categories);

//var_dump($alreadySelected);

$db = JFactory::getDBO();

$q1 = "SELECT * FROM #__hikashop_category WHERE category_parent_id = 1 AND category_type = 'product' AND category_choice !='0';";
$db->setQuery($q1);
$categories = $db->loadObjectList();
$exclusiveCategories = [];
foreach ($categories as $category) {
	$catalias = $category->category_alias;
	$catname = $category->category_name;
    $catid = (int)$category->category_id;
	$choice = $category->category_choice;
    

	if($choice == 1){
        $multi = 'exclusive-' . $category->category_id;
        $exclusiveCategories[] = $category->category_id;
    };

    $q2 = "SELECT category_id, category_name FROM #__hikashop_category WHERE category_parent_id = '{$catid}' ORDER BY category_name ASC;";
    $db->setQuery($q2);
    $subcategories = $db->loadObjectList();
    $container .= "<dl id='subcat-list-{$category->category_id}' class='hk-pro-form-cats-list {$multi}'>";
	$container .= "<dt>{$catname}</dt><dd>";
    foreach ($subcategories as $subcategory) {
		$checked = in_array($subcategory->category_id, $alreadySelected, true) ? ' checked' : '';
        $name = "data[product][categories][]";
        $container .= "<input type='checkbox' $checked  
                        name='{$name}'
                        id='subcat{$subcategory->category_id}'
                        value='{$subcategory->category_id}' 
                        class='checkbox-item'/>
                        <label for='subcat{$subcategory->category_id}'>{$subcategory->category_name}</label><i class='gap'></i>";
        if($checked){
            $container_cat .= "<span>{$subcategory->category_name}</span>";
        }
        $multi = $choice = ""; 
    }
    $container .= "</dd></dl>";    
}
$style = "<style>
.hk-pro-form-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    dl {
        flex: 1 1 45%;
        border: 1px solid black;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        background-color: #ddd;

        dt {
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
            display: block;
        }

        dd {
            display: block;

        }
    }
}

.hk-pro-form-cats-sel {
    width: 100%;
    padding: 10px;
    background-color: #ddd;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 10px;
    border: 1px solid black;
    margin: 10px auto;

    span {
        border: 1px solid black;
        white-space: nowrap;
        padding: 0 5px;
        background-color: #fff;
    }
}

.checkbox-item {
    width: 25px;
    height: 25px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    background-color: white;
    border: none;
    box-shadow: 0 0 0 1px black;
    border-radius: 0;
    cursor: pointer;
    margin-right: 10px;
    position: relative;
    vertical-align: middle;
}

.checkbox-item:checked {
    background-color: pink;
    box-shadow: 0 0 0 1px black;
}

i.gap {
    line-height: 10px;
    height: 10px;
    display: block;
}
</style>";
echo $style;
echo "<section class='hk-pro-form-cats-sel'>$container_cat</section>";
echo "<section class='hk-pro-form-cats'>$container</section>";
?>
<script>
    const exclusiveCategories = <?php echo json_encode($exclusiveCategories); ?>;

    exclusiveCategories.forEach(categoryId => {
        makeExclusive(`exclusive-${categoryId}`);
    });

    function makeExclusive(groupClass) {
        document.querySelectorAll('.' + groupClass + ' .checkbox-item').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if (this.checked) {
                    document.querySelectorAll('.' + groupClass + ' .checkbox-item').forEach(cb => {
                        if (cb !== this) cb.checked = false;
                    });
                }
            });
        });
    }
</script>