# Configurateur de références produit en Query Loop, pour une PME industrielle

> Combiner Query Loop et champs personnalisés pour construire un configurateur de devis simple, entièrement dans un gabarit du Site Editor, sans calcul serveur.

- Auteur : WordPress Développement
- Publié le : 2023-07-27
- Mis à jour le : 2023-07-27
- Catégorie : Éditeur de site (FSE)
- URL : https://www.wpmoderne.fr/fse/configurateur-references-query-loop-pme/

## L’essentiel

- Une référence par ligne de catalogue, filtrable
- Sélection cumulée côté client en JavaScript léger
- Le calcul de prix reste hors périmètre côté serveur

Combien de références un fabricant de visserie industrielle peut-il aligner dans un catalogue papier avant que ses clients renoncent à chercher la bonne pièce ? Dans ce cas, la réponse était : trop. Le fabricant voulait un configurateur simple sur son site, permettant à un acheteur de filtrer par diamètre, matière et longueur, puis de cocher plusieurs références pour obtenir une liste à transmettre au service commercial. Pas de calcul de prix automatique, juste une présélection qui accélère la demande de devis.

Ce besoin, qui ressemble à un projet e-commerce complet, tient en réalité dans une Query Loop bien filtrée, des champs personnalisés pour chaque référence, et une pincée de JavaScript côté client pour gérer la sélection cumulée. Aucun panier, aucun calcul serveur : juste une liste qui se construit au clic.

## Modéliser une référence avec des champs personnalisés

Chaque référence est un article du type `reference`, avec des métadonnées déclarées via `register_post_meta()` : `ref_diametre`, `ref_matiere`, `ref_longueur`, et `ref_code_article`. Ces champs sont exposés en REST pour être filtrables depuis le gabarit d'archive :

```
foreach ( array( 'ref_diametre', 'ref_matiere', 'ref_longueur', 'ref_code_article' ) as $champ ) {
    register_post_meta( 'reference', $champ, array(
        'show_in_rest' => true,
        'single'       => true,
        'type'         => 'string',
    ) );
}
```

## Brancher les filtres sur la Query Loop

> L'essentiel à retenir : Une référence par ligne de catalogue, filtrable ; Sélection cumulée côté client en JavaScript léger ; Le calcul de prix reste hors périmètre côté serveur

Le gabarit d'archive du type `reference` accueille la Query Loop, réglée pour afficher toutes les références sans pagination excessive (une valeur de vingt éléments par page convient à ce volume). Les trois filtres — diamètre, matière, longueur — sont des liens de requête ajoutés en amont du bloc, construits comme des paramètres d'URL classiques interceptés côté serveur avec `pre_get_posts` :

```
add_action( 'pre_get_posts', function( $query ) {
    if ( is_admin() || ! $query->is_main_query() || ! is_post_type_archive( 'reference' ) ) {
        return;
    }

    $meta_query = array();

    if ( ! empty( $_GET['diametre'] ) ) {
        $meta_query[] = array(
            'key'   => 'ref_diametre',
            'value' => sanitize_text_field( $_GET['diametre'] ),
        );
    }

    if ( ! empty( $_GET['matiere'] ) ) {
        $meta_query[] = array(
            'key'   => 'ref_matiere',
            'value' => sanitize_text_field( $_GET['matiere'] ),
        );
    }

    if ( $meta_query ) {
        $query->set( 'meta_query', $meta_query );
    }
} );
```

Les formulaires de filtre eux-mêmes sont de simples menus déroulants placés dans un template part au-dessus de la Query Loop, chaque option pointant vers l'URL de l'archive avec le paramètre correspondant.

### Gérer la sélection cumulée côté client

La sélection de plusieurs références pour un devis groupé ne peut pas passer par un rechargement de page à chaque clic : ce serait perdre la sélection précédente. Une case à cocher placée dans le bloc Post Template, associée à un script minimal, stocke les codes articles sélectionnés dans le stockage local du navigateur :

```
document.querySelectorAll('.selection-reference').forEach(function (case_a_cocher) {
    case_a_cocher.addEventListener('change', function () {
        let selection = JSON.parse(localStorage.getItem('devis_references') || '[]');
        const code = this.dataset.codeArticle;
        if (this.checked) {
            selection.push(code);
        } else {
            selection = selection.filter(function (c) { return c !== code; });
        }
        localStorage.setItem('devis_references', JSON.stringify(selection));
    });
});
```

Un compteur affiché dans l'en-tête indique le nombre de références sélectionnées, quel que soit le filtre actif, puisque les données persistent dans le navigateur entre deux pages consultées.

## Transmettre la sélection au service commercial

Une page dédiée « ma sélection » relit le contenu du stockage local en JavaScript et affiche la liste des codes articles retenus, avec un simple bouton d'envoi qui poste ces codes vers une adresse de messagerie du service commercial via un formulaire classique. Aucune API de paiement, aucun tunnel d'achat : la transaction commerciale reste humaine, par téléphone ou par messagerie, après réception de la demande.

- Le filtrage se fait entièrement côté serveur, par métadonnée, pour rester fiable même avec un catalogue qui grossit.
- La sélection cumulée reste côté client, ce qui évite tout développement de panier.
- Le prix n'apparaît jamais publiquement : il reste négocié au cas par cas par le commercial.

## Limites assumées de cette architecture

Ce configurateur ne calcule aucun prix, ne gère aucune remise de volume, et ne réserve aucun stock. C'est un choix délibéré : le fabricant vend sur devis négocié, pas au prix catalogue affiché. Un projet qui aurait besoin d'un calcul de prix en temps réel demanderait une architecture bien plus lourde, avec un traitement serveur dédié.

## En résumé

Un configurateur de références industrielles n'a pas besoin d'un moteur e-commerce complet : une Query Loop filtrée par métadonnées, un peu de JavaScript pour la sélection cumulée et un formulaire de contact suffisent à transformer un catalogue statique en outil d'aide à la demande de devis.