How To Override Custom Component Views

Details

Category: How Frontend Model View Controller(MVC) works in Joomla

Written by admin

One of Joomla's strongest features is the ability to override practically all the HTML output at the template level without modifying the original code. Views and custom components are no exception. Let's test a view override. This will be override for our Malls view and it's going to remove the descriptions in the links that are currently on there and just replace them with links and paragraph tags.

If we go to index.php?option=com_noidacity&view=malls, you'll notice we have this list that has all the links to all the malls and next to all those links is the description for each mall. This view override that we're about to apply is going to simplify that down just to the links.

So to apply this override, we want to go to the Templates folder, and currently, we're using the beez_20 template and there is an HTML folder here that is ready to go for overrides. So to apply this override, first we need to create a folder for the component.

So New Folder, it's going to be called com_noidacity, and inside this folder, we want to add a folder for the view that we're trying to override. In this case we're overriding the Malls view. So just create a folder called malls. You don't have to add the tmpl folder that you normally see in the views, because Joomla already knows that this is the override folder and it will make sense of it. So create a file called default.php right into that folder, and add the following code.

1. <?php defined( '_JEXEC' ) or die; ?>
2. <h1><?php echo JTEXT::_('COM_NOIDACITY_MALLS'); ?></h1>
3.  
4. <?php foreach($this->items as $item): ?>
5. <p>
6. <?php $url = 'index.php?option=com_noidacity&view=mall&id='.$item->mall_id; ?>
7. <a href="<?php echo JRoute::_($url); ?>"><?php echo $this->escape($item->mall_name) ?></a>
8. </p>
9. <?php endforeach; ?>

When we go hit Refresh here on the front-end, it's simplified everything down to just the links in paragraph tags.

Now, if we want to remove this override, all we have to do is remove the folder. Now, when we hit Refresh, the original view is back.

Template overrides are very powerful feature allowing designers to use their own HTML markup in place of what a programmer might provide. You can do override one view at a time, no need to override everything if you just want to change one file, and removing an override is as simple as removing the file.

• Next >