Aller au contenu principal

Racing Bike 1998 · Boutique de Cyclisme en Ligne

Boutique de cyclisme en ligne à Bogotá : catalogue filtrable, guide des tailles, paiements PSE, carte et Addi, livraison nationale.

Page d'accueil de la boutique Racing Bike 1998 : carrousel de campagnes avec un cycliste sur route, menu des catégories, recherche, liste de souhaits, panier et bande d'avantages
Client
Racing Bike 1998 · Magasin de Vélos à Bogotá
Compétences
E-Commerce · Cyclisme & Vélos · Paiements Locaux & Financement
Site en ligne
racingbike.com.coVisiter le site
01

Contexte du client

Racing Bike 1998 est un magasin de cyclisme basé à Bogotá, en activité depuis 1998. Il vend des vélos de route, de montagne (VTT), gravel, électriques (VAE) et pour enfants, des cadres, des composants et des accessoires pour le vélo et pour le cycliste (casques, vêtements, chaussures, ceintures cardio). Il travaille avec des marques comme Trek, Orbea, Shimano et Magene, ainsi qu'avec ses propres vélos et cadres.

Son offre ne se limite pas au produit : chaque vélo est livré monté et réglé par son propre atelier de Bogotá, ses cadres maison sont garantis à vie et le magasin répond sur WhatsApp à qui a besoin de conseils avant d'acheter.

La boutique en ligne devait offrir la même expérience dans tout le pays : livraison dans toute la Colombie chiffrée par ville, moyens de paiement locaux et un catalogue technique que l'on peut parcourir sans connaître le nom de chaque pièce.

02

Le problème

Vendre des vélos et des composants en ligne est plus difficile que vendre des vêtements ou des accessoires. Il fallait résoudre cinq choses à la fois :

  • Un catalogue vaste et technique : des vélos avec taille et couleur, des groupes de transmission, des capteurs de puissance, des pneus, des vêtements. L'acheteur doit trouver ce qu'il cherche par prix, marque, taille ou remise sans se perdre.
  • La taille, première source de doute : un cadre trop grand ou trop petit fait perdre contrôle et confort, et acheter sans essayer est intimidant.
  • Payer un achat important : un vélo coûte plusieurs millions de pesos, le financement et les moyens de paiement locaux (PSE, cartes, Addi) doivent donc être visibles.
  • Livrer dans tout le pays un vélo qui sort monté et réglé d'un atelier de Bogotá, avec un coût et un délai de livraison clairs.
  • Garder la boutique en vie : une boutique avec de vrais paiements ne peut pas casser lors d'un déploiement ni rester sans sauvegarde en cas de problème.
03

La solution

Une boutique WooCommerce avec un thème sur mesure, conçu et codé pour la marque. Ce qu'elle contient :

  • Une page d'accueil avec carrousel de campagnes, une barre d'annonces reprenant les engagements de la marque (livraison dans toute la Colombie en 2 à 5 jours ouvrés, garantie à vie sur le cadre, vélo livré monté et réglé, financement et paiements sécurisés) et une bande d'avantages sous le carrousel.
  • Un menu organisé selon l'achat : Vélos et Cadres, Pour Toi, Pour ton vélo, Pour la Route et Outlet, avec des sous-menus par catégorie (route, VTT, VAE, enfants, groupes, capteurs de puissance, freins, selles et plus).
  • Un explorateur de catégories en page d'accueil, des sélections en vedette et une section promotions avec pourcentage de remise et alertes de stock faible.
  • Un catalogue avec filtres par prix (avec la répartition des prix du catalogue), remise, marque et taille, tri configurable et affichage en grille ou en liste.
  • Une fiche produit avec galerie, variantes de taille et de couleur, prix et mensualité avec Addi, information de livraison et un bouton d'achat fixe qui suit le visiteur.
  • Un guide « Trouve ta taille » : trois étapes, sans inscription, qui recommande une taille à partir de la hauteur du cycliste, lié depuis le menu et depuis chaque fiche de vélo.
  • Des conseils par WhatsApp via un bouton flottant et dans chaque fiche, avec taille, disponibilité et livraison traitées par une personne.
  • Un compte client, une liste de souhaits et un panier, et une inscription avec remise de lancement.
  • Le consentement aux cookies et la fenêtre d'inscription développés comme plugins maison, avec les plugins Instagram et Facebook pour ces canaux.
