Implement Twig In Opencart

Here, we will learn how to integrate twig templating engine with the Opencart. First of all, we have to download the composer installer in the root of our Opencart using the command:

curl -s http://getcomposer.org/installer | php

Then, we have to create a composer.json file in the root and put the following lines into it:

{
    "require": {
        "twig/twig": "1.*"
    }
}

After pasting the above lines, we have to install the dependencies using the command:

php composer.phar install

It will create a vendor folder by default in which the twig packages will be stored. To make an access to these files, I have added these lines of codes in the index.php file in the root as I have created another folder named views in the catalog folder.

// Twig
require_once 'vendor/autoload.php'; 

$twigLoader = new Twig_Loader_Filesystem('catalog/views/theme/default/template'); 

$twig = new Twig_Environment($twigLoader);

It is not advisable to perform modifications to the index.php file. Instead, you can copy the code in system/engine/front.php

Working with the twig is very simple. I have made changes in the account file. I just replace a few line at the end of the controller. So, here’s the replaced controller code:

if ($this->config->get('config_template') != 'default' && file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/account/account.tpl')) {
	$this->response->setOutput($this->load->view($this->config->get('config_template') . '/template/account/account.tpl', $data));
} else {
	echo $this->twig->render('account/account.html', $data);
}

I have created a twig file named account.html in the location catalog/views/theme/default/template/account and here the code of twig file:

{{ header | raw }}
<div class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs  %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text | raw }}</a></li>
    {% endfor %}
  </ul>
  {% if success %}
  <div class="alert alert-success"><i class="fa fa-check-circle"></i> {{ success }}</div>
  {% endif %}
  <div class="row">{{ column_left | raw }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h2>{{ text_my_account }}</h2>
      <ul class="list-unstyled">
        <li><a href="{{ edit }}">{{ text_edit }}</a></li>
        <li><a href="{{ password }}">{{ text_password }}</a></li>
        <li><a href="{{ address }}">{{ text_address }}</a></li>
        <li><a href="{{ wishlist }}">{{ text_wishlist }}</a></li>
      </ul>
      {% if credit_cards %}
      <h2>{{ text_credit_card }}</h2>
      <ul class="list-unstyled">
        {% for credit_card in credit_cards %}
        <li><a href="{{ credit_card.href }}">{{ credit_card.name }}</a></li>
        {% endfor %}
      </ul>
      {% endif %}
      <h2>{{ text_my_orders }}</h2>
      <ul class="list-unstyled">
        <li><a href="{{ order }}">{{ text_order }}</a></li>
        <li><a href="{{ download }}">{{ text_download }}</a></li>
       {% if reward %}
        <li><a href="{{ reward }}">{{ text_reward }}</a></li>
        {% endif %}
        <li><a href="{{ return }}">{{ text_return }}</a></li>
        <li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
        <li><a href="{{ recurring }}">{{ text_recurring }}</a></li>
      </ul>
      <h2>{{ text_my_newsletter }}</h2>
      <ul class="list-unstyled">
        <li><a href="{{ newsletter }}">{{ text_newsletter }}</a></li>
      </ul>
      {{ content_bottom | raw }}</div>
    {{ column_right | raw }}
  </div>
</div>
{{ footer | raw }} 

For a thorough knowledge of the twig, please do visit Twig Documentation.

Vikhyat Sharma 6 Badges

• 17 Mar, 2016
  Created by - Vikhyat Sharma