Combining Carousel and Latest Module

In this tutorial we will develope a new module by learn and “combining” existing modules. After this tutorial you will have Latest Carousel module that we learn how it works from default Latest and Carousel module. It sounds interesting, right? Yups, don’t waste your time to only imagine it guys. Now we will try to make it happen. Let’s follow this tutorial below.

Before we step our foot to the long journey, first I will tell you the files we will add to our OpenCart:

Admin Section

1. /admin/controller/module/carousel_latest.php (make a duplicate of /admin/controller/module/carousel.php as a starter)
2. /admin/language/english/module/carousel_latest.php (make a duplicate of /admin/language/english/module/carousel.php as a starter)
3. /admin/view/template/module/carousel_latest.tpl (make a duplicate of /admin/view/template/module/carousel.tpl as a starter)

Catalog section

1. /catalog/controller/module/carousel_latest.php (make a duplicate of /catalog/controller/module/carousel_latest.php as a starter)
2. /catalog/view/theme/default/template/module/carousel_latest.tpl (make a duplicate of /catalog/view/theme/default/template/module/carousel.tpl as a starter)

Okay, let’s make some dirty to our hands!

1. /admin/controller/module/carousel_latest.php

When you look onto inside of whatever your module preferences (e.g. your admin panel), you might be wondering, what are they ? Could I add some item ? How I could customized them? (i.e. Layout, Position, Sort Order, etc).

And now, take a look into your Carousel module preferences! And compare it to the picture below.

It means there are:

1. Limit: Limit how many products that will be showned.
2. Scroll: How many products will be scrolled when next or previous button is clicked.
3. Image (W x H): Dimension we applied to image product.
4. Layout.
5. Position.
6. Status.
7. Sort Order.

Wait, what is Limit Product? I don’t see it at Carousel Module preferences.

Okay, i think it’s better if we add a variable in order to limiting how many products we will retrieve from the Model. It will give a good impact at our sites performance.

And here, we only need to add $this->data['entry_limit_product'] = $this->language->get(‘entry_limit_product’); to /admin/controller/module/carousel_latest.php and some modification there.

 
<?php
class ControllerModuleCarouselLatest extends Controller {
	private $error = array(); 
	public function index() {   
		$this->load->language('module/carousel_latest');
		$this->document->setTitle($this->language->get('heading_title'));
		$this->load->model('setting/setting');
		if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) {
			$this->model_setting_setting->editSetting('carousel_latest', $this->request->post);		
			$this->cache->delete('product');
			$this->session->data['success'] = $this->language->get('text_success');
			$this->redirect($this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'));
		}
		$this->data['heading_title'] = $this->language->get('heading_title');
		$this->data['text_enabled'] = $this->language->get('text_enabled');
		$this->data['text_disabled'] = $this->language->get('text_disabled');
		$this->data['text_content_top'] = $this->language->get('text_content_top');
		$this->data['text_content_bottom'] = $this->language->get('text_content_bottom');		
		$this->data['text_column_left'] = $this->language->get('text_column_left');
		$this->data['text_column_right'] = $this->language->get('text_column_right');
		$this->data['entry_limit_product'] = $this->language->get('entry_limit_product');
		$this->data['entry_limit'] = $this->language->get('entry_limit');
		$this->data['entry_scroll'] = $this->language->get('entry_scroll');
		$this->data['entry_image'] = $this->language->get('entry_image');
		$this->data['entry_layout'] = $this->language->get('entry_layout');
		$this->data['entry_position'] = $this->language->get('entry_position');
		$this->data['entry_status'] = $this->language->get('entry_status');
		$this->data['entry_sort_order'] = $this->language->get('entry_sort_order');
		$this->data['button_save'] = $this->language->get('button_save');
		$this->data['button_cancel'] = $this->language->get('button_cancel');
		$this->data['button_add_module'] = $this->language->get('button_add_module');
		$this->data['button_remove'] = $this->language->get('button_remove');
 		if (isset($this->error['warning'])) {
			$this->data['error_warning'] = $this->error['warning'];
		} else {
			$this->data['error_warning'] = '';
		}
		if (isset($this->error['image'])) {
			$this->data['error_image'] = $this->error['image'];
		} else {
			$this->data['error_image'] = array();
		}
		$this->data['breadcrumbs'] = array();
 		$this->data['breadcrumbs'][] = array(
   			'text'      => $this->language->get('text_home'),
			'href'      => $this->url->link('common/home', 'token=' . $this->session->data['token'], 'SSL'),
	  		'separator' => false
 		);
 		$this->data['breadcrumbs'][] = array(
   			'text'      => $this->language->get('text_module'),
			'href'      => $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'),
  			'separator' => ' :: '
 		);
 		$this->data['breadcrumbs'][] = array(
   			'text'      => $this->language->get('heading_title'),
			'href'      => $this->url->link('module/carousel_latest', 'token=' . $this->session->data['token'], 'SSL'),
			'separator' => ' :: '
 		);
		$this->data['action'] = $this->url->link('module/carousel_latest', 'token=' . $this->session->data['token'], 'SSL');
		$this->data['cancel'] = $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL');
		$this->data['modules'] = array();
		if (isset($this->request->post['carousel_latest_module'])) {
			$this->data['modules'] = $this->request->post['carousel_latest_module'];
		} elseif ($this->config->get('carousel_latest_module')) { 
			$this->data['modules'] = $this->config->get('carousel_latest_module');
		}				
		$this->load->model('design/layout');
		$this->data['layouts'] = $this->model_design_layout->getLayouts();
		$this->template = 'module/carousel_latest.tpl';
		$this->children = array(
			'common/header',
			'common/footer'
		);
		$this->response->setOutput($this->render());
	}
	private function validate() {
		if (!$this->user->hasPermission('modify', 'module/carousel_latest')) {
			$this->error['warning'] = $this->language->get('error_permission');
		}
		if (isset($this->request->post['carousel_latest_module'])) {
			foreach ($this->request->post['carousel_latest_module'] as $key => $value) {
			  if (!$value['image_width'] || !$value['image_height']) {
          $this->error['image'][$key] = $this->language->get('error_image');
        }
			}
		}		
		if (!$this->error) {
			return true;
		} else {
			return false;
		}	
	}
}
?> 

