Products list

This Joomla 4 override allows you to display a list of products (name, description, price and pic) simply by using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 * @author 		web-eau.net
 * @copyright   (C) 2020 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\LayoutHelper;

if (!$list)
{
	return;
}

?>

<div class="row">
	
    <div class="col-lg-8 shadow mx-auto">
			
		<?php foreach ($list as $item) : ?>
			
		<div class="d-flex border-bottom">							

			<div class="flex-grow-0 p-3">
					
				<!-- article title -->						
				<?php if ($params->get('link_titles') == 1) : ?>
					<h5 class="mt-0 font-weight-bold mb-2">
						<?php $attributes = ['class' => 'mod-articles-category-title ' . $item->active]; ?>
						<?php $link = htmlspecialchars($item->link, ENT_COMPAT, 'UTF-8', false); ?>
						<?php $title = htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8', false); ?>
						<?php echo HTMLHelper::_('link', $link, $title, $attributes); ?>
					</h5>
				<?php else : ?>
					<h5 class="mt-0 font-weight-bold mb-2">
						<?php echo $item->title; ?>
					</h5>
				<?php endif; ?>
						
				<!-- article introtext -->
				<p class="font-italic text-muted mb-0 small"><?php echo $item->introtext; ?></p>
						
				<div class="d-flex align-items-center justify-content-between mt-1">
					<?php $item->urls = new JRegistry($item->urls); ?>
					<h6 class="font-weight-bold my-2"><?php echo $item->urls->get('urlatext'); ?></h6>
							
					<ul class="list-inline small pe-4">
						<li class="list-inline-item m-0"><i class="far fa-star text-success"></i></li>
						<li class="list-inline-item m-0"><i class="far fa-star text-success"></i></li>
						<li class="list-inline-item m-0"><i class="far fa-star text-success"></i></li>
						<li class="list-inline-item m-0"><i class="far fa-star text-success"></i></li>
						<li class="list-inline-item m-0"><i class="far fa-star text-success"></i></li>
					</ul>
				</div>
						
			</div>
					
			<div class="flex-shrink-1 p-4">
				<!-- intro image -->					
				<?php
					$article_images  = json_decode($item->images);
					$article_image   = '';
					$article_image_alt   = '';
						if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
						$article_image  = $article_images->image_intro;
						$article_image_alt  = $article_images->image_intro_alt;
				}?> 
				<a href="<?php echo $item->link; ?>">
					<img class="ml-lg-5 order-1 order-lg-2" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
				</a>
			</div>				
				
		</div>
		          
		<?php endforeach; ?>
			
	</div>

</div>