Un configurateur d’options de vélo pour un atelier, hors de WooCommerce

Faut-il vraiment installer une boutique en ligne complète pour vendre douze références de plateaux et dérailleurs compatibles avec trois familles de vélos ? Pour un atelier de réparation qui ne vend pas de catalogue à grande échelle, la réponse est presque toujours non. Un type de contenu personnalisé, quelques champs de compatibilité et un shortcode suffisent à couvrir ce besoin sans la complexité d’une solution de commerce électronique complète.

Ce tutoriel construit, étape par étape, un configurateur simple : l’atelier saisit ses pièces disponibles avec leurs compatibilités mécaniques, et le visiteur du site sélectionne son modèle de vélo pour voir uniquement les pièces adaptées. Aucune gestion de panier, aucun paiement en ligne — seulement un outil d’aide au choix, pensé pour rediriger ensuite le client vers l’atelier physique.

Étape 1 : déclarer le type de contenu personnalisé

function atelier_enregistrer_cpt_piece() {
    register_post_type( 'piece_velo', array(
        'labels' => array(
            'name'          => 'Pièces',
            'singular_name' => 'Pièce',
        ),
        'public'       => true,
        'has_archive'  => false,
        'show_in_rest' => false,
        'supports'     => array( 'title', 'thumbnail' ),
        'menu_icon'    => 'dashicons-admin-tools',
    ) );
}
add_action( 'init', 'atelier_enregistrer_cpt_piece' );

show_in_rest reste volontairement désactivé ici : ce configurateur n’a pas besoin d’exposer les pièces via l’API REST, ce qui évite d’ouvrir un point d’accès public inutile pour un usage strictement interne au site.

Étape 2 : ajouter les champs de compatibilité

Chaque pièce a besoin d’indiquer les familles de vélos avec lesquelles elle est compatible. Une métabox classique, ajoutée avec add_meta_box(), permet de saisir cette information sous forme de cases à cocher :

function atelier_metabox_compatibilite() {
    add_meta_box(
        'atelier_compatibilite',
        'Compatibilité mécanique',
        'atelier_afficher_metabox_compatibilite',
        'piece_velo'
    );
}
add_action( 'add_meta_boxes', 'atelier_metabox_compatibilite' );

function atelier_afficher_metabox_compatibilite( $post ) {
    $familles = array( 'route', 'vtt', 'ville' );
    $selection = (array) get_post_meta( $post->ID, '_compatibilite', true );
    wp_nonce_field( 'atelier_compatibilite_nonce', 'atelier_nonce' );

    foreach ( $familles as $famille ) {
        printf(
            '<label><input type="checkbox" name="compatibilite[]" value="%1$s" %2$s> %1$s</label><br>',
            esc_attr( $famille ),
            checked( in_array( $famille, $selection, true ), true, false )
        );
    }
}

Étape 3 : enregistrer la sélection en toute sécurité

function atelier_sauvegarder_compatibilite( $post_id ) {
    if ( ! isset( $_POST['atelier_nonce'] ) ||
        ! wp_verify_nonce( $_POST['atelier_nonce'], 'atelier_compatibilite_nonce' ) ) {
        return;
    }
    $valeurs = isset( $_POST['compatibilite'] ) ? array_map( 'sanitize_text_field', $_POST['compatibilite'] ) : array();
    update_post_meta( $post_id, '_compatibilite', $valeurs );
}
add_action( 'save_post_piece_velo', 'atelier_sauvegarder_compatibilite' );

Étape 4 : afficher le configurateur côté public

Un shortcode affiche un formulaire de sélection de famille, puis liste les pièces correspondantes via une requête filtrée sur la métadonnée :

function atelier_shortcode_configurateur( $atts ) {
    $famille = isset( $_GET['famille'] ) ? sanitize_text_field( $_GET['famille'] ) : '';
    ob_start();
    ?>
    <form method="get">
        <select name="famille">
            <option value="">Choisissez un modèle</option>
            <option value="route" <?php selected( $famille, 'route' ); ?>>Route</option>
            <option value="vtt" <?php selected( $famille, 'vtt' ); ?>>VTT</option>
            <option value="ville" <?php selected( $famille, 'ville' ); ?>>Ville</option>
        </select>
        <button type="submit">Voir les pièces compatibles</button>
    </form>
    <?php
    if ( $famille ) {
        $pieces = new WP_Query( array(
            'post_type'  => 'piece_velo',
            'meta_query' => array( array( 'key' => '_compatibilite', 'value' => $famille ) ),
        ) );
        while ( $pieces->have_posts() ) {
            $pieces->the_post();
            echo '<p>' . esc_html( get_the_title() ) . '</p>';
        }
        wp_reset_postdata();
    }
    return ob_get_clean();
}
add_shortcode( 'configurateur_velo', 'atelier_shortcode_configurateur' );

Ce que ce configurateur n’essaie pas de faire

• Pas de gestion de stock à grande échelle : l’atelier reste responsable de vérifier la disponibilité réelle.
• Pas de panier ni de paiement : l’objectif est d’orienter le client, pas de conclure la vente en ligne.
• Pas de synchronisation avec un système de caisse : les pièces sont saisies manuellement, à faible volume.

Un outil bien dimensionné pour douze références vaut mieux qu’une solution complète configurée à moitié.

En résumé

Pour un atelier avec un catalogue restreint, un type de contenu personnalisé associé à des métadonnées de compatibilité couvre l’essentiel du besoin : aider un client à identifier la bonne pièce avant de se déplacer. La complexité d’une solution de commerce électronique complète n’est justifiée qu’à partir d’un volume de références et de transactions bien plus important.