How to add a new tab to the product card in OpenCart 3.x

In this article, we will consider how to add new tabs in the product card with editing them from the admin panel. Let’s get started, add a field to the admin panel, and then to the site itself.

 

First, add a new field a DB, open the database in phpmyadmin and make a request

ALTER TABLE `oc_product_description` ADD `sostav` MEDIUMTEXT CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL AFTER `description`;

As a result, a new sostav field will be added, where the text of the tab will be stored. Next, edit the site files.

 

Admin panel, file \admin\view\template\catalog\product_form.twig

 

after

<div class="form-group">
<label class="col-sm-2 control-label" for="input-description{{ language.language_id }}">{{ entry_description }}</label>
<div class="col-sm-10">
  <textarea name="product_description[{{ language.language_id }}][description]" placeholder="{{ entry_description }}" id="input-description{{ language.language_id }}" data-toggle="summernote" data-lang="{{ summernote }}" class="form-control">{{ product_description[language.language_id] ? product_description[language.language_id].description }}</textarea>
</div>
</div>

paste

<div class="form-group">
<label class="col-sm-2 control-label" for="input-sostav{{ language.language_id }}">Состав</label>
<div class="col-sm-10">
  <textarea name="product_description[{{ language.language_id }}][sostav]" placeholder="Введите состав" id="input-sostav{{ language.language_id }}" data-toggle="summernote" data-lang="{{ summernote }}" class="form-control">{{ product_description[{{ language.language_id }}] ? product_description[{{ language.language_id }}].sostav }}</textarea>
  </div>
</div>

(new tab is call SOSTAV)

 

file \admin\controller\catalog\product.php

 

before

if (isset($this->request->post['model'])) {

paste

if (isset($this->request->post['sostav'])) {
	$data['sostav'] = $this->request->post['sostav'];
} elseif (isset($this->request->get['product_id'])) {
	$data['sostav'] = $this->model_catalog_product->getProductDescriptions($this->request->get['product_id']);
} else {
	$data['sostav'] = array();
}

file \admin\model\catalog\product.php

 

in the request, around 12 stroke

foreach ($data['product_description'] as $language_id => $value) {
	$this->db->query("INSERT INTO " . DB_PREFIX . "product_description SET product_id = '" . (int)$product_id . "', language_id = '" . (int)$language_id . "', name = '" . $this->db->escape($value['name']) . "', description = '" . $this->db->escape($value['description']) . "', tag = '" . $this->db->escape($value['tag']) . "', meta_title = '" . $this->db->escape($value['meta_title']) . "', meta_description = '" . $this->db->escape($value['meta_description']) . "', meta_keyword = '" . $this->db->escape($value['meta_keyword']) . "'");
}

add

sostav = '" . $this->db->escape($value['sostav']) . "',

get such a request:

foreach ($data['product_description'] as $language_id => $value) {
	$this->db->query("INSERT INTO " . DB_PREFIX . "product_description SET product_id = '" . (int)$product_id . "', language_id = '" . (int)$language_id . "', name = '" . $this->db->escape($value['name']) . "', sostav = '" . $this->db->escape($value['sostav']) . "', description = '" . $this->db->escape($value['description']) . "', tag = '" . $this->db->escape($value['tag']) . "', meta_title = '" . $this->db->escape($value['meta_title']) . "', meta_description = '" . $this->db->escape($value['meta_description']) . "', meta_keyword = '" . $this->db->escape($value['meta_keyword']) . "'");
}

further below, in the region of 146 lines, in the request

foreach ($data['product_description'] as $language_id => $value) {

add the same entry as above, we get:

foreach ($data['product_description'] as $language_id => $value) {
	$this->db->query("INSERT INTO " . DB_PREFIX . "product_description SET product_id = '" . (int)$product_id . "', language_id = '" . (int)$language_id . "', name = '" . $this->db->escape($value['name']) . "', sostav = '" . $this->db->escape($value['sostav']) . "', description = '" . $this->db->escape($value['description']) . "', tag = '" . $this->db->escape($value['tag']) . "', meta_title = '" . $this->db->escape($value['meta_title']) . "', meta_description = '" . $this->db->escape($value['meta_description']) . "', meta_keyword = '" . $this->db->escape($value['meta_keyword']) . "'");
}

and below around 435 lines, after

'description'      => $result['description'],

add

'sostav'         =>    $result['sostav'],

---

 

Now we’ll display a tab on the site,

 

file \catalog\view\theme\*\template\product\product.twig

 

after

<li class="active"><a href="#tab-description" data-toggle="tab">{{ tab_description }}</a></li>

add

{% if sostav is defined and sostav %}
	<li><a href="#tab-newtabcontent" data-toggle="tab">Состав</a></li>
{% endif %}

and below, after

<div class="tab-pane active" id="tab-description">{{ description }}</div>

add

{% if sostav is defined and sostav %}
	<div class="tab-pane" id="tab-newtabcontent">{{ sostav }}</div>
{% endif %}

Next, the file\catalog\controller\product\product.php

 

after

$data['points'] = $product_info['points'];

add

$data['sostav'] = html_entity_decode($product_info['sostav'], ENT_QUOTES, 'UTF-8');

File \catalog\model\catalog\product.php

 

after

if ($query->num_rows) {

add

$newtabcontent_query = $this->db->query("SELECT * FROM " . DB_PREFIX . "product_description WHERE product_id = '" . (int)$product_id . "' AND language_id = '" . (int)$this->config->get('config_language_id') . "'");
if($newtabcontent_query->num_rows)  {
	$sostav = $newtabcontent_query->row['sostav'];
} else {
	$sostav = "";
}

and below after

'product_id'       => $query->row['product_id'],

add

'sostav'       => $sostav,

---

 

We update modificators. As a result, in the admin panel we have a new field in the GENERAL tab

 

 

And a new tab appears on the site: