Recently we’ve started redesigning some Prestashop modules. The first module we’re upgrading is ProduсtTabs. The module allows creating and adding extra tabs on the product page as well as displaying additional information about most important products in the store. So let’s consider how to upgrade it to CMS 1.7.
As you know, Prestashop 1.7 architecture is based on Symfony2, but only two parts of the back office including the Products and Modules pages underwent changes. With that in mind, we also need to consider additional changes.
The basic settings page in the admin panel looks like that:
- There are new horizontal tabs appeared.
- The most important product settings are in the first tab.
- Instead of previous additional tabs for every module, there’s a list of modules appeared.
Additionally, there’s new functionality to save a product without refreshing a page. But it in its turn requires the number of changes in module management functionality (creating product tabs). We decided not to use the hookActionProductSave function but create the controller:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php class AdminProductTabsController extends ModuleAdminController { public function ajaxProcessDeleteProductTab() { try { $product_tab = new ProductTab(Tools::getValue('id_product_tab')); $product_tab->delete(); $this->ajaxProcessGetProductTabList(); } catch (Exception $e) { throw new PrestaShopException($e->getMessage()); } } public function ajaxProcessGetProductTabList() { try { $product_tabs = ProductTab::getTabsByProductId(Tools::getValue('id_product'), false); $this->context->smarty->assign(array( 'product_tabs' => $product_tabs, 'product_tabs_link_get' => $this->context->link->getAdminLink('AdminProductTabs') . '&ajax=1&action=getproducttab', 'product_tabs_link_delete' => $this->context->link->getAdminLink('AdminProductTabs') . '&ajax=1&action=deleteproducttab', )); die($this->context->smarty->fetch(PRODUCT_TABS_DIR . 'views/templates/admin/list.tpl')); } catch (Exception $e) { throw new PrestaShopException($e->getMessage()); } } … } |
It let us divide code into logical chains and use them twice, for example, as it is in the ajaxProcessDeleteProductTab method of AdminProductTabsController. After the tab is removed, the ajaxProcessGetProductTabList method is called to display the list of tabs left.
The major change in the product template is the possibility to add a tab for every module using displayProductExtraContent:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
... {foreach from=$product.extraContent item=extra key=extraKey} <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}"> {$extra.title} </a> </li> {/foreach} … {foreach from=$product.extraContent item=extra key=extraKey} <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}> {$extra.content nofilter} </div> {/foreach} ... |
Unfortunately, this functionality wasn’t suitable for us, as functionality changes should have affected the possibility of placing tabs in the certain order set by the website manager. That’s why we had to act differently, as the template didn’t allow intercepting tabs data array or HTML. For rendering with our module, we had to use javaScript to transfer the created tabs to the script:
|
1 2 3 4 5 6 7 8 9 10 11 |
public function hookHeader() { if (Tools::getValue('id_product')) { $id_product_tab_settings = ProductTabSettings::getIdByProductId(Tools::getValue('id_product')); $product_tab_settings = new ProductTabSettings($id_product_tab_settings); Media::addJsDef(array( 'product_tabs' => $product_tabs, 'product_tab_settings' => $product_tab_settings, )); } } |
As a result, we got a user-friendly interface for managing product tabs:
The English version of the website:
The German version of the website:
As you can judge considering the pictures above, the module works not only with different languages but also with different websites running on the same platform suitable for creating tabs for all categories, for all products, for producer and supplier.
The module is available in our Prestashop store.
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
