---
title: Hummingbird + Bootstrap 5 — PrestaShop 9
section: ps91
slug: hummingbird-bs5
description: "Guia completa del tema Hummingbird de PS 9: Bootstrap 5, jQuery deprecated, data-ps-*, child themes y adaptacion de modulos."
last_updated: 2026-04
source_url: "https://ayudaprestashop.es/ps91/hummingbird-bs5"
---

# Hummingbird + Bootstrap 5 — PrestaShop 9

> Guia completa del tema Hummingbird de PS 9: Bootstrap 5, jQuery deprecated, data-ps-*, child themes y adaptacion de modulos.

## Hummingbird vs Classic

**Hummingbird** es el nuevo tema por defecto de PrestaShop 9.x. Reemplaza a **Classic** que se mantiene como tema legacy. Las diferencias fundamentales son:

| Aspecto | Classic (PS 8) | Hummingbird (PS 9) |
| --- | --- | --- |
| Framework CSS | Bootstrap 4.0.0-alpha.5 | Bootstrap 5.3.3 |
| JavaScript | jQuery obligatorio | jQuery deprecated, Vanilla JS preferido |
| Selectores JS | Clases CSS (.js-product-miniature) | data-ps-* attributes |
| Templates | Smarty (.tpl) | Smarty (.tpl) con soporte futuro Twig |
| Sistema de grid | Breakpoints BS4 | Breakpoints BS5 (xxl: 1400px) |
| RTL | Parcial | Completo (clases logicas start/end) |
| Dark mode | No | Soporte via prefers-color-scheme |
| Compilador | Webpack | Webpack (Node.js 20.19.5) |
| PHP minimo | 7.2 | 8.1 |

## Bootstrap 5.3.3 — cambios de clases

El cambio de Bootstrap 4 a 5 afecta masivamente al HTML de tus modulos si inyectan clases CSS en el front. Aqui la tabla completa de migracion:

### Utilidades de spacing

| BS4 | BS5 | Logica |
| --- | --- | --- |
| .ml-1, .ml-2, .ml-3... | .ms-1, .ms-2, .ms-3... | margin-start (izq en LTR, der en RTL) |
| .mr-1, .mr-2, .mr-3... | .me-1, .me-2, .me-3... | margin-end |
| .pl-1, .pl-2... | .ps-1, .ps-2... | padding-start |
| .pr-1, .pr-2... | .pe-1, .pe-2... | padding-end |

### Componentes

| BS4 | BS5 | Notas |
| --- | --- | --- |
| .btn-block | .d-grid > .btn | Boton full-width ya no es clase del btn |
| .close | .btn-close | Boton de cerrar es componente propio |
| .custom-control .custom-checkbox | .form-check | Checkboxes y radios unificados |
| .custom-switch | .form-check .form-switch | Switch es modificador de form-check |
| .badge-pill | .rounded-pill | Ahora es utilidad de border |
| .badge-primary | .bg-primary | Color de badge via utilidad bg-* |
| .card-deck | .row > .col > .card | Usar grid nativo |
| .media | (eliminado) | Reemplazar con d-flex |
| .float-left | .float-start | Logico para RTL |
| .float-right | .float-end | Logico para RTL |
| .text-left | .text-start | Logico para RTL |
| .text-right | .text-end | Logico para RTL |
| .sr-only | .visually-hidden | Clase de accesibilidad renombrada |
| .font-weight-bold | .fw-bold | Abreviatura |
| .font-italic | .fst-italic | Abreviatura |

### Data attributes

| BS4 | BS5 | Componente |
| --- | --- | --- |
| data-toggle | data-bs-toggle | Todos (collapse, modal, tab, dropdown) |
| data-target | data-bs-target | Modal, collapse |
| data-dismiss | data-bs-dismiss | Modal, alert, toast |
| data-ride | data-bs-ride | Carousel |
| data-slide | data-bs-slide | Carousel |
| data-parent | data-bs-parent | Accordion |

## JavaScript: jQuery → Vanilla

jQuery sigue disponible en PS 9 pero esta **deprecated**. Sera eliminado en PS 10. Tu modulo debe migrar progresivamente:

*Equivalencias jQuery → Vanilla JS*