04

Architecture et stack

La boutique est un WordPress avec WooCommerce et un thème sur mesure construit sur Sage 11 (modèles Blade avec Acorn, le conteneur de Laravel pour WordPress), avec Tailwind CSS v4 pour le style et Vite pour compiler les ressources. Concrètement : produits, commandes et stocks se gèrent dans l'administration WooCommerce que l'équipe connaît déjà, tandis que le design vit dans du code versionné et non dans un constructeur visuel.

Ce qui structure la conception technique :

  • Un environnement local sous Docker : une commande démarre WordPress, la base de données et WP-CLI, et le thème est monté depuis le poste du développeur, de sorte que les changements de modèles, de CSS et de JavaScript apparaissent aussitôt. Pour une installation depuis zéro, des scripts de données d'exemple couvrent le catalogue, le menu et l'accueil.
  • Les modèles de la boutique publiés comme vues Blade propres au projet (liste, fiche, panier, compte) au lieu des modèles génériques de WooCommerce.
  • Panier et paiement construits avec les shortcodes WooCommerce plutôt qu'avec des blocs : les blocs ignorent les modèles du thème.
  • Devise en pesos colombiens (COP), avec un point comme séparateur de milliers et sans décimales.
  • La version de PHP est fixée dans le projet (8.4.1) pour que les dépendances installées hors du serveur ne cassent pas sur un conteneur plus ancien ; les données dont les vues ont besoin passent par le with() des View Composers, car Acorn enveloppe les méthodes publiques et Blade les échapperait comme du texte.
  • Un serveur avec LiteSpeed Cache et les plugins WooCommerce, Facebook et Instagram, plus les deux plugins maison de consentement et d'inscription.
  • Une exploitation documentée : outils de déploiement par versions, retour arrière (rollback), sauvegardes et restauration, scripts de données de production qui simulent seulement (dry-run) par défaut, un document d'architecture avec l'inventaire des plugins et la dette connue, et des guides pour un incident de paiement, un retour arrière, une restauration et la rotation des identifiants.

Stack technique

  • WordPress
  • WooCommerce
  • PHP
  • Tailwind CSS
  • Vite
  • Docker
05

Processus et délais

Voici le processus de SkyCode sur tout projet de logiciel sur mesure, y compris une boutique en ligne comme celle-ci :

  • Un premier échange pour comprendre la boutique, le catalogue et la façon de vendre, avec un plan clair et un budget honnête.
  • Un contrat avec un calendrier convenu, un acompte de 50 %, et des accès et dépôts au nom du client.
  • De vrais avancements chaque semaine dans un environnement privé, pour parcourir la boutique comme le ferait un acheteur avant son ouverture au public.
  • Un lancement avec les 50 % restants seulement quand tout est testé et fonctionne, plus 90 jours de garantie de stabilité technique.

Sur ce projet, le thème, la boutique et l'exploitation ont été documentés pour que n'importe qui dans l'équipe puisse déployer, revenir en arrière ou restaurer sans dépendre de la personne qui l'a construit.

06

Les résultats

Le site publié montre ce qui a été livré : racingbike.com.co avec son catalogue par catégories, ses filtres, le guide des tailles, des fiches avec financement et les conseils WhatsApp visibles sur toutes les pages.

Captures de la plateforme06

Service appliqué dans ce cas

Pour aller plus loin

Nous travaillons depuis Bogotá, en Colombie. Développement logiciel à Bogotá (page en espagnol)

Sur ce projet, comme sur tous, nous appliquons

  • Bonnes pratiques OWASP
  • Conformité réglementaire des données
  • Documentation technique incluse
  • Code 100 % transférable

Cas suivant

Sentry CRM · Automatisation & Gestion des Leads

Sentry CRM · CRM Omnicanal & Assistant IA

Tableau de bord de Sentry CRM : tickets actifs, temps de réponse, résolution par IA, forfait en cours et canaux

Un projet similaire en tête ?