DISPLAY FO Desde 1.7.1

displayProductExtraContent

~3 min de lectura

#Descripcion

Permite añadir pestañas/tabs adicionales en la ficha de producto del front office. A diferencia de otros hooks de producto que inyectan HTML directamente, este hook espera que devuelvas un array de objetos `ProductExtraContent` que PrestaShop renderiza como pestañas nativas. Es el metodo recomendado en PS 1.7+ para añadir informacion al producto (especificaciones custom, garantias, instrucciones, reviews).

📍
Disparado por
  • ProductControllerCore::initContent()controllers/front/ProductController.php

#Parametros

Nombre Tipo Requerido Descripcion
$product Product Si Objeto Product del producto actual
Retorno
array Array de objetos PrestaShop\PrestaShop\Core\Product\ProductExtraContent

#Ejemplo de codigo

mymodule.php
php
public function install()
{
    return parent::install()
        && $this->registerHook('displayProductExtraContent');
}
mymodule.php
php
use PrestaShop\PrestaShop\Core\Product\ProductExtraContent;

/**
 * Hook displayProductExtraContent — Pestaña de garantia
 */
public function hookDisplayProductExtraContent($params)
{
    $product = $params['product'];
    $tabs = [];

    // Tab 1: Informacion de garantia
    $warrantyContent = new ProductExtraContent();
    $warrantyContent->setTitle('Garantia');

    $this->context->smarty->assign([
        'warranty_years' => Configuration::get('MYMOD_WARRANTY_YEARS', null, null, null, 2),
        'product_name'   => $product->name,
    ]);

    $warrantyContent->setContent(
        $this->display(__FILE__, 'views/templates/hook/warranty-tab.tpl')
    );
    $tabs[] = $warrantyContent;

    // Tab 2: Guia de tallas (solo para ropa)
    if ((int)$product->id_category_default === (int)Configuration::get('MYMOD_CLOTHING_CAT')) {
        $sizeGuide = new ProductExtraContent();
        $sizeGuide->setTitle('Guia de tallas');
        $sizeGuide->setContent(
            $this->display(__FILE__, 'views/templates/hook/size-guide.tpl')
        );
        $tabs[] = $sizeGuide;
    }

    return $tabs;
}
template.tpl
smarty
{* Se renderiza automaticamente como tabs en product.tpl *}
{foreach from=$product.extraContent item=extra key=extraKey}
  <div class="tab-pane" id="extra-{$extraKey}">
    {$extra.content nofilter}
  </div>
{/foreach}

#Notas y gotchas

  • ⚠️ IMPORTANTE: Debes devolver un array de objetos `ProductExtraContent`, NO un string HTML.
  • ⚠️ Importa la clase: `use PrestaShop\PrestaShop\Core\Product\ProductExtraContent;`
  • ⚠️ Cada `ProductExtraContent` tiene: `setTitle(string)`, `setContent(string)`, `setAttr(array)`.
  • ⚠️ Las tabs se renderizan automaticamente en `product.tpl` — no necesitas modificar el tema.
  • ⚠️ Solo disponible desde PS 1.7.1. En PS 1.6, usa `displayProductTab` + `displayProductTabContent`.
  • ⚠️ Si necesitas JS interactivo en tu tab, cargalo con `actionFrontControllerSetMedia`.

#Relacionados

#Historial de versiones

Version PSCambio
1.7.1 Introducido como reemplazo moderno de displayProductTab
8.0 Sin cambios — sigue siendo el metodo recomendado
Descargar en Markdown Pensado para pegar en ChatGPT, Claude u otra IA. Incluye solo el contenido de esta pagina.