🐦 Hummingbird + Bootstrap 5 — PrestaShop 9

// 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 })

// 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);
});

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

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

// 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}

# 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