This Joomla 4 override allows you to display your ecommerce products 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) 2010 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\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;
if (!$list)
{
return;
}
?>
<div class="pricing4 py-5">
<div class="container">
<div class="row mx-5 category-module<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<div class="col-md-4">
<div class="card card-shadow border-0 my-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="card-img-top" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
<div class="p-3">
<!-- article title -->
<h4 class="fw-medium mb-0">
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h4>
<!-- article author -->
<h5 class="subtitle text-uppercase">with <?php echo $item->displayAuthorName; ?></h5>
<!-- intro text -->
<p class="mod-articles-category-introtext font-14 mt-3">
<?php echo $item->displayIntrotext; ?>
</p>
<div class="d-flex mt-3 justify-content-around">
<?php $item->urls = new JRegistry($item->urls); ?>
<!-- text url A -->
<h2 class="price"><?php echo $item->urls->get('urlatext'); ?><small>/m</small></h2>
<!-- text url B -->
<div class="ml-auto"><a class="btn btn-danger-gradiant rounded-pill text-white btn-md border-0" href="<?php echo $item->urls->get('urlbtext'); ?>">Choose Plan</a></div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>CSS
.pricing4 h1,
.pricing4 h2,
.pricing4 h3,
.pricing4 h4,
.pricing4 h5,
.pricing4 h6 {
color: #3e4555;
}
.pricing4 .font-weight-medium {
font-weight: 500;
}
.pricing4 .bg-light {
background-color: #f4f8fa !important;
}
.pricing4 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.pricing4 .font-14 {
font-size: 14px;
}
.pricing4 .card.card-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.pricing4 .text-success {
color: #2cdd9b !important;
}
.pricing4 .price small {
color: #8d97ad;
font-size: 16px;
}
.pricing4 h5 {
line-height: 22px;
font-size: 18px;
}
.pricing4 .btn-danger-gradiant {
background: #ff4d7e;
background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%);
background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
}
.pricing4 .btn-danger-gradiant:hover {
background: #ff6a5b;
background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e 100%);
background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e));
background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%);
}
.pricing4 .btn-md {
padding: 10px 25px;
font-size: 16px;
}