Etude de cas: créer une section petites annonces avec Joomla

Il existe de nombreuses manières d'aborder et de résoudre le problème d'un client. Et parfois, la solution la plus simple ou la plus évidente n'est pas nécessairement la meilleure.

Dans cette étude de cas, je vais vous expliquer quel était le problème du client et vous découvrirez la solution que j'ai mise en place (et pourquoi j'ai choisi celle-ci).

J'espère que cette étude de cas vous inspirera !

1. Le challenge

Récemment, j'ai été contacté par le propriétaire d'un site Joomla qui était confronté à une situation difficile suite à l'arrêt d'une des principales extensions de son site Web.

Jardico.fr est un site amateur français sur le jardinage, l'aménagement paysager, les fleurs, les arbres, etc. La première version a été lancée sur Joomla en 2006.

Parmi tous les contenus publiés sur Jardico, la section des petites annonces est l'une des plus actives et l'une des plus importantes pour ses visiteurs.

Cette partie du site était gérée par le composant Ads Manager mais malheureusement, cette extension n'a pas été suivie pour Joomla 4.

Préparant la migration de son site vers Joomla 4, et anticipant la prochaine vers Joomla 5, le propriétaire du site Web a d'abord cherché sur le JED pour trouver une solution de remplacement pour Ads Manager mais il n'a trouvé que des extensions trop complexes ou trop volumineuses pour son site Web.

De plus, il craignait de se retrouver confronté au même problème si l'extension sélectionnée n'était plus prise en charge à l'avenir.

Ses pré-requis étaient les suivants:

• Une solution de petites annonces basique/simple mais robuste
• Facile à migrer vers Joomla 5 et au delà
• Soumission des annonces en frontend
• Pas de système de paiement
• Gestion et contrôle complet des petites annonces déposées : édition, suppression, etc.

Il a contacté quelques collègues qui tous lui ont répondu d'installer une extension pour remplacer Ads Manager. Non mais sérieusement les gars ?

Il m'a également contacté pour voir quelle solution je pouvais lui proposer.

2. La solution

Après quelques minutes d'échange au téléphone avec lui, il était évident pour moi que tout pouvait se faire uniquement avec Joomla:

• Les catégories de petites annonces = catégories d'articles
• Une petite annonce = un article
• Toutes les informations supplémentaires peuvent être ajoutées et gérées avec des champs personnalisés
• Formulaire de soumission d'annonces = formulaire de création d'article

Très rapidement, tous les éléments de ce projet se sont mis en place dans ma tête et je ne voyais aucune zone d'ombre qui pouvait m'empêcher de tout réaliser avec Joomla.

Pourquoi ai-je proposé cette approche au client?

• Il ne voulait clairement pas d'une autre extension ou d'une extension non adoptée.
• Parce qu'un webmaster n'est pas un "installateur d'extensions" mais un "fournisseur de solutions".
• Parce que Joomla est nativement très puissant et peut largement gérer ce genre de projet.
• "Light is right" - Colin Chapman

Maintenant que vous avez une vision plus précise du projet, voyons en détail comment j'ai réussi à créer les différentes parties.

2.1 Les designs

Voici une série de "Avant/Après" avec les wireframes du client et les pages que j'ai réalisé.
Comme je n'avais pas de spécifications prècis pour les mises en pages, les designs sont assez basiques mais efficaces.

2.1.1 - Formulaire de soumission des annonces

2.1.2 - Page d'accueil des petites annonces

2.1.3 - Détail d'une petite annonce

Vous voulez le meilleur? Moins de 30 lignes de CSS ont été ajoutées...

2.2 Les solutions techniques

Il est temps maintenant d'entrer dnas les détails du projet pour voir comment j'ai implémenté toutes les fonctionnalités requises par le client afin de résoudre son problème.
Pour chaque partie, je vais vous donner les points essentiels.

Tout d'abord, j'ai créé une catégorie d'article principale et 4 sous-catégories (une pour chaque catégorie d'annonces). J'ai également créé une catégorie dans laquelle les articles soumis en le frontend seront stockés avant d'être révisés par le client.

Deuxièmement, j'ai créé un groupe de champs personnalisés et tous les champs personnalisés nécessaires, en me basant sur les wireframes.

2.2.1 Le formulaire de soumission d'annonces

Très simplement, cette page est construite avec le formulaire de création d'articles: /templates/TEMPLATE/html/com_content/form/edit.php

J'ai créé une override de ce fichier dans le template enfant du site.

Et j'ai ajouté dans le code, tous les champs personnalisés là où ils doivent s'afficher sur la page.

2.2.2 La page d'accueil des petites annonces

Cette page est créée avec une override du blog de catégorie d'articles: /templates/TEMPLATE/html/com_content/category/blog_item.php

0 parti des wireframes, J'ai recréé un design similaire en utilisant le composant card de Bootstrap.

J'ai ajouté dans le code de l'override, tous les champs personnalisés dont j'avais besoin pour chaque élément.