2. /admin/language/english/module/carousel_latest.php

Do we need to make a carousel latest own language file since this module have not much different with the carousel module one ? The answer is yes. Because /admin/controller/extension/module.php will always check if there is a language file with name is corresponding with module controller name we are going to build now. So, /admin/controller/extension/module.php will see if there is carousel_latest.php under /admin/language/english directory.

And here is the /admin/language/english/module/carousel_latest.php file.

 
<?php
// Heading
$_['heading_title']       = 'Carousel Latest';
// Text
$_['text_module']         = 'Modules';
$_['text_success']        = 'Success: You have modified module carousel latest!';
$_['text_content_top']    = 'Content Top';
$_['text_content_bottom'] = 'Content Bottom';
$_['text_column_left']    = 'Column Left';
$_['text_column_right']   = 'Column Right';
// Entry
$_['entry_limit_product'] = 'Limit Products:';
$_['entry_limit']         = 'Limit:';
$_['entry_scroll']        = 'Scroll:';
$_['entry_image']         = 'Image (W x H):'; 
$_['entry_layout']        = 'Layout:';
$_['entry_position']      = 'Position:';
$_['entry_status']        = 'Status:';
$_['entry_sort_order']    = 'Sort Order:';
// Error
$_['error_permission']    = 'Warning: You do not have permission to modify module carousel latest!';
$_['error_image']        = 'Image width & height dimensions required!';
?> 

3. /admin/view/template/module/carousel_latest.tpl

We use /admin/view/template/module/latest.tpl as our starter, here.

A little thing we need to give an attention in this admin template is the naming in every attribute name of input tags (e.g. carousel_latest_module, google_talk_module, featured_module, etc). Why ? Because it’s easier for us to determine it and by javascript code (i.e. jQuery) to select the right element. FYI if you haven’t heard before, jQuery using name tag to select which element will be choosen to applied it’s command.

And we need to set

<td colspan="6"></td>

to

<td colspan="8"></td>

because we have 8 columns variable to be filled in there.

 
<td class="left"><?php echo $entry_limit_product; ?></td>
<td class="left"><?php echo $entry_limit; ?></td>
<td class="left"><?php echo $entry_scroll; ?></td>
<td class="left"><?php echo $entry_image; ?></td>
<td class="left"><?php echo $entry_layout; ?></td>
<td class="left"><?php echo $entry_position; ?></td>
<td class="left"><?php echo $entry_status; ?></td>
<td class="right"><?php echo $entry_sort_order; ?></td>