```javascript
// Selectores
$('.mi-clase')                → document.querySelectorAll('.mi-clase')
$('#mi-id')                   → document.getElementById('mi-id')
$('.parent .child')           → document.querySelectorAll('.parent .child')

// Eventos
$(el).on('click', fn)         → el.addEventListener('click', fn)
$(document).ready(fn)         → document.addEventListener('DOMContentLoaded', fn)
$(el).trigger('change')       → el.dispatchEvent(new Event('change'))

// DOM
$(el).addClass('active')      → el.classList.add('active')
$(el).removeClass('active')   → el.classList.remove('active')
$(el).toggleClass('active')   → el.classList.toggle('active')
$(el).hasClass('active')      → el.classList.contains('active')
$(el).attr('data-id')         → el.getAttribute('data-id') o el.dataset.id
$(el).html(content)           → el.innerHTML = content
$(el).text()                  → el.textContent
$(el).val()                   → el.value
$(el).show() / .hide()        → el.style.display = '' / 'none'
$(el).append(html)            → el.insertAdjacentHTML('beforeend', html)

// AJAX
$.ajax({ url, method, data }) → fetch(url, { method, body: data })
$.getJSON(url)                → fetch(url).then(r => r.json())
$.post(url, data)             → fetch(url, { method: 'POST', body: data })
```

## Convencion data-ps-*

Hummingbird introduce una nueva convencion para selectores JavaScript. En lugar de usar clases CSS (que pueden cambiar con el diseño), se usan **atributos `data-ps-*`**:


*Usar selectores data-ps-* en tu modulo*

```javascript
// Seleccionar por referencia
const products = document.querySelectorAll('[data-ps-ref="product-miniature"]');

// Escuchar acciones
document.querySelectorAll('[data-ps-action="add-to-cart"]').forEach(btn => {
    btn.addEventListener('click', handleAddToCart);
});

// Eventos nativos de PrestaShop (siguen funcionando)
prestashop.on('updatedProduct', (event) => {
    console.log('Producto actualizado:', event);
});
```

## Estructura de archivos Hummingbird

*Arbol de directorios*

```text
themes/hummingbird/
├── config/
│   └── theme.yml            # Identidad del tema, parent: null
├── assets/
│   ├── css/                 # CSS compilado
│   ├── js/                  # JS compilado
│   └── img/                 # Imagenes del tema
├── _dev/                    # Fuentes para compilar
│   ├── css/                 # SCSS sources
│   ├── js/                  # JS modules
│   └── webpack.config.js    # Config de build
├── templates/
│   ├── layouts/             # layout-both-columns.tpl, layout-full-width.tpl
│   ├── _partials/           # header.tpl, footer.tpl, head.tpl
│   ├── catalog/             # product.tpl, listing/
│   ├── checkout/            # cart.tpl, checkout-process.tpl
│   ├── customer/            # my-account.tpl, identity.tpl
│   ├── cms/                 # page.tpl, sitemap.tpl
│   └── errors/              # 404.tpl, maintenance.tpl
└── modules/                 # Overrides de templates de modulos
```

## Child theme de Hummingbird

*config/theme.yml para child theme*

```yaml
parent: hummingbird
name: mi_tema_custom
display_name: Mi Tema Personalizado
version: 1.0.0
author:
  name: Mi Empresa
  url: https://miempresa.es
assets:
  use_parent_assets: true
  css:
    all:
      - id: custom-theme
        path: assets/css/custom.css
        media: all
        priority: 200
```

## Adaptar modulos al tema

*Detectar tema activo y adaptar clases*

```php
// En tu modulo, detectar si el tema es Hummingbird
$isHummingbird = ($this->context->shop->theme_name === 'hummingbird');

// Asignar clases CSS segun el tema
$this->context->smarty->assign([
    'btn_class'    => $isHummingbird ? 'btn btn-primary' : 'btn btn-primary btn-block',
    'sr_class'     => $isHummingbird ? 'visually-hidden' : 'sr-only',
    'margin_class' => $isHummingbird ? 'ms-2' : 'ml-2',
]);

// O en la template Smarty:
{if $page.theme_name == 'hummingbird'}
    <div class="d-grid"><button class="btn btn-primary">{l s='Add to Cart'}</button></div>
{else}
    <button class="btn btn-primary btn-block">{l s='Add to Cart'}</button>
{/if}
```

## Compilar assets — Node.js 20

PS 9.1 requiere **Node.js 20.19.5** para compilar los assets del tema Hummingbird:

*Compilar assets de Hummingbird*

```bash
# Instalar dependencias
cd themes/hummingbird/_dev
npm install

# Build de produccion
npm run build

# Watch mode (desarrollo)
npm run watch

# Si usas nvm:
nvm use 20
npm run build
```


---

*Fuente: [https://ayudaprestashop.es/ps91/hummingbird-bs5](https://ayudaprestashop.es/ps91/hummingbird-bs5). Version Markdown generada automaticamente para consumo por LLMs.*