Product Tabs for CMS Prestashop 1.7

February 22, 2018 Dmitry Urbanovich Prestashop
Product Tabs for CMS Prestashop 1.7

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:

Product Tabs for CMS Prestashop 1.7_1

  • There are new horizontal tabs appeared.
  • The most important product settings are in the first tab.

Product Tabs for CMS Prestashop 1.7_2

  • 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:

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:

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:

As a result, we got a user-friendly interface for managing product tabs:

Product Tabs for CMS Prestashop 1.7_3

Product Tabs for CMS Prestashop 1.7_4

The English version of the website:

Product Tabs for CMS Prestashop 1.7_5

The German version of the website:

Product Tabs for CMS Prestashop 1.7_6

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.



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *