How to create Tab in product page admin panel

Ashok Sachdev · September 26, 2019

public function hookDisplayAdminProductsExtra($params)
    {
        if (isset($params['id_product']) && (int)$params['id_product']) {
            $this->context->smarty->assign('form', 2);
            $this->bootstrap = true;
            return $this->display(__FILE__,'views/templates/hook/displayAdminProductsExtra.tpl');
        }
    }

i am using this code please check but getting every time config button

Ashok Sachdev · September 26, 2019

i need tab like Option and SEO

Edited September 26, 2019 by Ashok Sachdev (see edit history)

Mohamed Eid · September 8, 2022

i have the same issue here

Mohamed Eid · September 13, 2022

I found that In PrestaShop 1.7 they have changed the logic for hookDisplayAdminProductsExtra hook, now all the modules using this hook will be displayed in a single tab named 'Module Options' instead of a separate tab for each module. That means you can't show a separate tab for your module in PrestaShop 1.7

For more details about the hooks in PrestaShop you can visit the following link:

http://build.prestashop.com/news/module-development-changes-in-17/

ps8modules · September 14, 2022

You can use two methods.
1. override /src/PrestaShopBundle/Resources/views/Admin/Product/ProductPage/*.* and add custom hook
2. javascript and a custom hook

ps8modules · September 21, 2022

Hi, here I give you an example of how to do it via javascript.

module 'my_module':

public function install() 
    {
		
		if (Shop::isFeatureActive())
        {
            Shop::setContext(Shop::CONTEXT_ALL);
        }
        
        if (!parent::install())
        {
            return false;
        }

        $this->registerHook('displayCustomAdminProductPageTab');
        $this->registerHook('actionAdminControllerSetMedia');
		
		
        return true;
    }
    
    public function uninstall()
    {                               

        if (Shop::isFeatureActive())
        {
            Shop::setContext(Shop::CONTEXT_ALL);
        }
        
        if (!parent::uninstall())
        {
            return false;
        }

        $this->unregisterHook('displayCustomAdminProductPageTab');
        $this->unregisterHook('actionAdminControllerSetMedia');
		
        return true;
    }

    public function hookDisplayCustomAdminProductPageTab($params)
    {
        return 'my content in hook for product ID: '.$this->idProduct;
    }

    public function getCustomAdminProductPageTab($params)
    {
        $this->idProduct = $params;
        $this->templateDisplayProductPage = _PS_MODULE_DIR_.$this->name.'/views/templates/admin/product.tpl';
        
        if (isset($page)) {
            return $this->fetch($this->templateDisplayProductPage);
        } else {
            return $this->fetch($this->templateDisplayProductPage);
        }
    }

    public function hookActionAdminControllerSetMedia($params)
    {   
        if ($this->active != 1) {return;}

        if (Tools::getValue('controller') == 'AdminProducts') {

            $ajax = $this->context->shop->getBaseURL(true).'modules/'.$this->name.'/ajax/ajax.php?token='.Tools::encrypt($this->name.'/ajax.php');

            Media::addJsDef(
                array(
                    'my_module_content_ajax' => $ajax,
                ),
            );
               
            $this->context->controller->addJS(_PS_MODULE_DIR_.$this->name.'/views/js/tab.js');

        }
    }

module tpl (./modules/my_module/views/templates/admin/product.tpl)

<input type="hidden" id="idProduct" name="idProduct" value="">
<div class="row">
    <div class="col-md-12">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">{hook h="displayCustomAdminProductPageTab"}</div>
            </div>
        </div>
    </div>
</div>

module javascript (./modules/my_module/views/js/tab.js)

$(document).ready(function(){

	/* new tab */
	var liTabs6 = document.getElementById('tab_step1'); 
	var liTabs6 = document.getElementById('tab_step2'); 
	var liTabs6 = document.getElementById('tab_step3'); 
	var liTabs6 = document.getElementById('tab_step4');
	var liTabs6 = document.getElementById('tab_step5'); 
	var liTabs6 = document.getElementById('tab_step6'); /* TAB options */
	var newTabs7 = document.createElement('li');
	var newA = document.createElement('a');
	newTabs7.className = 'nav-item';
	newTabs7.id = 'tab_step7';
	newA.setAttribute('role', 'tab');
	newA.setAttribute('data-toogle', 'tab');
	newA.className = 'nav-link';
	newA.href = '#step7';
	newTabs7.appendChild(newA);
	newA.innerHTML = 'New TAB 7';
	newA.id = '_step7';
	liTabs6.parentNode.insertBefore(newTabs7, liTabs6.nextSibling);
	newTabs7.onclick = function () {
		removeActiveTab();
	};

	/* new tab content and add custom hook */
	var content6 = document.getElementById('step6'); /* content options */
	var contentNewTab7 = document.createElement('div');
	contentNewTab7.className = 'form-contenttab tab-pane';
	contentNewTab7.setAttribute('role', 'tabpanel');
	contentNewTab7.setAttribute('wfd-invisible', 'true');
	contentNewTab7.id = 'step7';
	content6.parentNode.insertBefore(contentNewTab7, content6.nextSibling);


	readAjaxContent();

});


