OpenCart 2 Theme Development – Theme Work

OpenCart 2 Theme Development – Theme Work. Sofar we have learned how to create admin option for your theme. Let’s create the Theme with this tutorial. you need to create more files in your catalog/view/theme/kvvaradha/template.  And its a hectic job. So let’s copy it from the default theme and customize it as per our needs. And Copy some of the files from template folder.

Let’s start  with common files first. We need to hook our custom CSS,  JS and some other hooking files here in this common files such as header, footer and home page files. Here I have included two JS files one for html5 and Cloud Zoom with below code.

<script type="text/javascript" src="catalog/view/theme/kvvaradha/js/html5.js"></script>
<script type="text/javascript" src="catalog/view/theme/kvvaradha/js/cloud_zoom.js"></script>

Like that way you van include CSS files as well.

<link rel="stylesheet" type="text/css" href="catalog/view/theme/kvvaradha/stylesheet/custom.css" />

Now, you need to edit and change the layout with help of common files with your desired template.

You might have some additional columns like left, right, top and center layout. Which can be styled with your code and which has some different layout and look. You can make them all and merge with it.

Currency.tpl

Say for example I am styling the currency.tpl here in this one.

<?php $type = $this->kvvaradha->settings->get('currency_display', 'symbol'); //this is my custom option here.
 if (count($currencies) > 1): 
 $current_currency = '';
 foreach ($currencies as $currency) {
 if ($currency['code'] == $code) {
 switch ($type) {
 case 'symbol':
 $current_currency = $currency['symbol_left'] ? "<span class='currency-symbol'>{$currency['symbol_left']}</span>" : "<span class='currency-symbol'>{$currency['symbol_right']}</span>";
 break;
 case 'text':
 $current_currency = "{$currency['title']}";
 break;
 case 'code':
 $current_currency = "{$currency['code']}";
 break;
 case 'full':
 $current_currency = $currency['symbol_left'] ? "<span class='currency-symbol'>{$currency['symbol_left']}</span> {$currency['title']}" : "{$currency['title']} <span class='currency-symbol'>{$currency['symbol_right']}</span>";
 break;
 }
 }
 }
?>
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data">
 <div id="currency">
 <div class="btn-group">
 <button class="dropdown-toggle" type="button" data-hover="dropdown">
 <?php echo $current_currency; ?> <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 <?php foreach ($currencies as $currency): 
 if ($currency['symbol_left']): 
if ($type === 'symbol'): ?>
 <li><a onclick="$(this).closest('form').find('input[name=\'code\']').val('<?php echo $currency['code']; ?>'); $(this).closest('form').submit();"><?php echo $currency['symbol_left']; ?></a></li>
 <?php endif; 
if ($type === 'text'): ?>
 <li><a onclick="$(this).closest('form').find('input[name=\'code\']').val('<?php echo $currency['code']; ?>'); $(this).closest('form').submit();"><?php echo $currency['title']; ?></a></li>
 <?php endif;
if ($type === 'code'): ?>
 <li><a onclick="$(this).closest('form').find('input[name=\'code\']').val('<?php echo $currency['code']; ?>'); $(this).closest('form').submit();"><?php echo $currency['code']; ?></a></li>
 <?php endif; 
 if ($type === 'full'): ?>
 <li><a onclick="$(this).closest('form').find('input[name=\'code\']').val('<?php echo $currency['code']; ?>'); $(this).closest('form').submit();"><?php echo $currency['symbol_left'];?> <?php echo $currency['title']; ?></a></li>
 <?php endif; 
else: 
 if ($type === 'symbol'): ?>
 <li><a onclick="$(this).closest('form').find('input[name=\'code\']').val('<?php echo $currency['code']; ?>'); $(this).closest('form').submit();"><?php echo $currency['symbol_right'];?></a></li>
 <?php endif;
if ($type === 'text'): ?>
 <li><a onclick="$(this).closest('form').find('input[name=\'code\']').val('<?php echo $currency['code']; ?>'); $(this).closest('form').submit();"><?php echo $currency['title']; ?></a></li>
 <?php endif;
 if ($type === 'code'): ?>
 <li><a onclick="$(this).closest('form').find('input[name=\'code\']').val('<?php echo $currency['code']; ?>'); $(this).closest('form').submit();"><?php echo $currency['code']; ?></a></li>
 <?php endif; 
 if ($type === 'full'): ?>
 <li><a onclick="$(this).closest('form').find('input[name=\'code\']').val('<?php echo $currency['code']; ?>'); $(this).closest('form').submit();"><?php echo $currency['title']; ?> <?php echo $currency['symbol_right']; ?></a></li>
 <?php endif;
endif; 
 endforeach; ?>
 </ul>
 </div>
 <input type="hidden" name="code" value="" />
 <input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />
 </div>
</form>
<?php endif; ?>

Like that way  you can edit your templates. A part can be explained here. There are vast amount of changes you have to do in the new template.  Kindly do it with your own understanding, There are some easy things in the coding.