And this is the complete /admin/view/template/module/carousel_latest.tpl file.

 
<?php echo $header; ?>
<div id="content">
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
  <?php if ($error_warning) { ?>
  <div class="warning"><?php echo $error_warning; ?></div>
  <?php } ?>
  <div class="box">
    <div class="heading">
      <h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1>
      <div class="buttons"><a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a><a onclick="" class="button"><?php echo $button_cancel; ?></a></div>
    </div>
    <div class="content">
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
        <table id="module" class="list">
          <thead>
            <tr>
              <td class="left"><?php echo $entry_limit_product; ?></td>
              <td class="left"><?php echo $entry_limit; ?></td>
              <td class="left"><?php echo $entry_scroll; ?></td>
              <td class="left"><?php echo $entry_image; ?></td>
              <td class="left"><?php echo $entry_layout; ?></td>
              <td class="left"><?php echo $entry_position; ?></td>
              <td class="left"><?php echo $entry_status; ?></td>
              <td class="right"><?php echo $entry_sort_order; ?></td>
              <td></td>
            </tr>
          </thead>
          <?php $module_row = 0; ?>
          <?php foreach ($modules as $module) { ?>
          <tbody id="module-row<?php echo $module_row; ?>">
            <tr>
              <td class="left"><input type="text" name="carousel_latest_module[<?php echo $module_row; ?>][limit_product]" value="<?php echo $module['limit_product']; ?>" size="5" /></td>
              <td class="left"><input type="text" name="carousel_latest_module[<?php echo $module_row; ?>][limit]" value="<?php echo $module['limit']; ?>" size="5" /></td>
              <td class="left"><input type="text" name="carousel_latest_module[<?php echo $module_row; ?>][scroll]" value="<?php echo $module['scroll']; ?>" size="3" /></td>
              <td class="left"><input type="text" name="carousel_latest_module[<?php echo $module_row; ?>][image_width]" value="<?php echo $module['image_width']; ?>" size="3" />
                <input type="text" name="carousel_latest_module[<?php echo $module_row; ?>][image_height]" value="<?php echo $module['image_height']; ?>" size="3" />
                <?php if (isset($error_image[$module_row])) { ?>
                <span class="error"><?php echo $error_image[$module_row]; ?></span>
                <?php } ?></td>
              <td class="left"><select name="carousel_latest_module[<?php echo $module_row; ?>][layout_id]">
                  <?php foreach ($layouts as $layout) { ?>
                  <?php if ($layout['layout_id'] == $module['layout_id']) { ?>
                  <option value="<?php echo $layout['layout_id']; ?>" selected="selected"><?php echo $layout['name']; ?></option>
                  <?php } else { ?>
                  <option value="<?php echo $layout['layout_id']; ?>"><?php echo $layout['name']; ?></option>
                  <?php } ?>
                  <?php } ?>
                </select></td>
              <td class="left"><select name="carousel_latest_module[<?php echo $module_row; ?>][position]">
                  <?php if ($module['position'] == 'content_top') { ?>
                  <option value="content_top" selected="selected"><?php echo $text_content_top; ?></option>
                  <?php } else { ?>
                  <option value="content_top"><?php echo $text_content_top; ?></option>
                  <?php } ?>
                  <?php if ($module['position'] == 'content_bottom') { ?>
                  <option value="content_bottom" selected="selected"><?php echo $text_content_bottom; ?></option>
                  <?php } else { ?>
                  <option value="content_bottom"><?php echo $text_content_bottom; ?></option>
                  <?php } ?>
                  <?php if ($module['position'] == 'column_left') { ?>
                  <option value="column_left" selected="selected"><?php echo $text_column_left; ?></option>
                  <?php } else { ?>
                  <option value="column_left"><?php echo $text_column_left; ?></option>
                  <?php } ?>
                  <?php if ($module['position'] == 'column_right') { ?>
                  <option value="column_right" selected="selected"><?php echo $text_column_right; ?></option>
                  <?php } else { ?>
                  <option value="column_right"><?php echo $text_column_right; ?></option>
                  <?php } ?>
                </select></td>
              <td class="left"><select name="carousel_latest_module[<?php echo $module_row; ?>][status]">
                  <?php if ($module['status']) { ?>
                  <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                  <option value="0"><?php echo $text_disabled; ?></option>
                  <?php } else { ?>
                  <option value="1"><?php echo $text_enabled; ?></option>
                  <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                  <?php } ?>
                </select></td>
              <td class="right"><input type="text" name="carousel_latest_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $module['sort_order']; ?>" size="3" /></td>
              <td class="left"><a onclick="$('#module-row<?php echo $module_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td>
            </tr>
          </tbody>
          <?php $module_row++; ?>
          <?php } ?>
          <tfoot>
            <tr>
              <td colspan="8"></td>
              <td class="left"><a onclick="addModule();" class="button"><?php echo $button_add_module; ?></a></td>
            </tr>
          </tfoot>
        </table>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