function removeActiveTab(){	
	const ul = document.getElementById('form-nav');
	const listItems = ul.getElementsByTagName('a');
	for (let i = 0; i <= listItems.length - 1; i++) {
		listItems[i].classList.remove('active');
	}
	document.getElementById('_step7').classList.add('active');
	removeActiveTabContent();
}

function removeActiveTabContent(){	
	const div = document.getElementById('form_content');
	const listItems = div.getElementsByTagName('div');
	for (let i = 0; i <= listItems.length - 1; i++) {
		listItems[i].classList.remove('active');
	}
	document.getElementById('step7').classList.add('active');

	readAjaxContent();
}

function readAjaxContent(){
	$.ajax({
		type: "POST",
		url: my_module_content_ajax,
		data: 'idProduct='+document.getElementById('form_id_product').value,
		dataType: "html",
		crossDomain: true,
		async: true,
		success: function(response){
			$('#step7').html(response);
			document.getElementById('idProduct').value = document.getElementById('form_id_product').value;
		},
	});
}

AJAX php (./modules/my_module/ajax/ajax.php)

header("Access-Control-Allow-Origin: *");

include('../../../config/config.inc.php');
include('../../../init.php');


$module_name = 'my_module';

$token = pSQL(Tools::encrypt($module_name.'/ajax.php'));
$token_url = pSQL(Tools::getValue('token'));

$module = Module::getInstanceByName($module_name);

if ($token != $token_url || !Module::isInstalled($module_name)) {
    echo($module->l('Ajax error'));
}


if ($module->active) {
    $templ = $module->getCustomAdminProductPageTab(Tools::getValue('idProduct'));
    echo $templ;
}

result:

Mohamed Eid · September 21, 2022

it works thanks broo.

ps8modules · September 21, 2022

I gladly helped 😉

You can like by clicking on the gray heart below the posts 😃

Edited September 21, 2022 by 4you.software (see edit history)

Mohamed Eid · September 22, 2022

what about if i want to create form in this tab and get the data from this form seperately without update product?

ps8modules · September 22, 2022

Once you create your own form, add a button and store the data via ajax.

Mohamed Eid · September 22, 2022

with hookDisplayCustomAdminProductPageTab i can't get the context data "$context=Context::getContext();" and once i added this i tried to get the form details from this but i can't

