Site e-commerce de meubles d’intérieur et d’extérieur

laptop-site-brin-d-ouest

Création du site de vente de meubles en ligne de Brin d’Ouest.
Ce site est basé sur WordPress (gestion de contenu) incluant la solution e-commerce Woocommerce.

Adaptation d’un template graphique responsive (html, css, php)
Adaptation de plugins : zoom image produit, gestion de classes de livraison,
Création de fonctionnalités : affichage des choix de couleurs, effets javascript (jQuery, css)… avec la solution e-commerce woocommerce.

Pour la création de ce site, il fallait définir les besoins de cette boutique : organiser, structurer les meubles par catégories (en fin de compte par matières : rotin, loom, résine, fer-forgé, bois).

Point contraignant : Classes / Tarifs de livraison, Affichage des coloris.

Demandes du client

Créer une boutique en ligne (catalogue) de vente de meuble avec la possibilité d’administrer lui même ses pages et leur contenu.

Demandes précises :

  • Pouvoir paramétrer les frais de port en fonction du panier (frais de port en fonction du montant total du panier)
  • Un slideshow sur la page d’accueil et un slideshow par catégories (les catégories correspondent aux pièces de la maison)
  • Pouvoir visionner les images du produit en zoom
  • Affichage des pages produits en 3 colonnes
  • Affichage un aperçu des choix de couleurs possibles des meubles
  • Insertion d’un moteur de recherche de produits avec aperçu
  • Création d’une page actualités et conseils que le client souhaite mettre en avant sur son site
  • Classification des produits à la fois par catégories (pièces de la maison) et matières (rotin, bois…)
  • Possibilité de mettre en avant certains produits sur la page d’accueil

Choix du thème WordPress avec le plugin Woocommerce

Utilisation de wordpress pour la gestion de contenu

Le client souhaitait pouvoir administrer lui même le contenu de son site, j’ai donc choisi le système de gestion de contenu WordPress.
J’ai opté pour le thème Responsive tout d’abord parce qu’il est adapté aux différents types de supports (ordinateur, tablettes, smartphone…).
D’autre part il est sobre, assez simple à configurer et il correspond à ce que demandait le client.

Choix de Woocommerce comme solution e-commerce

J’ai choisi la solution e-commerce Woocommerce qui s’intègre parfaitement à wordpress, peut facilement se paramétrer et possède les fonctionnalités nécessaires à la gestion d’une boutique en ligne (plus d’information sur la solution Woocommerce).

Adaptation du thème

Personnalisation de la page d’accueil existante en y incluant :

  • Les 3 dernières actualités
  • Les produits mis en avant
  • Les différentes matières
  • ..

Personnalisation des fiches produits :

  • Affichage en trois colonnes (images produit, choix de couleurs / tissus *, formulaire de commande )
  • Ajout d’un zoom au survol des images
  • ..

* Presque tout les produits possèdent un large choix de couleurs et tissus. Il a donc fallut créer une fonctionnalité afin de donner la possibilité de choisir visuellement (par vignettes sélectionnables) la teinte du rotin, loom ou bois ainsi le motif du tissu.

Mises à jour 2016 / 2017 :

Mise en place d’une structure en Silo Sémantique

Une demande m’a été faite concernant la création d’une structure en silo sémantique pour une partie du site e-commerce Brindouest.com, ceci afin d’améliorer son référencement naturel, à commencer par la partie Matière Rotin.

La difficulté consistait à mettre en place cette structure dynamique sur un site déjà installé et en cours de fonctionnement.

Le principe était de « cloisonner » (rendre le plus « étanche » possible) la partie meuble rotin, et ainsi obtenir de meilleurs résultats en terme de référencement.

Il a donc fallu, en fonction de la demande, adapter la structure du site tout en gardant une certaine cohérence (php, javascript, jquery et css) :

Les contraintes de ce développement pour cette partie du site étaient donc :

  • Afficher les menus de navigation principale sans leurs sous-menus (big-menus),
  • Afficher des menus latéraux dédiés rétractables (accordéon à gauche, dans la sidebar),
  • Permettre la hiérarchisation des mots-clés produits dans l’administration,
  • Permettre l’affichage de certaines actualité du blog (actualités sélectionnées correspondantes à ce thème), en dessous de ces menus (custom posts by tags),

Mise en place du HTTPS

Affichage https dans ChromeÉtant fortement recommandé par google depuis déjà quelques temps, et afin de garantir la confidentialité des données partagées sur le site, le passage du http vers le https a été effectuée.