Previous Next

Apprendre à créer des overrides dans Joomla - Part 1

Vous souhaitez en savoir plus sur les overrides dans Joomla et vous aimeriez vous lancer mais vous ne savez pas par ou commencer ? Cette série de tutoriels vous expliquera en détail et en douceur tout ce qu'il faut savoir pour créer vos propres overrides de A à Z.

Parce que rien ne vaut un bon tutoriel pour comprendre et pour apprendre, je vous propose de suivre cette série d'articles qui va vous permettre de découvrir le code HTML et la création d'overrides dans Joomla. Afin de vous expliquer en détail tout le processus de conception puis de réalisation, nous allons concevoir de A à Z une page e-commerce comprenant les trois parties suivantes :

  • la présentation d'un produit avec son titre, son texte de description, un bouton de mise en panier, son prix et un diaporama pour afficher différentes images du produit,
  • un tableau de comparaison de différents produits,
  • et une mise en avant de trois produits complémentaires.

Dans ce premier article, nous allons voir en détail comment concevoir et réaliser ces trois parties en code HTML. Celles-ci seront statiques, c'est à dire que les contenus ne changeront pas tant que vous ne modifierez pas le code.

Dans le deuxième article, nous verrons comment préparer notre contenu, comment l'organiser afin de rendre ces parties dynamiques, c'est à dire que les contenus changeront automatiquement dès que vous mettrez à jour un article ou un module dans Joomla.

Et enfin dans le troisième et dernier article, je vous montrerai comment réaliser toutes les overrides nécessaires pour obtenir la page produit suivante :

Réalisation d'une page produit avec les overrides dans Joomla

Réalisation d'une page produit grâce aux overrides dans Joomla

La fiche produit

Avant de commencer, voici à quoi va ressembler notre fiche produit :

BlackBerry KEY2 64 Go

Nullam semper nunc ut magna euismod, mollis congue arcu hendrerit. Phasellus vehicula libero augue, ac suscipit ante scelerisque sed. Quisque eleifend ornare ligula, quis tristique diam facilisis vel. Cras scelerisque tristique nunc quis hendrerit. Ut eleifend felis a nunc aliquet tempus. Praesent id magna nec massa auctor iaculis mattis lobortis tellus.

  • Cras tristique dui
  • Aenean dapibus ligula ut
  • Etiam sed semper tellus
  • Proin mollis placerat ligula

399 €

+ 10 € frais de port

Basiquement, notre fiche produit est composée de deux parties distinctes :

  • A gauche : le diaporama avec les visuels du produit,
  • A droite : la description et le bouton de mise en panier.

Si l'on traduit maintenant cela en langage HTML avec des classes Bootstrap, notre fiche produit va se présenter grosso modo comme ceci :

<section>
	<div class="row">
		<div class="col-lg-6">
			Ici sera affiché le diaporama
		</div>
		<div class="col-lg-6">
			Ici sera affichée la description
		</div>	
	</div>
</section>

Le diaporama

Pour afficher un diaporama, il n'y a rien de plus simple puisque c'est un composant natif de Bootstrap 4. On copie/colle le code du diaporama souhaité dans la première partie de notre code, ce qui nous donne ceci :

<div id="carousel-thumb" class="carousel slide carousel-thumbnails" data-ride="carousel">								
	<div class="carousel-inner text-center text-md-left" role="listbox">
		<div class="carousel-item active">
			<img src="url/vers/mon/image.jpg" alt="" class="img-fluid">
		</div>
		<div class="carousel-item">
			<img src="url/vers/mon/image.jpg" alt="" class="img-fluid">
		</div>
		<div class="carousel-item">
			<img src="url/vers/mon/image.jpg" alt="" class="img-fluid">
		</div>
	</div>
	
	<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>								
</div>

Naturellement, vous pouvez ajouter d'autres images à votre diaporama en prenant bien soin de copier/coller les lignes correspondantes. Si vos images ne s'affichent pas, vérifiez que l'adresse de celles-ci est la bonne.

Si vous souhaitez pouvoir régler la vitesse de défilement du diaporama, voici un petit extrait de code JavaScript à rajouter avant le diaporama:

<script>$('.carousel').carousel({
		interval: 6500
	})
</script>

