Edit History

Salut, je te partage mon code qui permet:

en fonction de la valeur d'un 1er select (ici une categorie mère), requete ajax pour réaffichage d un 2eme select (sous categorie)

  var url_ajaxbabaMarketplace = "{$link->getModuleLink('babaMarketplace', 'ajax', array())}";

dans javascript.tpl je declare le lien vers l'ajax de mon module

ici le js appellé

$(document).ready(function() {
    
    $('.selectCat1').on('change', function(e) {
        e.preventDefault();

        var id_category = $(this).find(":selected").val();
        var id_product = $(this).attr('id').replace('selectCat1_', '');
        $('#selectCat2_'+id_product).hide();
        $('#label2_'+id_product).hide();
        $('#selectCat3_'+id_product).hide();
        $('#label3_'+id_product).hide();


        $.ajax({
            type: 'POST',
            url: url_ajaxbabaMarketplace,
            cache: false,
            data: {
                action: 'createProductCategorisation',
                id_category: id_category,
                id_product: id_product,
                ajax: true
            },
            success: function (data) {

                var data = jQuery.parseJSON(data);
                var id_product = data.id_product;

                var option ='<option>-Pas de catégorisation</option>';

                if (data.false!==1)
                $.each(data.categories, function(k, v) {
                  
                    option += "<option value="+v['id_category']+">"+v['name']+"</option>";
                });
                
                if (data.categories.length!==0)
                $('#second-level-'+id_product).html('<label id="label2_'+id_product+'">2eme niveau</label><select id="selectCat2_'+id_product+'" class="selectCat2 form-control">'+ option +'</select>');
            
            },

            error: function() {
                alert('Une erreur s\'est produite :(');
            }
        });

        }
    );

    $('body').on('change', '.selectCat2', function(e) {
        e.preventDefault();

        var id_category = $(this).find(":selected").val();
        var id_product = $(this).attr('id').replace('selectCat2_', '');

        $.ajax({
            type: 'POST',
            url: url_ajaxbabaMarketplace,
            cache: false,
            data: {
                action: 'createProductCategorisation',
                id_category: id_category,
                id_product: id_product,
                ajax: true
            },
            success: function (data) {

                var data = jQuery.parseJSON(data);
                var id_product = data.id_product;
                console.log(data.categories);

                var option ='<option>--Pas de catégorisation</option>';

                $.each(data.categories, function(k, v) {
                    option += "<option value="+v['id_category']+">"+v['name']+"</option>";
                });
                
                if (data.categories.length!==0)

                $('#third-level-'+id_product).html('<label id="label3_'+id_product+'">3eme niveau</label><select id="selectCat3_'+id_product+'" class="selectCat3 form-control">'+ option +'</select>');
            
            },

            error: function() {
                alert('Une erreur s\'est produite :(');
            }
        });

        }
    );

.... reste du js ....

une partie du controlleur ajax.php de mon module

elseif ($action == 'createProductCategorisation') { 

            $id_category = (int)Tools::getValue('id_category');
            $id_product = (int)Tools::getValue('id_product');

            // on veut trouver toutes les catégories enfants
            if ($id_category != 0) {
                $categories = Category::getChildren($id_category, 1, true, 1);
                die(Tools::jsonEncode(array('categories' => $categories,'id_product' => $id_product)));
            } else {
                die(Tools::jsonEncode(array('false' => 1)));
            }

la partie du tpl concerné

<div><br/><strong><small>Catégorisation:</small></strong></div>
                    <div class="col-md-3">
                        <label>1er niveau</label>
                        <select class="selectCat1 form-control" id="selectCat1_{$product.product_id}">
                            <option value="0">Selectionner...</option>
                            <option value="849">Cheveux</option>
                            <option value="858">Visage</option>
                            <option value="850">Corps</option>
                            <option value="860">Mains et pieds</option>
                            <option value="1047">Accessoires</option>
                            <option value="863">Bien-être</option>
                            <option value="861">Bronzage</option>
                            <option value="862">Complément alimentaire</option>
                            <option value="859"> Huile essentielle</option>
                        </select>
                    </div>
                    <div id="second-level-{$product.product_id}" class="col-md-3">
                    </div>
                    <div id="third-level-{$product.product_id}" class="col-md-3">
                    </div>
                </div>

en esperant que ca t'aidera,

cdt

Salut, je te partage mon code qui permet:

en fonction de la valeur d'un 1er select (ici une categorie mère), requete ajax pour réaffichage d un 2eme select (sous categorie)

  var url_ajaxbabaMarketplace = "{$link->getModuleLink('babaMarketplace', 'ajax', array())}";

dans javascript.tpl je declare le lien vers l'ajax de mon module

ici le js appellé

$(document).ready(function() {
    
    $('.selectCat1').on('change', function(e) {
        e.preventDefault();

        var id_category = $(this).find(":selected").val();
        var id_product = $(this).attr('id').replace('selectCat1_', '');
        $('#selectCat2_'+id_product).hide();
        $('#label2_'+id_product).hide();
        $('#selectCat3_'+id_product).hide();
        $('#label3_'+id_product).hide();


        $.ajax({
            type: 'POST',
            url: url_ajaxbabaMarketplace,
            cache: false,
            data: {
                action: 'createProductCategorisation',
                id_category: id_category,
                id_product: id_product,
                ajax: true
            },
            success: function (data) {

                var data = jQuery.parseJSON(data);
                var id_product = data.id_product;

                var option ='<option>-Pas de catégorisation</option>';

                if (data.false!==1)
                $.each(data.categories, function(k, v) {
                  
                    option += "<option value="+v['id_category']+">"+v['name']+"</option>";
                });
                
                if (data.categories.length!==0)
                $('#second-level-'+id_product).html('<label id="label2_'+id_product+'">2eme niveau</label><select id="selectCat2_'+id_product+'" class="selectCat2 form-control">'+ option +'</select>');
            
            },

            error: function() {
                alert('Une erreur s\'est produite :(');
            }
        });

        }
    );

    $('body').on('change', '.selectCat2', function(e) {
        e.preventDefault();

        var id_category = $(this).find(":selected").val();
        var id_product = $(this).attr('id').replace('selectCat2_', '');

        $.ajax({
            type: 'POST',
            url: url_ajaxbabaMarketplace,
            cache: false,
            data: {
                action: 'createProductCategorisation',
                id_category: id_category,
                id_product: id_product,
                ajax: true
            },
            success: function (data) {

                var data = jQuery.parseJSON(data);
                var id_product = data.id_product;
                console.log(data.categories);

                var option ='<option>--Pas de catégorisation</option>';

                $.each(data.categories, function(k, v) {
                    option += "<option value="+v['id_category']+">"+v['name']+"</option>";
                });
                
                if (data.categories.length!==0)

                $('#third-level-'+id_product).html('<label id="label3_'+id_product+'">3eme niveau</label><select id="selectCat3_'+id_product+'" class="selectCat3 form-control">'+ option +'</select>');
            
            },

            error: function() {
                alert('Une erreur s\'est produite :(');
            }
        });

        }
    );

.... reste du js ....

une partie du controlleur ajax.php de mon module

elseif ($action == 'createProductCategorisation') { 

            $id_category = (int)Tools::getValue('id_category');
            $id_product = (int)Tools::getValue('id_product');

            // on veut trouver toutes les catégories enfants
            if ($id_category != 0) {
                $categories = Category::getChildren($id_category, 1, true, 1);
                die(Tools::jsonEncode(array('categories' => $categories,'id_product' => $id_product)));
            } else {
                die(Tools::jsonEncode(array('false' => 1)));
            }

la partie du tpl concerné

<div><br/><strong><small>Catégorisation:</small></strong></div>
                    <div class="col-md-3">
                        <label>1er niveau</label>
                        <select class="selectCat1 form-control" id="selectCat1_{$product.product_id}">
                            <option value="0">Selectionner...</option>
                            <option value="849">Cheveux</option>
                            <option value="858">Visage</option>
                            <option value="850">Corps</option>
                            <option value="860">Mains et pieds</option>
                            <option value="1047">Accessoires</option>
                            <option value="863">Bien-être</option>
                            <option value="861">Bronzage</option>
                            <option value="862">Complément alimentaire</option>
                            <option value="859"> Huile essentielle</option>
                        </select>
                    </div>
                    <div id="second-level-{$product.product_id}" class="col-md-3">
                    </div>
                    <div id="third-level-{$product.product_id}" class="col-md-3">
                    </div>
                </div>

en esperant que ca t'aidera,

cdt