30 secondes : c’est l’intervalle retenu pour ce badge de disponibilité, un compromis entre la fraîcheur de l’information affichée et le nombre de requêtes envoyées au serveur. Trop court, l’intervalle multiplie les appels pour un gain de précision négligeable ; trop long, le badge affiche une valeur périmée au moment critique où les dernières places d’une série limitée partent vite.
Le besoin, ici, ne justifie pas l’installation d’un plugin de gestion de stock complet : un compteur de disponibilité pour une série limitée, affiché sur une page Elementor, se contente d’une route REST maison et d’un petit script de rafraîchissement, sans dépendance supplémentaire.
Le problème posé
La page présente un nombre d’exemplaires restants pour une série limitée. Ce nombre doit se rafraîchir régulièrement sans recharger la page entière, pour donner un sentiment de disponibilité réelle sans pour autant demander au visiteur d’actualiser manuellement. La contrainte : rester simple, sans dépendre d’un système de gestion de stock plus large que le besoin réel.
Le snippet côté serveur, commenté
La première brique consiste à exposer une route REST personnalisée, qui renvoie uniquement le nombre restant, stocké par exemple dans une option ou une métadonnée de l’article concerné :
add_action( 'rest_api_init', function () {
register_rest_route( 'maison/v1', '/disponibilite/(?P<id>\d+)', array(
'methods' => 'GET',
'callback' => 'maison_get_disponibilite',
'permission_callback' => '__return_true',
'args' => array(
'id' => array(
'validate_callback' => function( $param ) {
return is_numeric( $param );
},
),
),
) );
} );
function maison_get_disponibilite( $request ) {
$post_id = (int) $request['id'];
$restant = get_post_meta( $post_id, 'stock_restant', true );
return array(
'restant' => (int) $restant,
);
}
Cette route reste volontairement minimale : elle ne renvoie qu’un entier, sans exposer d’autres métadonnées de l’article, ce qui limite la surface d’information accessible publiquement.
Le snippet côté navigateur, commenté
Côté page, un widget HTML personnalisé d’Elementor accueille un badge et un petit script qui interroge la route à intervalle régulier :
<span id="badge-disponibilite">chargement…</span>
<script>
(function () {
const postId = 128;
const badge = document.getElementById( 'badge-disponibilite' );
async function rafraichir() {
try {
const reponse = await fetch( '/wp-json/maison/v1/disponibilite/' + postId );
if ( ! reponse.ok ) {
throw new Error( 'reponse invalide' );
}
const donnees = await reponse.json();
badge.textContent = donnees.restant + ' exemplaires restants';
} catch ( erreur ) {
badge.textContent = 'disponibilité en cours de mise à jour';
}
}
rafraichir();
setInterval( rafraichir, 30000 );
})();
</script>
Le bloc try/catch n’est pas décoratif : sans lui, une simple coupure réseau ou une erreur serveur temporaire laisserait le badge planté sur son dernier message d’erreur JavaScript brut, visible de tous les visiteurs.
Variante : afficher un état d’épuisement clair
Une variante utile consiste à adapter le message affiché lorsque le stock atteint zéro, plutôt que d’afficher simplement « 0 exemplaire restant », formulation qui laisse penser à une erreur plutôt qu’à un épuisement réel :
- Au-dessus de cinq exemplaires : affichage neutre du nombre restant.
- Entre un et cinq exemplaires : message renforcé, du type « Il n’en reste que X ».
- À zéro : remplacement du badge par un message d’épuisement explicite, sans chiffre.
Variante : réduire la fréquence après épuisement
Une fois le stock à zéro, interroger la route toutes les 30 secondes ne présente plus grand intérêt. Un ajustement simple consiste à espacer les requêtes une fois ce seuil atteint, par exemple toutes les cinq minutes, pour réduire la charge inutile sur le serveur sans dégrader l’expérience du visiteur.
Un badge qui se rafraîchit sans jamais gérer l’échec réseau finit toujours, un jour, par afficher une erreur brute à un visiteur au pire moment.
En résumé
Un indicateur de disponibilité qui se met à jour seul ne demande ni gestionnaire de stock complet ni dépendance lourde : une route REST minimale, un script de rafraîchissement avec gestion d’échec, et un intervalle raisonnable suffisent largement pour une série limitée affichée sur une page Elementor.
