“Modélisme”
E-commerce

Refonte complète d’un site e-commerce, en conservant le catalogue de produits, les clients, l’historique des commandes, ainsi que les fonctionnalités particulières déjà présentes.

Migration d’un site PHP natif vers un WordPress / WooCommerce afin de tout normaliser, faciliter la gestion & la mise à jour des contenus.

Analyse, documentation, requêtes SQL de conversion, optimisations massives

Période

03/2022 > ~02/2023
~11mois+

Poste

Dev web Fullstack
Chef de projet

Type de projet

Refonte de site
E-commerce

Lien

Projet abandonné 🐬

🎯 Missions

  1. 🏗️⚰️ Rupture anticipée du contrat & abandon du projet
  2. ⬆️ Migrer un site e-commerce en PHP natif vers WordPress / WooCommerce
  3. 👷 Gestion de projet, analyse du besoin, établir un cahier des charges techniques
  4. 📝 Analyse & documentation de l’existant, établir des correspondances vers WP
  5. 🐳🤖 DevOps > Création d’un environnement de dev local
  6. 💾 Back > Création, import, homogénéisation & factorisation, vérification & affichage de champs personnalisés (plus de 250, pour 26 catégories principales)
  7. 💾🔀 SQL > Export à partir de 30+ tables, normalisation, correspondances & import vers WP/WC d’un catalogue de 35k+ produits, 250+ catégories & sous catégories, des clients, des commandes via requêtes SQL complexes et conversion en CSV
  8. 🎨 Front
    1. Création de templates personnalisés, réutilisables via Divi
    2. Intégration des champs persos (250+ pour 26 catégories principales)
  9. 🎞️ Vidéos > Réalisation de plus de 8h de tutoriaux vidéos pour l’installation, la prise en main dev, la prise en main clients, la maintenance
  10. 💬 SEO > Analyse de la concurrence, refactorisation des contenus & catégories, nettoyage des images structurelles
Logo avec ma tête en silouhette, avec une queue de cheval, et Masamune écrit
  • Nature des travaux
  • Design & graphisme
  • Développement web
  • Gestion de projet
  • Hébergement web
  • Maintenance
  • Migration de code
  • Nettoyage de code

  • Technologies
  • MySQL
  • WordPress
  • + Thème Divi
  • + WooCommerce
  • PHP 8
  • JavaScript
  • Docker
  • HTML
  • CSS
  • Git

👨‍💻 Développement

✋ Avant-propos

⚰️ Rupture anticipée du contrat (à l’amiable) & passation/abandon du projet, suite à une très très très mauvaise estimation de ma part sur la quantité de travaux à effectuer.

👥 Données anonymisées

  • Les données originales étant la propriété de la société pour lequel était prévu le site (sans parler des clients, RGPD blah²), ces dernières ont été anonymisées ou masquées.
  • Le peu qui pourrait apparaître est du domaine publique (accessible depuis leur site en ligne)
  • La couleur principale à été remplacée pour les captures d’écran par le classique “royalblue”, plus foncé de ~20%
  • Les images ont été remplacées par des images libres de droits, pour les autres il s’agit

💾🔀 Export site actuel vers Imports WordPress / Woocommerce, 4 mois

  1. Aministration WordPress
    1. Création de champs personnalisés (plugin Advanced Custom Fields) afin de ne rien perdre qui ne rentrait pas dans les cases WP/WC
    2. 250+ champs, dont répéteurs
  2. Exports des bases actuelles en CSV, afin de correspondre aux plugins
    1. Création de requêtes SQL avancées (plus de 800 lignes lel)
    2. Ajustement des champs afin de correspondre à la nouvelle structure
    3. Respect des catégories et de leur hiérarchie (sous catégories) (~750)
    4. Gestion des champs personnalisés, privés/publiques, et anciens champs (legacy)
    5. Refactorisation, homogénéisation, améliorations de l’ergonomie
  3. Produits, plus de 35k
    1. Optimisation du flux de production : Possibilité de ré-imports, sélectifs ou mise à jour de l’existant
    2. Avec 35k+ produits & certains imports de plus de 10h c’était indispensable ^^’
  4. Import des comptes clients, & conservation de l’historique (partiellement) des commandes & produits associés
    1. Champs personnalisés
    2. Conditionnels
    3. Conservation des anciens champs (legacy)
    4. Types de comptes différents

👷 Gestion de projet

