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
19/05/2025
NextJS
Supabase
Marketplace
5 minutes
Dans l'univers du e-commerce, les marketplaces connaissent une croissance exponentielle. Ces plateformes qui mettent en relation acheteurs et vendeurs multiples représentent aujourd'hui un modèle économique incontournable. Cependant, leur développement technique comporte des défis spécifiques, notamment en matière de calcul des frais de livraison. Un bug dans ce domaine peut rapidement impacter l'expérience utilisateur et, par conséquent, le taux de conversion de votre plateforme.
Contrairement à un e-commerce classique, une marketplace doit gérer des commandes provenant de multiples vendeurs, chacun avec ses propres règles de livraison. L'un des problèmes les plus courants concerne le calcul des frais de livraison lorsqu'un client commande plusieurs produits d'un même vendeur.
Le scénario problématique typique :
Ce problème technique, apparemment simple, peut avoir des conséquences commerciales désastreuses. Selon une étude de Baymard Institute, 55% des abandons de panier sont liés à des frais supplémentaires trop élevés, dont les frais de livraison.
Dans une architecture NextJS couplée à Supabase, ce bug provient généralement d'une logique de calcul qui ne prend pas en compte le regroupement des produits par vendeur. Examinons les aspects techniques qui peuvent être à l'origine de ce dysfonctionnement :
Structure de données inadaptée : Les tables de commandes et de produits ne sont pas correctement reliées aux vendeurs dans le schéma Supabase.
Logique de calcul au niveau du panier : Le code qui calcule les frais de livraison traite chaque ligne de produit individuellement, sans vérifier si plusieurs produits proviennent du même vendeur.
Intégration avec les API de paiement : L'intégration avec Stripe peut complexifier la gestion des frais lorsque plusieurs produits sont regroupés.
La résolution de ce bug nécessite une approche méthodique qui préserve l'intégrité du reste de l'application. Voici comment nous procédons chez Platane pour résoudre ce type de problème :
// Exemple de structure optimisée pour le panier
type CartItem = {
productId: string;
vendorId: string; // Clé pour le regroupement
quantity: number;
price: number;
// autres propriétés...
};
type ShippingFee = {
vendorId: string;
fee: number;
// règles spécifiques au vendeur...
};
// Fonction de calcul des frais de livraison optimisée
const calculateShippingFees = (cartItems: CartItem[]): number => {
// Regrouper les articles par vendeur
const itemsByVendor = cartItems.reduce((acc, item) => {
if (!acc[item.vendorId]) {
acc[item.vendorId] = [];
}
acc[item.vendorId].push(item);
return acc;
}, {} as Record<string, CartItem[]>);
// Calculer les frais une seule fois par vendeur
let totalShippingFee = 0;
Object.keys(itemsByVendor).forEach(vendorId => {
const vendorShippingFee = getVendorShippingFee(vendorId);
totalShippingFee += vendorShippingFee;
});
return totalShippingFee;
};
// Création de la session de paiement Stripe avec frais regroupés
const createStripeCheckoutSession = async (cart, customer) => {
const lineItems = cart.items.map(item => ({
price_data: {
currency: 'eur',
product_data: {
name: item.name,
},
unit_amount: item.price * 100, // Stripe utilise les centimes
},
quantity: item.quantity,
}));
// Ajouter les frais de livraison regroupés par vendeur
const shippingFeesByVendor = calculateShippingFeesByVendor(cart.items);
Object.entries(shippingFeesByVendor).forEach(([vendorName, fee]) => {
if (fee > 0) {
lineItems.push({
price_data: {
currency: 'eur',
product_data: {
name: `Frais de livraison - ${vendorName}`,
},
unit_amount: fee * 100,
},
quantity: 1,
});
}
});
return await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: lineItems,
mode: 'payment',
// autres options...
});
};
Chez Platane, nous avons eu l'occasion de résoudre ce type de problématique pour plusieurs marketplaces développées sur mesure. Par exemple, lors du développement de la marketplace Dealt, nous avons implémenté une logique de calcul des frais de livraison particulièrement robuste, capable de gérer des scénarios complexes de commandes multi-vendeurs.
Plus récemment, pour la plateforme Astory, spécialisée dans la location d'œuvres d'art, nous avons mis en place un système sophistiqué qui prend en compte non seulement le vendeur, mais aussi la fragilité des œuvres et leur dimension pour calculer les frais de livraison de manière optimale. Cette marketplace génère aujourd'hui plus de 800 000€ de revenus annuels, en partie grâce à une expérience utilisateur fluide et transparente en matière de frais.
La correction d'un bug de frais de livraison peut sembler anodine, mais son impact sur les performances commerciales est considérable :
Au-delà de la correction de ce bug spécifique, voici quelques recommandations pour développer des marketplaces robustes avec NextJS et Supabase :
Conception orientée vendeur : Structurez votre base de données en gardant à l'esprit que le vendeur est une entité centrale dans une marketplace.
Tests automatisés des scénarios de commande : Mettez en place des tests qui simulent différentes configurations de panier pour détecter les anomalies de calcul.
Monitoring en production : Utilisez des outils comme Sentry ou LogRocket pour identifier rapidement les problèmes liés au processus de commande.
Documentation technique détaillée : Documentez précisément la logique de calcul des frais pour faciliter la maintenance future.
Optimisation des requêtes Supabase : Utilisez les fonctionnalités avancées de PostgreSQL via Supabase pour effectuer des calculs côté serveur plutôt que de charger toutes les données côté client.
Les marketplaces modernes développées avec des technologies comme NextJS et Supabase offrent une flexibilité et des performances remarquables. Cependant, elles nécessitent une attention particulière aux détails, notamment en ce qui concerne les calculs de frais qui impactent directement l'expérience utilisateur et le taux de conversion.
Chez Platane, nous combinons expertise technique et compréhension des enjeux business pour développer des solutions sur mesure qui répondent précisément aux besoins spécifiques de chaque marketplace. Notre approche intègre les dernières avancées technologiques, y compris l'intelligence artificielle générative, pour créer des expériences utilisateur fluides et performantes.
Vous rencontrez des défis similaires avec votre marketplace ou envisagez d'en développer une ? N'hésitez pas à prendre rendez-vous via notre formulaire de contact. Nos experts se feront un plaisir d'échanger sur votre projet et de vous proposer des solutions adaptées à vos objectifs. Collaborer avec Platane, c'est bénéficier d'un partenaire technique qui comprend les enjeux commerciaux de votre plateforme et qui s'engage à délivrer des solutions robustes, évolutives et performantes.
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.
L'intelligence artificielle et le Machine Learning redéfinissent l'expérience sur Internet, offrant des possibilités inédites en matière de développement web. Examinons comment ces technologies émergentes façonnent l'avenir de l'internet et transforment la création de sites web.