Il vous suffit simplement de modifier le contenu de la variable pour changer la vitesse de défilement.

La description

Sans vous en rendre compte et en quelques minutes, vous venez déjà de réaliser la moitié de votre fiche produit ! Mais on ne s'arrete pas en si bon chemin.

Passons maintenant à la seconde partie contenant la description du produit.
Si on regarde plus en détail de haut en bas, nous avons un texte, une liste, un bouton et le prix. Rien de vraiment très compliqué ici, il suffit d'être méthodique et d'ajouter nos différents éléments les uns après les autres. Pour vous aider à comprendre comment est construite cette partie, j'ai pris soin de détailler chaque sous-partie.

La description du produit

<p class="text-muted font-weight-light ml-3 mb-5">Proin a risus sodales, hendrerit odio non, condimentum augue. Vivamus id libero ante. In sem diam, semper vel sodales et, placerat a turpis. Suspendisse tristique diam mattis, venenatis metus ut cursus.</p>

La liste

<ul class="fa-ul mb-5 text-muted font-weight-light">
	<li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Morbi at iaculis nisl</li>
	<li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Donec ac lectus ut mist</li>
	<li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Vivamus luctus odio vitae</li>
	<li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Duis porttitor enim eu mollis</li>
</ul>

Le prix et le bouton

<div class="d-flex justify-content-between ml-3">
		<button type="button" class="btn btn-primary mx-0">Purchase</button>
		<div class="text-center">
			<h4 class="mb-0">$399</h4>
			<small class="grey-text">+ $10 shipping fees</small>
		</div>
	</div>

Et voilà, il ne reste plus qu'à ajouter ces trois sous-parties dans notre code de départ et nous aurons terminé notre fiche produit. Cela nous donne le code suivant :

<section class="mb-5">
	
	<!-- Titre de section -->
	<h3 class="text-center font-weight-bold mb-5">Fiche produit</h3>
	
	<div class="row">		
		<div class="col-md-12">			
			<div class="card">			
				<div class="card-body">				
					<div class="row h-100 d-flex align-items-center">						
						<div class="col-lg-6">
							
							<!-- Diaporama -->
							<div id="carousel-thumb" class="carousel slide carousel-thumbnails" data-ride="carousel">								
								<div class="carousel-inner text-center text-md-left" role="listbox">
									<div class="carousel-item active">
										<img src="url/to/my/image.jpg" alt="" class="img-fluid">
									</div>
									<div class="carousel-item">
										<img src="url/to/my/image.jpg" alt="" class="img-fluid">
									</div>
									<div class="carousel-item">
										<img src="url/to/my/image.jpg" alt="" class="img-fluid">
									</div>
								</div>
								
								<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
									<span class="sr-only">Previous</span>
								</a>
								<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
									<span class="carousel-control-next-icon" aria-hidden="true"></span>
									<span class="sr-only">Next</span>
								</a>								
							</div>
							<!-- Diaporama -->
							
						</div>							
						<div class="col-lg-6">
							
							<!-- Description -->
							<p class="text-muted font-weight-light ml-3 mb-5">Proin a risus sodales, hendrerit odio non, condimentum augue. Vivamus id libero ante. In sem diam, semper vel sodales et, placerat a turpis. Suspendisse tristique diam mattis, venenatis metus ut cursus
							</p>
							
							<!-- Liste des caractéristiques du produit -->
							<ul class="fa-ul mb-5 text-muted font-weight-light">
								<li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Morbi at iaculis nis</li>
								<li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Donec ac lectus ut mist</li>
								<li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Vivamus luctus odio vitae</li>
								<li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Duis porttitor enim eu mollis</li>
							</ul>
							
							<!-- Bouton et prix du produit -->
							<div class="d-flex justify-content-between ml-3">
								<button type="button" class="btn btn-primary mx-0">Acheter</button>
								<div class="text-center">
									<h4 class="mb-0">399 €</h4>
									<small class="grey-text">+ 10 € frais de port</small>
								</div>
							</div>
							
						</div>
						
					</div>
				</div>
			</div>
		</div>
		
	</div>
</section>

Première étape terminée !
Passons maintenant au tableau comparatif de produits

Le tableau comparatif

