How to add a tab with products from the same manufacturer in your product page in OpenCart 2.x

A smart approach to increase your conversion rates is to promote products that might be of interest to your customers. As you might already be aware, there are various paid extension that enable you to display similar or related products to the one that your customer is currently browsing depending on your own preferences. Having in mind that a lot of customers are brand loyal and tend to buy products from brands they already have established trust in, we decided to show you a way to take advantage of that. In this blog post we will propose you a simple, fast to implement, and most of all free of charge solution that enables you to display products from the same brand (manufacturer as referred to in OpenCart) within a tab in the product page.

OCMod file

If you have read our previous tutorials, you already know that the standard procedure starts with the creation of an OCMod file using any text editor (the suggested options would be Notepad or Dreamweaver). Save the document as a namebyyourchoice.ocmod.xml, but keep in mind that the ocmod.xml file extension is a must. The next step is to copy and paste the following code in your document:

<modification>
<name>Add tab with products from the same Manufacturer</name>
<version>1.0</version>
<link>https://isenselabs.com</link>
<author>iSenseLabs</author>
<code>isenselabs_products_from_same_manufacturer</code>
    
<file path="catalog/controller/product/product.php">
    <operation>
        <search><![CDATA[$data['tags'] = array();]]></search>
        <add position="before"><![CDATA[
            $data['tab_brand'] = $this->language->get('tab_brand');
                
            $data['products_brand'] = array();
            if((int)$product_info['manufacturer_id'] > 0){  
        $results = $this->model_catalog_product->getProductSameManufacturer($product_info['manufacturer_id'],$this->request->get['product_id']);
                } 
            
            foreach ($results as $result) {
                if ($result['image']) {
                    $image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_related_width'), $this->config->get('config_image_related_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 = (int)$result['rating'];
                } else {
                    $rating = false;
                }
                    
                if ($this->config->get('config_tax')) {
                    $tax = $this->currency->format((float)$result['special'] ? $result['special'] : $result['price']);
                } else {
                    $tax = false;
                }
                            
                $data['products_brand'][] = array(
                    'product_id' => $result['product_id'],
                    'thumb'        => $image,
                    'name'         => $result['name'],
                    'price'        => $price,
                    'tax'         => $tax,
                    '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'])
                );
            }
               
            $manufacturer_image = $this->model_catalog_manufacturer->getManufacturer($product_info['manufacturer_id']);
            if($manufacturer_image){
                $data['manufacturers_img'] = $this->model_tool_image->resize($manufacturer_image['image'], 50, 50);
            } else  {
                $data['manufacturers_img'] = false;
            }                    
        ]]></add>
    </operation>
</file>
    
