I have three proposal for OpenCart 2 templating.
1. Clean page template
I'm refering the product.tpl, category.tpl, information.tpl as Page Template.
OpenCart use the Page template to layouting the site, this come to be the main reason of unnecessary template modification for developing themes.
overview of information.tpl
Code: Select all
<?php echo $header; ?>
<div class="container">
<ul class="breadcrumb"></ul>
<div class="row">
<?php echo $column_left; ?>
<div id="content">
<?php echo $content_top; ?>
<!-- Information page -->
<h1><?php echo $heading_title; ?></h1>
<?php echo $description; ?>
<!-- End: Information page -->
<?php echo $content_bottom; ?>
</div><!-- End: #content -->
<?php echo $column_right; ?>
</div> <!-- End: .row -->
</div> <!-- End: .container -->
<?php echo $footer; ?>
At image above (and for next refference):
- Box with blue background is code at header.tpl
- Green background is page template (I use information.tpl)
- Orange is code at footer.tpl
header.tpl
Code: Select all
<html>
<head></head>
<body>
<nav id="top"></nav>
<header></header>
<nav id="menu"></nav>
<div class="container">
<ul class="breadcrumb"></ul>
<div class="row">
<?php echo $column_left; ?>
<div id="content">
<?php echo $content_top; ?>
Code: Select all
<?php echo $header; ?> <!-- echo code above -->
<!-- Information page -->
<h1><?php echo $heading_title; ?></h1>
<?php echo $description; ?>
<!-- End: Information page -->
<?php echo $footer; ?> <!-- echo code below -->
Code: Select all
<?php echo $content_bottom; ?>
</div><!-- End: #content -->
<?php echo $column_right; ?>
</div> <!-- End: .row -->
</div> <!-- End: .container -->
<footer></footer>
</body>
</html>
Html layout and positions is loaded by header.tpl (blue) and footer.tpl (orange).
This will minimise html layout issue of 3rd extensions and themes.
And also reducing unnecessary modificate OpenCart template to develope themes.
And of course, OpenCart will more easy to maintain.
I manage to make quick change to show how it work. You can see it here.
Pull request status: rejected
2. Clean Module template
The second proposal is based on Q idea.
Module only contain it's content.
Html layout related to visual theming handled by Position template (column_right.tpl, content_top.tpl etc)
My module/welcome.tpl code is only <?php echo $message; ?>, the module box is handled by column_right.tpl below
Code: Select all
<?php foreach ($modules as $module) { ?>
<?php if ($module['title']) { ?>
<!-- welcome module at image above -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><?php echo $module['title']; ?></h3>
</div>
<div class="panel-body <?php echo $module['class']; ?>">
<?php echo $module['content']; ?>
</div>
</div>
<?php } else { ?>
<!-- category module at image above -->
<?php echo $module['content']; ?>
<?php } ?>
<?php } ?>
Pull request status: I'm canceling this part coz the first proposal is rejected
3. Dynamically add Position
OpenCart have 4 controller and template file for position (column_right, content_top etc) and all of them have code pattern.
To make it easy to add and manage Position, we need general Position handler.
position.php
Code: Select all
// Example
class ControllerCommonPosition extends Controller {
public function index($setting) {
foreach ($extensions as $extension) {
if ($module['position'] == $setting['position']) {
// array $module_data
}
}
if (!isset($setting['template'])) {
$setting['template'] = $setting['position'];
}
return $this->load->view($setting['template'], $data);
}
}
Code: Select all
// Current position
$data['column_left'] = $this->load->controller('common/position', array('position' => 'column_left'));
// 2 new position with 1 template
$data['content_top_a'] = $this->load->controller('common/position', array('position' => 'content_top_a', 'template' => 'position_a_b'));
$data['content_top_b'] = $this->load->controller('common/position', array('position' => 'content_top_b', 'template' => 'position_a_b'));
Even if themes have different amount of positions or may be up to 21 positions, extensions developer only need to modificate one position.php to make their ext work seamless with OpenCart "layout override" concept.
But of course it is required to "read" theme position and show them in modules based on active theme.
I'm not test this yet, but I think it's possible with current WIP (work in progress) of OpenCart 2 to read install.xml during installation and save some data to database.
Then load theme position from database to admin module.
Screenshoot when we add a module to content_top_a position Screenshoot when we add a module to content_top_a and content_top_b 1 module at content_top_a and 2 module at content_top_b My modification to test this feature.
This proposal based on quick modification to see the result, when it comes to prepare them to OpenCart 2 core I'm sure more test is required.
If you have any feedback feel free to share, I plan to start working on first proposal next week and Pull Request to OpenCart repo.
I hope we can see this proposal come true in OpenCart 2