public function hookDisplayCustomAdminProductPageTab($params){

       
        if (isset($_POST['idProduct']) && !empty($_POST['idProduct']) ) {

            $productId=$_POST['idProduct'];
            $productTypes=['standard','combinations','virtual','pack'];

            //var_dump($this->employeeId);

            $formDetails='
                <div class="form-group">
                    <label for="productName-'.$productId.'">Product Name</label>
                    <input type="text" class="form-control" id="productName-'.$productId.'" name="productName-'.$productId.'" aria-describedby="ProductNameHelp" value="{$productName}">
                    <small id="ProductNameHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
                </div>
                
                <div class="form-group">
                    <label for="productDescription-'.$productId.'">Product Description</label>
                    <textarea class="form-control" id="productDescription-'.$productId.'" name="productDescription-'.$productId.'" aria-describedby="productDescriptionHelp" rows="2">{$productDescription}</textarea>
                    <small id="productDescriptionHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
                </div>

                <div class="form-group">
                    <label for="producSummary-'.$productId.'">Product Summary</label>
                    <textarea class="form-control" id="productDescription-'.$productId.'" name="productSummary-'.$productId.'" aria-describedby="productSummaryHelp" rows="3">{$productSummary}</textarea>
                    <small id="productSummaryHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
                </div>

                <div class="form-row">
                    <div class="col">
                        <label for="productLink-'.$productId.'">Product URL</label>
                        <input type="text" class="form-control" id="productLink-'.$productId.'" name="productLink-'.$productId.'" aria-describedby="productLinkHelp" value="{$productLink}">
                        <small id="productLinkHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
                    </div>
                    <div class="col">
                        <label for="productImg-'.$productId.'">Product Image</label>
                        <input type="text" class="form-control" id="productImg-'.$productId.'" name="productImg-'.$productId.'" aria-describedby="productImgHelp" value="{$productImage}">
                        <small id="productImgHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
                    </div>
                </div>

            ';

            return $formDetails;

   
        }
        
    }

ps8modules · September 22, 2022

module add before construct:

module:

public function hookDisplayCustomAdminProductPageTab($params){

       
        if ($this->idProduct) {

            $productId = $this->idProduct;
            $productTypes = ['standard','combinations','virtual','pack'];

            //var_dump($this->employeeId);

            $formDetails='
                <div class="form-group">
                    <label for="productName-'.$productId.'">Product Name</label>
                    <input type="text" class="form-control" id="productName-'.$productId.'" name="productName-'.$productId.'" aria-describedby="ProductNameHelp" value="{$productName}">
                    <small id="ProductNameHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
                </div>
                
                <div class="form-group">
                    <label for="productDescription-'.$productId.'">Product Description</label>
                    <textarea class="form-control" id="productDescription-'.$productId.'" name="productDescription-'.$productId.'" aria-describedby="productDescriptionHelp" rows="2">{$productDescription}</textarea>
                    <small id="productDescriptionHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
                </div>

                <div class="form-group">
                    <label for="producSummary-'.$productId.'">Product Summary</label>
                    <textarea class="form-control" id="productDescription-'.$productId.'" name="productSummary-'.$productId.'" aria-describedby="productSummaryHelp" rows="3">{$productSummary}</textarea>
                    <small id="productSummaryHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
                </div>

                <div class="form-row">
                    <div class="col">
                        <label for="productLink-'.$productId.'">Product URL</label>
                        <input type="text" class="form-control" id="productLink-'.$productId.'" name="productLink-'.$productId.'" aria-describedby="productLinkHelp" value="{$productLink}">
                        <small id="productLinkHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
                    </div>
                    <div class="col">
                        <label for="productImg-'.$productId.'">Product Image</label>
                        <input type="text" class="form-control" id="productImg-'.$productId.'" name="productImg-'.$productId.'" aria-describedby="productImgHelp" value="{$productImage}">
                        <small id="productImgHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
                    </div>
                </div>

                <!-- add -->
				<input type="hidden" id="idProduct" value="$productId">
                <div class="row" style="margin-top:25px;">
                    <div class="col">
                        <span id="submit-my-form" class="btn btn-primary save uppercase ml-3" title="" style="float: right;">Save</span>
                    </div>
                </div>

            ';

            return $formDetails;

   
        }
        
    }

    public function getCustomAdminProductPageTab($params)
    {
        $this->idProduct = $params;
        if (isset($page)) {
            return $this->fetch($this->templateDisplayProductPage);
        } else {
            return $this->fetch($this->templateDisplayProductPage);
        }
    }

and add a new function for javascript:

public function saveCustomAdminProductPageTab($params)
{
    if ($params) {
        /* save data to database */
    } else {
        return;
    }
}

and call this function via javascript and post to ajax.php.

ps8modules · September 22, 2022

I'm really not going to program the whole module for you here !!!
In the sample, you can call ajax.php via ajax.js.
In Javascript, you can capture the click of your button and submit it for processing.

What I am repeating here are the basics of php and javascript programming.

I'm sorry, but I can't help anymore, I'd rather work to earn money. 🤨

Mohamed Eid · September 22, 2022

thanks for your support

How to create Tab in product page admin panel

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in