Case study: create a classifieds ads section only with Joomla for Jardico

There are many ways to approach and resolve a client's problem. And sometimes the simplest or most obvious solution isn't necessarily the best.

In this case study, I will explain to you what the client's problem was and you will discover the solution I implemented (and why I've decided for this one).

May this example inspire you!

1. The challenge

Recently, I've been contacted by a site owner who faced a difficult situation after the discontinuation of one of the main extension of his website.

Jardico.fr is a French amateur website about gardening, landscaping, flowers, trees, etc. The first version was launch on Joomla in 2006.

Among all the contents published on Jardico, the classified ads section is one of the most active, and important for the users.

This section was powered by Ads Manager but unfortunatley, this extension is discontinuated.

Preparing the J4 migration, and anticipating the next to J5, the webiste owner checked on the JED to find a substituion for Ads Manager but only found too complex or too large extensions for his website.

Furthermore, he was fearing to face the same issue if the selected extension stop being supported in future.

His requirements were the following:

• A basic/simple but robust classified ads solution
• Easy to migrate to J5 and beyond
• Frontend submission
• No payment system
• management and complete control over the classified ads submitted: edition, deletion, etc.

The client contacted some colleagues who all replied him to install an extension to replace Ads Manager. Seriously guys?

He also contacted me to see what solution I could propose him.

2. The solution

After few minutes chating on phone with him, it was obvious to me that everything could be done only with Joomla.

• classified ads categories = articles categories
• a classified ads = an article
• all the additional infos could be added and managed with custom fields
• ads form submission = article creation form

Very quickly, all the elements of this project fell into place in my head and I saw no gray area that could prevent me from achieving everything with Joomla.

Why I've decided this approach?

• the client clearly doesnt want another extension or an unadapted extension.
• because a webmaster isn't an "extension installer" but a "solution provider".
• because Joomla is natively very powerful and can handle this kind of project.
• "Light is right" - Colin Chapman

Now you have the full picture of the project, let's see in detail how I've managed to create the different parts.

2.1 The design results

Here is a "Before/After" with the client's wireframes and the pages I've created.
Because I didn't had specifications for the page, the designs are pretty basic but efficient.

2.1.1 - Frontend form submission

2.1.2 - Homepage of the classifieds ads section

2.1.3 - Design for an ads page

Guess what? Less than 30 lines of CSS were added...

2.2 The technical solutions

Now, it's time to go deeper in the project and see how I've implemented all the features required by the client to solve his problem.
For each part, I'll try to give you the essential points.

First, I've created a main article category and 4 sub-categories (one for each ads category). I've also created a category where the articles submitted on frontend will be stored before reviewing by the client.

Second, I've created the field group and all the necessaries custom fields, based on the wireframes.

2.2.1 The frontend form submission

Very basically, this page is build with the article form: /templates/TEMPLATE/html/com_content/form/edit.php

I've created an override of this file in the child template of the site.

And I've added in the code, all the custom fields where they should displayed on the page.

2.2.2 The homepage of the ads section

This page is build on an override of the blog category item: /templates/TEMPLATE/html/com_content/category/blog_item.php

Based on the wireframe, I've recreated a similar design using the Bootstrap Card component.

I've added in the code of the override, all the custom fields where they should displayed on the item.

For a better user experience, I've used the stretched-link class to expand the link on all over the item.

The design for the date comes from the Calendar List override.

In this example, except the title of the item, everything comes from custom fields and from overrides.

And the exact same design have been applied to the items of the 4 sub-categories pages.

2.2.3 The ads page

And finally, this page is an override of the article page: /templates/TEMPLATE/html/com_content/article/article.php

Like for the previous steps, I've added in the code all the custom fields as they should be displayed on the page.

Because the ads pages don't need the same custom fields (no need to display the date of an event on the ads for selling a wheelbarrow), the custom fields are setup accordingly and I've added a condition in the code to hide the unwanted custom fields.

And of course, if a custom field is not fill in the frontend form, the label and the empty custom field are not displayed on the page!

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

2.2.4 Additional features

The client also wanted the visitors can access to the list of the classifieds ads from the same user.

To handle this part, I've created a contact for the user and lightly override the contact page: /templates/TEMPLATE/html/com_contact/contact/default.php. And the page is displayed by an hidden contact menu item.

To be complete on this part, the registrated users allowed to create ads on the site are added in the author group, so they can edit only their own ads, if needed.

2.2.4 The roadblocks

Because life isn't a long quiet river, I've faced some roadblocks during this project.

My main issue was about the implementation of the custom fields in the frontend form.

Finally, it's (again) my friend Viviana Menzel who gave me the solution:

The other issue I've faced isn't really an issue but as it can happen to everyone, I prefer mention it here.

Don't forget to set the permission to allow the edition of the custom fields by the "public" group, otherwise, it will never work...

I've stupidly lost few hours to search why my custom fields didn't displayed in the form.
#facepalm

3. Key notes and key quotes

The most important impact of this approach is the satisfaction of my client. He couldn't stop to thank me after I showed him the new version of the classified ads section on his website. Despite few retakes, 95% of the job was perfectly understood, done, and delivered. Not that bad!

But I'm perfectly aware not all client's projects can be done "only with Joomla". Sometimes, you really need to install an extension (eCommerce, for example). But sometimes not, and especially when you start to think "out of the box".

Because our job is a bit more than "Joomla extension installer", I would like to mention some interesting points for those who are tempted to follow a similar approach for their next projects.

From the client point of view:

• he gots the exact solution he was waiting for, no more, no less.
• immediate usage, no painful learning curve with a new complex extension.
• no extension to maintain, no update panic, no friction, no stress.
• he'll keep on use his Joomla site serenely for many more years.

From the webmaster perspective:

• this kind of approach demonstrates your expertise in solving client problems with an adapted solution.
• not familiar with code? Learning something new for you is learning something useful for your clients.
• building your credibility by providing lightweights and easy-to-maintain websites to your clients.
• this kind of achievement could also inspire future projects to others clients, to colleagues.

I cannot close this article without thanking my client for placing his trust in me by entrusting me with the creation of this intellectually enriching project.

If you have a project in mind for your website, feel free to contact us and we'll manage an online meeting to see how we can make your dream comes true.