2 b rue Poullain Duparc - 35000, Rennes69 rue des Tourterelles - 86000, Saint-Benoit07 70 48 29 48
Expertise qualité web certifiée pour des sites performants et accessibles
Agréé Crédit Impôt Innovation
Expertise qualité web certifiée pour des sites performants et accessibles
Agréé Crédit Impôt Innovation
Colas Mérand
27/08/2025
PrestaShop
JavaScript
E-commerce
5 minutes
Dans l'univers du e-commerce, chaque détail compte pour transformer un visiteur en client. Parmi ces éléments cruciaux, l'affichage des stocks - particulièrement pour les produits à déclinaisons - joue un rôle déterminant dans le parcours d'achat. Un affichage clair et précis des disponibilités rassure l'acheteur et facilite sa prise de décision.
PrestaShop, en tant que solution e-commerce de référence, offre des fonctionnalités natives pour la gestion des stocks. Cependant, ces fonctionnalités peuvent parfois nécessiter des ajustements pour répondre parfaitement aux besoins spécifiques de votre activité ou pour améliorer l'expérience utilisateur.
Les boutiques PrestaShop proposant des produits à déclinaisons (tailles, couleurs, matières...) font face à plusieurs défis :
Ces problématiques nécessitent souvent des modifications JavaScript pour personnaliser le comportement par défaut de PrestaShop.
L'une des améliorations les plus appréciées consiste à afficher la disponibilité des différentes déclinaisons avant même leur sélection. Par exemple, en survolant une option de couleur, un indicateur peut révéler si cette déclinaison est en stock.
// Exemple simplifié d'affichage au survol
document.querySelectorAll('.product-variants-item').forEach(item => {
item.addEventListener('mouseover', function(e) {
if (e.target.classList.contains('color')) {
const combinationId = e.target.dataset.combinationId;
const stockInfo = productCombinations[combinationId].stock;
// Afficher l'information de stock dans une infobulle
showStockTooltip(e.target, stockInfo);
}
});
});
Une autre approche consiste à modifier visuellement les options en fonction de leur disponibilité : griser les options indisponibles, ajouter des badges de stock, ou même réorganiser les options pour mettre en avant celles qui sont disponibles.
// Exemple de code pour griser les options indisponibles
function updateAvailableOptions() {
const selectedAttributes = getSelectedAttributes();
// Pour chaque option d'attribut
document.querySelectorAll('.product-variants-item input, .product-variants-item select option').forEach(option => {
const combinationId = getCombinationIdFromOption(option, selectedAttributes);
if (combinationId && productCombinations[combinationId].stock <= 0) {
option.classList.add('out-of-stock');
if (option.tagName === 'OPTION') {
option.innerHTML += ' (Épuisé)';
}
}
});
}
La personnalisation des messages de stock permet d'adapter la communication selon votre stratégie commerciale : créer un sentiment d'urgence, proposer des alternatives, ou informer sur les délais de réapprovisionnement.
// Exemple de personnalisation des messages de stock
function updateStockMessage(combinationId) {
const stockInfo = productCombinations[combinationId];
const stockMessageContainer = document.querySelector('#stock-message');
if (stockInfo.stock <= 0) {
stockMessageContainer.innerHTML = 'Temporairement indisponible. <a href="#" class="notify-me">Être notifié du retour en stock</a>';
stockMessageContainer.classList.add('out-of-stock');
} else if (stockInfo.stock < 5) {
stockMessageContainer.innerHTML = `<strong>Plus que ${stockInfo.stock} en stock !</strong> Commandez rapidement`;
stockMessageContainer.classList.add('low-stock');
} else {
stockMessageContainer.innerHTML = 'En stock - Expédition sous 24h';
stockMessageContainer.classList.add('in-stock');
}
}
Chez Platane, nous abordons chaque projet de personnalisation PrestaShop avec une méthodologie éprouvée :
Notre expertise en JavaScript et notre connaissance approfondie de PrestaShop nous permettent d'intervenir efficacement sur des problématiques d'affichage des stocks, même dans des configurations complexes.
Lors de notre collaboration avec le Festival Ouaille Note, nous avons développé une boutique Shopify headless ultra-optimisée qui a permis d'améliorer significativement l'expérience d'achat des produits dérivés du festival. L'un des défis majeurs était justement la gestion des stocks de t-shirts disponibles en plusieurs tailles et couleurs.
Notre solution a permis :
Ces résultats démontrent l'impact significatif qu'une optimisation bien pensée de l'affichage des stocks peut avoir sur les performances commerciales d'une boutique en ligne.
L'optimisation de l'affichage des stocks n'est qu'un aspect d'une stratégie e-commerce réussie. Chez Platane, nous intégrons ces modifications dans une vision plus large de l'expérience utilisateur, en tenant compte :
Notre approche technologique innovante, qui combine expertise technique et créativité, nous permet de proposer des solutions sur mesure qui répondent précisément à vos objectifs commerciaux.
Si vous rencontrez des défis liés à l'affichage des stocks de vos produits à déclinaisons sur PrestaShop, ou si vous souhaitez simplement améliorer l'expérience d'achat sur votre boutique, notre équipe est prête à vous accompagner.
Prenez rendez-vous via notre formulaire de contact pour échanger sur votre projet. Nous prendrons le temps de comprendre vos besoins spécifiques et vous proposerons une solution adaptée, qu'il s'agisse d'une simple modification JavaScript ou d'une refonte plus complète de votre parcours d'achat.
Chez Platane, nous croyons que chaque détail compte dans la construction d'une expérience e-commerce performante. Faites confiance à notre expertise pour transformer vos défis techniques en avantages concurrentiels.
Vous préférez discuter de vive voix ? Nous aussi et c'est évidemment sans engagement !
Une question, un besoin de renseignements ? N'hésitez pas à nous contacter.
