How To Link different Views Together in Joomla

Details

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

Written by Vimal Thapliyal

As you add views to your component, you'll frequently also want to link those views to each other, so that visitors can navigate around your component seamlessly. Let's add some of these links now to help out our views.

So if we go to the Malls view right now, you'll notice that we have a list of all the malls that are available, but they're not linked.

So let's fix that by adding links to these malls.

First, what we need to do is go to the model in our site component com_noidacity which have created in earlier tutorials and open up the malls.php file. We need to update this model because at the moment, we're not getting the mall ID and the mall name, so add the following code to do that.

<?php
defined( '_JEXEC' ) or die;
 
jimport('joomla.application.component.modellist');
 
class NoidaCityModelMalls extends JModelList
{
  public function getListQuery()
  {
    $query = parent::getListQuery();
 
    $query->select('mall_id, mall_name, mall_teaser');
    $query->from('#__noidacity_malls')
      ->where('published = 1');
 
    return $query;
  }
}

So we updating this function, we've added few columns to the query and that way we can get the mall_id as well as the mall_teaser. Now that we've updated the model, let's go back and update the view.

So let's go to the Malls view. Another thing that we want to do is we want to have the header directly in the layout file, and not assign it in view.html.php. So to do that, go to Malls and go to view.html.php and just remove the header assignment and also remove the header property.

Code for view.html.php currently looks like this:

<?php
defined( '_JEXEC' ) or die;
 
jimport('joomla.application.component.view');
 
class NoidaCityViewMalls extends JView
{
  protected $header;
  protected $items;
 
  public function display($tpl = null){
    $this->header = 'Noida City Malls';
    $this->items = $this->get('Items');
 
    parent::display($tpl);
  }
}

After removing the header property and header assignment the code will look like this

<?php
defined( '_JEXEC' ) or die;
 
jimport('joomla.application.component.view');
 
class NoidaCityViewMalls extends JView
{
  protected $items;
 
  public function display($tpl = null){
    $this->items = $this->get('Items');
 
    parent::display($tpl);
  }
}

Finally, let's update the layout. Go to the tmpl folder in your malls view, and open up default.php and replace the previous code with this code

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

So you'll notice now the header is being translated from the JText function and we're also cycling over all the items as we did before. But now, we're building links for every item and outputting that so that we can navigate to those malls.

So if we go to our frontend and hit Refresh, you'll notice now we're not only have links to the malls, we also have the short description for each mall, and if we click on the link, it goes to the mall.

Now, one thing you'll notice on the mall is that as you go to the bottom, there is no link back to the list of all the malls. So let's fix that as well.

Let's go back to the Mall view and in the tmpl folder there is the default layout.So open up the default.php file and add the following code at the bottom

  <div id="mall_footer">
    <?php $url = 'index.php?option=com_noidacity&view=malls'; ?>
    <a href="<?php echo JRoute::_($url); ?>"><?php echo JText::_('COM_NOIDACITY_MALLS_RETURN'); ?></a>
  </div>

So the end result of default.php for mall view will look like this

<?php defined( '_JEXEC' ) or die; ?>
<h1><?php echo $this->escape($this->item->mall_name); ?></h1>
<h2><?php echo "Place name near this mall: ". $this->escape($this->item->place_name); ?></h2>
 
<div id="mall">
  <div id="mall_left">
    <p id="mall_description">
      <?php echo $this->item->mall_description; ?>
    </p>
 
    <h2><?php echo JTEXT::_('COM_NOIDACITY_MALLS_DETAILS'); ?></h2>
 
    <dl>
 
      <dt><?php echo JTEXT::_('COM_NOIDACITY_MALL_NAME'); ?></dt>
      <dd><?php echo $this->escape($this->item->mall_name); ?></dd>
      <dt><?php echo JTEXT::_('COM_NOIDACITY_MALLS_LOCATION'); ?></dt>
      <dd><?php echo $this->escape($this->item->mall_location); ?></dd>
 
    </dl>
  </div>
  <div id="mall_footer">
    <?php $url = 'index.php?option=com_noidacity&view=malls'; ?>
    <a href="<?php echo JRoute::_($url); ?>"><?php echo JText::_('COM_NOIDACITY_MALLS_RETURN'); ?></a>
  </div>
</div>

So when we save that file and we hit Refresh and go to the bottom of the screen, we now have a link that goes right back to the Malls and it brings us right back here where we can go visit another mall. So now it's possible for us to navigate from a list of malls to a single mall and then navigate right back to the list. Adding these links are making this component come together, and it's going to make it easier for visitors to use it.

• < Prev
• Next >