Pour vous mettre l'eau à la bouche, voici à quoi va ressembler notre tableau comparatif :

Face à ses concurrents

Modèle Capacité Poids Largeur Profondeur Camera Video
BlackBerry KEY2 64 Go 64 Go 477 grammes 220.6 mm 6.9 mm 12 megapixel 4K HD
Samsung Gadget G2 24 Go 769 grammes 124,1 mm 8.1 mm 4 megapixel 2K
Apple iPhone 4,95 24 Go 698 grammes 134,8 mm 8.1 mm 6 megapixel 1080p

Sans surprises, notre tableau est réalisé... avec un tableau HTML !

Pour afficher un tableau, il n'y a rien de plus simple puisque c'est un élément de base de Bootstrap 4. On copie/colle le code du tableau souhaité, ce qui nous donne ceci :

<table class="table table-responsive-md mb-0">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">Heading</th>
				<th scope="col">Heading</th>
				<th scope="col">Heading</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">1</th>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<th scope="row">2</th>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<th scope="row">3</th>
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</tbody>
	</table>

Pour varier les plaisirs, nous allons basculer le tableau en présentant les informations en ligne et non en colonnes. On ajoute les lignes et les contenus et le tour est joué !

<div class="card">
	<div class="card-body">
		<table class="table table-responsive-md mb-0">		
			<thead>
				<tr>						
					<th><strong>Modèle</strong>
					</th>
					<th>
						<strong>Capacité</strong>
					</th>
					<th>
						<strong>Poids</strong>
					</th>
					<th>
						<strong>Largeur</strong>
					</th>
					<th>
						<strong>Profondeur</strong>
					</th>
					<th>
						<strong>Camera</strong>
					</th>
					<th>
						<strong>Video</strong>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row"><strong>BlackBerry KEY2 64 Go</strong></th>
					<td>64 Go</td>
					<td>477 grammes</td>
					<td>220.6 mm</td>
					<td>6.9 mm</td>
					<td>12 megapixel</td>
					<td>4K HD</td>							
				</tr>
				<tr>
					<th scope="row"><strong>Samsung Gadget G2</strong></th>
					<td>24 Go</td>
					<td>769 grammes</td>
					<td>124,1 mm</td>
					<td>8.1 mm</td>
					<td>4 megapixel</td>
					<td>2K</td>							
				</tr>
				<tr>
					<th scope="row"><strong>Apple iPhone 4,95</strong></th>
					<td>24 Go</td>
					<td>698 grammes</td>
					<td>134,8 mm</td>
					<td>8.1 mm</td>
					<td>6 megapixel</td>
					<td>1080p</td>							
				</tr>
			</tbody>
		</table>
	</div>
</div>

Difficile de faire plus simple et plus rapide. L'intérêt ici est de voir et de comprendre comment est construit un tableau HTML. Cela nous permettra de mieux appréhender la phase de réalisation de l'override correspondante.

Deuxième étape terminée, passons maintenant à la dernière avec la présentation des produits complémentaires.

Les produits complémentaires

Sans plus attendre, voilà à quoi va ressembler la dernière partie de notre page e-commerce :

Produits complémentaires

Schématiquement, nous avons trois produits avec pour chacun : une image, un titre et un prix. Vous aurez noté que certains produits peuvent également afficher un badge.

La structure

Pour réaliser cette partie, nous allons utiliser Cartes qui est un composant natif de Bootstrap 4.

Voici à quoi va ressembler la structure HTML de cette partie :

<section>
    <div class="row">

		<div class="col-lg-4 col-md-6 mb-4">
			<div class="card align-items-center">			
				<!-- Première carte -->
			</div>
		</div>
		
		<div class="col-lg-4 col-md-6 mb-4">
			<div class="card align-items-center">			
				<!-- Deuxième carte -->
			</div>
		</div>
		
		<div class="col-lg-4 col-md-6 mb-4">
			<div class="card align-items-center">			
				<!-- Troisième carte -->
			</div>
		</div>

	</div>
</section>

Ainsi sur desktop, nous aurons les trois cartes côte-à-côte. Sur tablette, nous en aurons 2 et elles seront affichées les unes après les autres sur mobile.

Regardons maintenant comment construire une carte.

Les cartes