<file path="catalog/model/catalog/product.php">
    <operation>
        <search><![CDATA[public function getProductLayoutId($product_id) {]]></search>
        <add position="before"><![CDATA[
            public function getProductSameManufacturer($manufacturer_id,$product_id) {
            $product_data = array();
            $num = 4;
        $query = $this->db->query("SELECT * FROM " . DB_PREFIX . "product WHERE manufacturer_id = '" . (int)$manufacturer_id . "' AND product_id != '" . (int)$product_id . "' LIMIT 0,".$num."");
            foreach ($query->rows as $result) {
            $product_data[$result['product_id']] = $this->getProduct($result['product_id']);  
            }     
            return $product_data;
        }
        ]]></add>
    </operation>
</file>
    
<file path="catalog/view/theme/*/template/product/product.tpl">
        <operation>
            <search><![CDATA[
        <li><a href="#tab-review" data-toggle="tab"><?php echo $tab_review; ?></a></li>
            ]]></search>
            <add position="after"><![CDATA[
        <?php } ?>
        <?php if ($products_brand) { ?>
            <li><a href="#tab-brand" data-toggle="tab"><?php echo sprintf($tab_brand, $manufacturer); ?></a></li>
               ]]></add>
        </operation>
        <operation>
            <search><![CDATA[
            <div class="tab-pane active" id="tab-description"><?php echo $description; ?></div>
            ]]></search>
            <add position="after"><![CDATA[
        <?php if ($products_brand) { ?>
            <div id="tab-brand" class="tab-pane tab-content">
                    <?php if($manufacturers_img) { ?>
                        <div style="text-align:center; margin: -10px auto 10px;"><a href="<?php echo $manufacturers; ?>"><?php echo ($manufacturers_img) ? '<img src="'.$manufacturers_img.'" title="'.$manufacturer.'" />' : '' ;?></a></div>
                    <?php } ?>
                  
                <div class="row">
<?php foreach ($products_brand as $product) { ?>
                    <div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="product-thumb">
                            <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
                             <div class="caption" style="min-height:70px;">
                            <h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4>
                             <?php if ($product['rating']) { ?>
                                <div class="rating">
                                <?php for ($i = 1; $i <= 5; $i++) { ?>
                                     <?php if ($product['rating'] < $i) { ?>
                                     <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                                     <?php } else { ?>
                                      <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                                      <?php } ?>
                                      <?php } ?>
                                    </div>
                            <?php } ?>
                            <?php if ($product['price']) { ?>
                            <p class="price">
                            <?php if (!$product['special']) { ?>
                             <?php echo $product['price']; ?>
                            <?php } else { ?>
                                      <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
                                      <?php } ?>
                                      <?php if ($product['tax']) { ?>
                                      <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
                                      <?php } ?>
                                     </p>
                                  <?php } ?>
                               </div>
                               <div class="button-group">
                                    <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i></button>
                                    <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
                                    <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
                              </div>
                            </div>
                        </div>
                    <?php } ?>
                  </div>
            </div>
        <?php } ?>
       ]]></add>
    </operation>
</file>

<file path="catalog/language/english/product/product.php">
        <operation>
            <search><![CDATA[
                $_['tab_review']               = 'Reviews (%s)';
            ]]></search>
            <add position="after"><![CDATA[
                $_['tab_brand']       = 'Other %s products';
            ]]></add>
        </operation>
</file>    
</modification>

After you have saved the file you just need to upload it through the extension installer, refresh the modifications and Voilà!

Customizing and code explanation

In the following section we will demonstrate how you can customize the extension to better suit your store by modifying the code in the file that you have just created.

The code itself adds a product tab under the product picture next to the Reviews tab in the Product page. You can change the name of the tab, which is currently “Other BrandName products” by modifying the following code snippet in the OCmod file. Keep in mind that the %s stands for the brand.

 $_['tab_brand']       = 'Other %s products';

You can also choose how many products from the same brand to be displayed. Currently, the maximum number is 4, as in the default OpenCart 2.0.x layout 4 is the number of products that fit in one row. However, you can increase this number, which will result in 2 or more rows of products with 4 items per row. In order to do that you will need to replace the digit 4 with the maximum desired number of displayed products in the following code:

$product_data = array();
$num = 4;

If there is at least one product from the same brand the tab will be visible. If there aren’t any products from the same brand, the tab will not be displayed. However, you can change the minimum number of required products from the same brand by replacing the 0 here: 

$data['products_brand'] = array();
if((int)$product_info['manufacturer_id'] > 0)

If there is an icon added to the manufacturer info in the admin panel it will be displayed above the products. If you would like to remove the brand’s icon, you can remove the following code:

 <?php if($manufacturers_img) { ?>
<div><a href="<?php echo $manufacturers; ?>"><?php echo ($manufacturers_img) ? '<img src="'.$manufacturers_img.'" title="'.$manufacturer.'" />' : '' ;?></a></div>
<?php } ?>

If you would like to change the size of the icon, you can change the two numbers in the following code that stand for the width and the height of the image respectively:

resize($manufacturer_image['image'], 50, 50);

Final words

We hope that you will find this tutorial useful and that implementing such a feature will have a positive impact on your sales.

Join 11,000+ subscribers receiving actionable E-commerce advice

* Unsubscribe any time
comments powered by Disqus