var module_row = <?php echo $module_row; ?>;
function addModule() {  
  html  = '<tbody id="module-row' + module_row + '">';
  html += '  <tr>';
  html += '    <td class="left"><input type="text" name="carousel_latest_module[' + module_row + '][limit_product]" value="10" size="1" /></td>';
  html += '    <td class="left"><input type="text" name="carousel_latest_module[' + module_row + '][limit]" value="5" size="1" /></td>';
  html += '    <td class="left"><input type="text" name="carousel_latest_module[' + module_row + '][scroll]" value="3" size="1" /></td>';
  html += '    <td class="left"><input type="text" name="carousel_latest_module[' + module_row + '][image_width]" value="80" size="3" /> <input type="text" name="carousel_latest_module[' + module_row + '][image_height]" value="80" size="3" /></td>'; 
  html += '    <td class="left"><select name="carousel_latest_module[' + module_row + '][layout_id]">';
  <?php foreach ($layouts as $layout) { ?>
  html += '      <option value="<?php echo $layout['layout_id']; ?>"><?php echo addslashes($layout['name']); ?></option>';
  <?php } ?>
  html += '    </select></td>';
  html += '    <td class="left"><select name="carousel_latest_module[' + module_row + '][position]">';
  html += '      <option value="content_top"><?php echo $text_content_top; ?></option>';
  html += '      <option value="content_bottom"><?php echo $text_content_bottom; ?></option>';
  html += '      <option value="column_left"><?php echo $text_column_left; ?></option>';
  html += '      <option value="column_right"><?php echo $text_column_right; ?></option>';
  html += '    </select></td>';
  html += '    <td class="left"><select name="carousel_latest_module[' + module_row + '][status]">';
  html += '      <option value="1" selected="selected"><?php echo $text_enabled; ?></option>';
  html += '      <option value="0"><?php echo $text_disabled; ?></option>';
  html += '    </select></td>';
  html += '    <td class="right"><input type="text" name="carousel_latest_module[' + module_row + '][sort_order]" value="" size="3" /></td>';
  html += '    <td class="left"><a onclick="$(\'#module-row' + module_row + '\').remove();" class="button"><?php echo $button_remove; ?></a></td>';
  html += '  </tr>';
  html += '</tbody>';
  $('#module tfoot').before(html);
  module_row++;
}
//--></script> 
<?php echo $footer; ?> 

Now, we move onto Front-End area. Let’s see what’s up on there !

4. /catalog/controller/module/carousel_latest.php

I think it’s a benefit for us if we put an already existed file, so we only need to made some changes to the file instead of a whole of file. Now, choose /catalog/controller/module/latest.php as a starter of /catalog/controller/module/carousel_latest.php.

variable $setting

I want to share about a little thing in controller file. Have you ever note variable $setting in controller ? Absolutely yes, for you that used to make a module, of course. But it seems not for you who’s just begin to make modules. $setting is a variable defined by our corresponding admin controller that hold e.g. Layout, Position, Sort Order, etc.

So, here they are:

• Limit: Limit how many products that will be showned.
• Scroll: How many products will be scrolled when next or previous button is clicked.
• Image (W x H): Dimension we use to image product.
• Layout.
• Position.
• Status.
• Sort Order.

And if we want to retrieve the value one of these, we just need to write this code: e.g. $setting['layout'].

Okay, all variable we need to build our latest carousel module are already defined there (because of we use /catalog/controller/module/latest.php) but Limit Product. You must be remember about Limit Product we have discussed above. So, here we just need to retrieve it because we have already defined it at Admin controller(i.e. /admin/controller/module/carousel_latest.php).

Please, take a look at $data in /catalog/controller/module/carousel_latest.php. It’s an array and will be passed as an argument when this controller invoke $this->model_catalog_product->getProducts($data) which will returned the Products.

 
$data = array(
 'sort' => 'p.date_added',
 'order' => 'DESC',
 'start' => 0,
 'limit' => $setting['limit_product'] // set how many total products will be retrieved here.
);