Analyse besoins clients, rédaction de cahier des charges techniques, spécifications techniques, évolutions & développements particuliers.

📝 Documentation, 2 mois

  1. Création d’une documentation technique
  2. Analyse de l’existant (30+ tables)
    1. Référencement & normalisation des champs
    2. Conversion de la structure vers WordPress / Woocommerce (pour l’export)
  3. Crafts n’ tests
    1. Recherche & developpement, plugins
    2. Etapes par étapes
    3. Création de tutoriaux vidéos ~8h de vidéos
      1. Installation du projet
      2. Prise en main côté dev
      3. Prise en main côté client (admin wordpress)

👨‍💻 DevOps

Création d’un environnement de dev local via 🐳 Docker, mais KO assez vite à cause de la quantité de données injectées.

♻️💬 Contenus & référencement naturel, 2-3 mois

  1. Administration WordPress
    1. Création de templates avancés (Thème Divi + Thème enfant)
  2. Référencement naturel
    1. Balises abbréviations automatiques
    2. Images structurelles
      1. Optimisations: tailles, poids, formats/ratios, balises title & alt
      2. ✌️ A la mano : actualisation et normalisation
      3. récupération, détourage, recadrage, mise aux ratios, optimisations
      4. logos des marques ~400+
      5. images représentatives des catégories & sous catégories, ~750
    3. Mise au propre des des marques ~400+, mises à jour :
      1. dédoublonnage
      2. des noms (en cas de changements, rachats)
      3. des images (logos)
      4. des urls de site
      5. refactorisation des marques parents/enfants en cas de sous marques
  3. Rédaction de contenus optimisés référencement naturel
    1. Re-factorisation des contenus (catégories), ainsi que des menus, suite à une analyse poussée de la concurrence (2 sites)
    2. Mise en valeur & création de page dédiées pour
      1. Les catégories phares du sites (guides)
      2. Les services
      3. Des thématiques pertinentes (exemple: Aérographe)
      4. Les actualités de la société
    3. Rédaction d’actualités pertinentes dans le milieu du modélisme
    4. Rédaction de page promotionnelles
    5. Pages secondaires usuelles (contact, législation, CGV, etc.)

✨ Champs persos

Capture d'écran du site "Modélisme". Page "un produit" contenant l'ensemble des catégories, et donc des champs personnalisés (plus de 200)
Capture d'écran de l'administration du site "Modélisme". Page "un produit" contenant l'ensemble des catégories, et donc des champs personnalisés (plus de 200)

🚨 Grandes images
👥 Données anonymisées
🏗️ Projet non terminé !
Les visuels ne représentent pas le niveau de qualité d’un projet final

Capture d'écran du site "Modélisme". Menu: Produits, société, aide, se connecter, panier, recherche. (Très fort contenu vertical). Carrousel actualités, promotions, principales catégories, services proposés, nouvelles sorties, inspiration, autour du hobby, marques recommandées
Capture d'écran du site "Modélisme". Affichage d'un produit sur le site, avec sa description & ses caractéristiques
Capture d'écran du site "Modélisme". Page dédiée à l'aérographe. Rubriques: L'essentiel (aérographe, compressuer, packs), autour de l'aerographe, Marques, Besoin d'aide
Capture d'écran du site "Modélisme". 3 actualités: Figostock, Drop and Paint, Autres actualités
Capture d'écran du site "Modélisme". Trouver des idées, garder la motivation, autres suggestions
Capture d'écran du site "Modélisme". Services proposés: réparations, maintenance, ajustements, conseils, bons de commande, formations & ateliers. Et autres descriptions pour le référencement naturel et opt-in
Capture d'écran du site "Modélisme". Le service "Réparations". Détails & FAQ
Capture d'écran du site "Modélisme". Evénement "Maquettes en folies", Textes: Voir la catégorie, du 21 au 27 février, réductions, exemples de réductions
Capture d'écran du site "Modélisme". Page de contact un peu fancy avec illustrations de maquettes, numéro de téléphone, formulaire de contact, carte intéractive, horaires, suggestions d'accès
Capture d'écran du site "Modélisme". Page avec l'ensemble des balises utilisées pour la rédactions afin de s'assurer que le style se comporte correctement, et de l'harmonie en général
Capture d'écran du site "Modélisme", page avec une majorité des plugins fournis par le thème Divi. Afin de s'assurer qu'ils fonctionnent, de leur comportement en responsive, et pour inspirer le client