Jump to content

How to create Tab in product page admin panel


Ashok Sachdev

Recommended Posts

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

Link to comment
Share on other sites

  • 2 years later...

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/

Link to comment
Share on other sites

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:

obrazek.png.553eb852b2adaa603d596e3d86a96949.png

 

Link to comment
Share on other sites

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;

   
        }
        
    }

 

Link to comment
Share on other sites

obrazek.thumb.png.306966a6210b544caa067b98ccc50ab3.png

 

module add before construct:

obrazek.png.4fa56515ec9dfdae0f6891ba1051b15d.png

 

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.

 

Link to comment
Share on other sites

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. 🤨

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...