So, we set the value of $data['limit'] to the value of our $setting['limit_product'] here.

And this is the /catalog/controller/module/carousel_latest.php file

 
<?php
class ControllerModuleCarouselLatest extends Controller {
  protected function index($setting) {
    static $module = 0;
    $this->document->addScript('catalog/view/javascript/jquery/jquery.jcarousel.min.js');
    if (file_exists('catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/carousel.css')) {
      $this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/carousel.css');
    } else {
      $this->document->addStyle('catalog/view/theme/default/stylesheet/carousel.css');
    }
    $this->data['limit'] = $setting['limit'];
    $this->data['scroll'] = $setting['scroll'];
    $this->load->model('catalog/product');
    $this->load->model('tool/image');
    $this->data['products'] = array();
    $this->language->load('module/latest');
    $this->data['heading_title'] = $this->language->get('heading_title');
    $this->data['button_cart'] = $this->language->get('button_cart');
    $data = array(
      'sort'  => 'p.date_added',
      'order' => 'DESC',
      'start' => 0,
      'limit' => $setting['limit_product']
    );
    $results = $this->model_catalog_product->getProducts($data);
    foreach ($results as $result) {
      if ($result['image']) {
        $image = $this->model_tool_image->resize($result['image'], $setting['image_width'], $setting['image_height']);
      } else {
        $image = false;
      }
      if (($this->config->get('config_customer_price') && $this->customer->isLogged()) || !$this->config->get('config_customer_price')) {
        $price = $this->currency->format($this->tax->calculate($result['price'], $result['tax_class_id'], $this->config->get('config_tax')));
      } else {
        $price = false;
      }
      if ((float)$result['special']) {
        $special = $this->currency->format($this->tax->calculate($result['special'], $result['tax_class_id'], $this->config->get('config_tax')));
      } else {
        $special = false;
      }
      if ($this->config->get('config_review_status')) {
        $rating = $result['rating'];
      } else {
        $rating = false;
      }
      $this->data['products'][] = array(
        'product_id' => $result['product_id'],
        'thumb'      => $image,
        'name'       => $result['name'],
        'price'      => $price,
        'special'    => $special,
        'rating'     => $rating,
        'reviews'    => sprintf($this->language->get('text_reviews'), (int)$result['reviews']),
        'href'       => $this->url->link('product/product', 'product_id=' . $result['product_id']),
      );
    }
    $this->data['module'] = $module++;
    if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/carousel_latest.tpl')) {
      $this->template = $this->config->get('config_template') . '/template/module/carousel_latest.tpl';
    } else {
      $this->template = 'default/template/module/carousel_latest.tpl';
    }
    $this->render();
  }
}
?>

5. /catalog/view/theme/default/module/carousel_latest.tpl

As we have talkin above, We don’t need to write it from scratch, right ?. We only need to copy existed /catalog/view/theme/default/module/carousel.tpl file to /catalog/view/theme/default/carousel_latest.tpl and make some modification there.

In this case, We only need to change `Banner` which shown by the original .tpl to `Products`.

 
<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div class="box-product">
      <div id="carousel_latest<?php echo $module; ?>" style="display: block; width: 100%; margin-right: 0px; margin-bottom: 0px;">
        <ul class="jcarousel-skin-opencart">
          <?php foreach ($products as $product) { ?>
          <li>
            <?php if ($product['thumb']) { ?>
            <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
            <?php } ?>
            <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
            <?php if ($product['price']) { ?>
            <div class="price">
              <?php if (!$product['special']) { ?>
              <?php echo $product['price']; ?>
              <?php } else { ?>
              <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
              <?php } ?>
            </div>
            <?php } ?>
            <?php if ($product['rating']) { ?>
            <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
            <?php } ?>
            <div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>
          </li>
          <?php } ?>
        </ul>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('#carousel_latest<?php echo $module; ?> ul').jcarousel({
  vertical: false,
  visible: <?php echo $limit; ?>,
  scroll: <?php echo $scroll; ?>
});
//--></script>

Okay, it’s time to see our work! Next step is add new module in our admin panel an set it to Home layout. And let’s see our homepage!

You can download the tutorial files below.

Feel free to comments, suggest or critics for the improvement of this tutorial.

Tags: carousel, latest carousel module, modules