Pour une meilleur expérience utilisateur, j'ai utilisé la classe stretched-link pour étendre le lien sur tout l'élément.

Le design pour afficher la date provient de l'override Calendar List.

Dans cet example, sauf pour le titre de l'élément, tout est créé avec des champs personnalisés et des overrides.

Et le même design a été appliqué à tous les éléments sur les pages des 4 sous-catégories.

2.2.3 La page de la petite annoncee

Et enfin, cette page est une override de l'article: /templates/TEMPLATE/html/com_content/article/article.php

Comme pour les autres étapes, j'ai ajouté dans le code tous les champs personnalisés afin qu'ils s'affichent au bon endroit sur la page.

Parce que toutes les petites annonces n'ont pas besoin des mêmes champs personnalisés (inutile d'afficher la date d'un événement sur un annonce de vente de brouette), les champs personnalisés sont configurés en conséquence et j'ai ajouté une condition dans le code pour masquer le champs personnalisés non souhaités.

Et bien sur, si un champ personnalisé n'est pas rempli dans le formulaire de soumission, le label et le champs personnalisé ne seront pas affichés sur la page!

<?php if (!empty($customFields['name-of-the-field']->value)) : ?>
    <?php echo $customFields['name-of-the-field']->value; ?>        
<?php endif; ?>

2.2.4 Fonctions supplémentaires

Le client souhaitait également que les visiteurs puissent accéder à la liste de toutes lkes petites annonces d'un autre utilisateur.

Pour gérer cette partie, j'ai créé un contact pour l'utilisateu et j'ai légèrement overridé la page: /templates/TEMPLATE/html/com_contact/contact/default.php. Ensuite, la page est affiché via une lien de menu de type "Contact" (non affiché).

Pour être tout à fait complet, les utilisateurs enregistrés autorisés à poster des petites annonces sur le site sont automatiquement affectés au groupe auteur afin qu'ils puissent modifier leurs petites annonces si besoin.

2.2.4 Les obstacles

Parce que la vie n'est pas un long fleuve tranquille, j'ai rencontré quelques obstacles durant la réalisation de ce projet.

Mon principal problème a été l'implementation des champs personnalisés dans la page du formulaire de soumission des petites annonces.

Finalement, c'est (encore) mon amie Viviana Menzel qui m'a donné la solution:

Muchas gracias Viviana

L'autre problème auquel j'ai été confronté n'est pas vraiment un problème mais comme cela peut arriver à tout le monde, je préfère le mentionner ici.

N'oubliez pas de paramétrer les permissions pour autoriser l'édition des champs personnalisés par le groupe "public", sinon cela ne fonctionnera jamais...

J'ai bêtement perdu plusieurs heures à chercher pourquoi mes champs personnalisés ne s'affichaient pas dans le formulaire.
#facepalm

3. Réfléxions post-projet

L'impact le plus important de cette approche est la satisfaction de mon client. Il n'a pas arrêté de me remercier après que je lui ai montré la nouvelle version de la section petites annonces de son site Web. Malgré quelques reprises, 95 % du travail a été parfaitement compris, réalisé et livré. Pas mal!

J'ai parfaitement conscience que tous les projets clients ne peuvent pas être réalisés "uniquement avec Joomla". Parfois, il faut vraiment installer une extension (eCommerce par exemple). Mais parfois ce n'est vraiment pas nécessaire, surtout quand on cherche à sortir des sentiers battus.

Parce que mon métier est un peu plus qu'installateur d'extensions Joomla, j'aimerais mentionner quelques points intéressants pour ceux qui seraient tentés de suivre une approche similaire pour leurs prochains projets.

Du point de vue du client:

• Il a exactement la solution qu'il attendait, ni plus, ni moins.
• Utilisation immédiate, pas de courbe d’apprentissage pénible avec une nouvelle extension complexe.
• Pas d'extension à mettre à jour en panique, pas de friction, pas de stress.
• ...et il continuera à utiliser sereinement son site Joomla pendant encore de nombreuses années.

Du point de vue du webmaster:

• Ce genre d'approche démontre votre capacité à résoudre les problèmes des clients avec une solution adaptée.
• Pas familier avec le code? Apprendre quelque chose de nouveau pour vous, c'est apprendre quelque chose d'utile pour vos clients.
• Renforcez votre crédibilité en fournissant à vos clients des sites Web légers et faciles à maintenir.
• Ce genre de réalisation peut également inspirer de futurs projets à d'autres clients, à des collègues.

Je ne peux clôturer cet article sans remercier mon client de m'avoir accordé sa confiance en me confiant la réalisation de ce projet intellectuellement enrichissant.

Si vous avez un projet en tête pour votre site Web, n'hésitez pas à nous contacter et nous organiserons une réunion en ligne pour voir comment nous pouvons réaliser votre rêve.

<?php if (!empty($customFields['name-of-the-field']->value)) : ?>
    <?php echo $customFields['name-of-the-field']->value; ?>        
<?php endif; ?>