La première partie affiche l'image du produit. Pour un rendu optimal et plus élégant, pensez à utiliser des images de qualité et si possible, ayant toutes les mêmes dimensions. Nous ajoutons également une classe CSS spécifique pour obtenir un léger effet visuel sur l'image au survol de la souris. Voici le code de cette partie :

<div class="view overlay">
	<img src="url/vers/mon/image.jpg" class="card-img-top" alt="">
	<a>
		<div class="mask rgba-white-slight"></div>
	</a>
</div>

La seconde partie affichera le reste des informations, à savoir et dans l'ordre : l'intitulé du produit, éventuellement le badge et enfin, le prix. Ce qui nous donne le code HTML suivant :

<div class="card-body text-center">
	
	<h5 class="mb-3">
		<strong>
			<!-- Titre -->
			<a href="" class="dark-grey-text">Produit
				<!-- Badge -->
				<span class="badge badge-pill danger-color">Badge</span>
			</a>
		</strong>
	</h5>
	<h5 class="font-weight-bold blue-text mb-0">
		<!-- Prix -->
		<strong>000 €</strong>
	</h5>
</div>

J'ai commenté ce code de manière à ce que vous puissiez retrouver plus facilement les différentes parties.

Maintenant que nous avons notre image et nos informations, il ne reste plus qu'à regrouper le tout et à construire l'intégralité du code de cette partie :

<section class="dark-grey-text text-center">
    <div class="row">
		
		<div class="col-lg-4 col-md-6 mb-4 d-flex align-items-stretch">
			<!-- Carte -->
			<div class="card align-items-center">
			
				<!-- Image du produit -->
				<div class="view overlay">
					<img src="url/vers/mon/image.jpg" class="card-img-top" alt="" />
					<a>
						<div class="mask rgba-white-slight"></div>
					</a>
				</div>

				<!-- Contenu -->
				<div class="card-body text-center">
					
					<h5 class="mb-3">
						<strong>
							<!-- Titre -->
							<a href="" class="dark-grey-text">Produit
								<!-- Badge -->
								<span class="badge badge-pill danger-color">Badge</span>
							</a>
						</strong>
					</h5>
					<h5 class="font-weight-bold blue-text mb-0">
						<!-- Prix -->
						<strong>000 €</strong>
					</h5>
				</div>
			</div>
		</div>

		<div class="col-lg-4 col-md-6 mb-4 d-flex align-items-stretch">
			<div class="card align-items-center">
				<div class="view overlay">
					<img src="url/vers/mon/image.jpg" class="card-img-top" alt="" />
					<a>
						<div class="mask rgba-white-slight"></div>
					</a>
				</div>
				<div class="card-body text-center">
					<a href="" class="grey-text">
						<h6>catégorie</h6>
					</a>
					<h5 class="mb-3">
						<strong>
							<a href="" class="dark-grey-text">Produit</a>
						</strong>
					</h5>
					<h5 class="font-weight-bold blue-text mb-0">
						<strong>000 €</strong>
					</h5>
				</div>
			</div>
		</div>

		<div class="col-lg-4 col-md-6 mb-4 d-flex align-items-stretch">
			<div class="card align-items-center">
				<div class="view overlay">
					<img src="url/vers/mon/image.jpg" class="card-img-top" alt="" />
					<a>
						<div class="mask rgba-white-slight"></div>
					</a>
				</div>
				<div class="card-body text-center">
					<a href="" class="grey-text">
						<h6>catégorie</h6>
					</a>
					<h5 class="mb-3">
						<strong>
							<a href="" class="dark-grey-text">Produit</a>
						</strong>
					</h5>
					<h5 class="font-weight-bold blue-text mb-0">
						<strong>000 €</strong>
					</h5>
				</div>
			</div>
		</div>

	</div>
</section>

Conclusion

Et voilà, vous venez de terminer la première partie de ce tutoriel. Avouez que c'était moins compliqué que ce que vous imaginiez !
Prenez le temps de relire les différentes parties, de tester, de modifier et pourquoi pas, d'améliorer ces codes afin qu'ils soient parfaitement adaptés au design de votre site.

On se retrouve dans quelques jours pour transformer ces trois parties en éléments dynamiques grâce à Joomla et aux overrides.

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.