Créer un filtre en javascript

Bonjour,

Je possède des produits (array) et je cherche à créer un filtre par catégorie. Lorsque je clique sur une catégorie, je souhaite que les produits correspondant à cette catégorie s'affichent.

Code javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 
$(document).ready(function() {
    var $contenu_div = $('#contenu div');
    var page = $('#nav li a:first').text();
 
    $('#nav li a').on('click', function() {
        var url = $(this).attr('href');
 
        var pageDemandee = $(this).text();
 
        if(pageDemandee != page) {
 
            page = pageDemandee;
 
            $.ajax({
                url: url,
                cache: false,
                success: function(html) {
                    $contenu_div.hide().html(html).fadeIn();
                }
            });
        }
        return false;
    });
});

Code PHP (controller) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
 
            $selected_category= (isset($_GET['selected_category']) && !empty($_GET['selected_category'])) ? htmlentities($_GET['selected_category']) : false;
 
            filtred_products = fn_get_product_filtred($selected_category);
 
            Registry::get('view')->assign('ajax_filtred_product',  $filtred_products);
 
 
 
        $contenu = Registry::get('view')->fetch('addons/product_filter/views/ajax_filter_products.tpl');
 
        echo $contenu;

Ici, il faut bien comprendre que la méthode fetch retourne le code HTML de la vue. C'est l'echo qui affiche les données.

Vue HTML avec smarty

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
 
       <div id="nav" class="addon-menu-item">
                     <li class="addon-menu-item active">
                         <a class="active" href="index.php?dispatch=products.filter&selected_category_id={$category.id}">
                             <div class="ty-product-filters__switch ">
                                    <p>{__("All")|upper}</p>
                             </div>
                         </a>
                     </li>
 
 
 
 
                     {foreach from=$product_filter_categories key='categories_key' item='category'}
                            <li class="">
                                <a href="index.php?dispatch=products.filter&selected_category_id={$category.id}">
                                    <div class="ty-product-filters__switch">
                                           <p> {$category.name|upper} </p>
                                    </div>
                                </a>
                            </li>
                     {/foreach}
            </div>
 
 
<div id="contenu">
        <div>
            {if $ajax_filtred_product}
                  {include file="blocks/list_templates/products_list.tpl"
                    products=$ajax_filtred_product
                }
           {/if}
        </div>
    </div>

Ce code fonctionne. Par contre, le contenu entre les <div> dans la vue est remplacé par une string venant du controller (echo $contenu). Il faut savoir que j'ai plusieurs onglets qui appellent cette vue avec du javascript. Or, comme le <div id="contenu"> de la vue est remplacé par la string du controller, quand je change d'onglet, le contenu lié au code smarty ci-dessus n'est pas chargé (car le code smarty a été remplacé par la string du controller).

Donc, je cherche à conserver le contenu dans la vue HTML. Pour ce faire, je dois faire un script javascript qui filtre les produits par catégorie (en gros remplacer le travail du controller PHP) et injecter l'array des produits filtrés dans la variable smarty ajax_filtred_product. Savez-vous comment effectuer ce script javascript qui trie les produits avec la catégorie sélectionnée sans passer par le controller ?

Merci pour votre aide. Je précise qu'on peut utiliser jQuery.