Sin impuesto Con impuesto

Volver atrás al instante en PrestaShop: Cache-Control y bfcache

Gustavo compartió un cambio de cabeceras que hace instantáneo el botón atrás en el catálogo: sin Cache-Control no-store, el navegador puede usar su caché de atrás y adelante. Explicamos por qué funciona y cómo hacerlo con un módulo, dejando fuera carrito y cuenta.

Equipo Rekire
Actualizado: 26/11/2024 7
Volver atrás al instante en PrestaShop: Cache-Control y bfcache
Compartir:

Gustavo lo presentó en el grupo como «el truco que vas a alucinar»: en una tienda donde la gente entra en un producto, vuelve a la categoría, entra en otro y vuelve otra vez, un cambio de cuatro líneas en las cabeceras hace que el botón atrás del navegador sea instantáneo. Varios compañeros lo probaron y les funcionó. Te explicamos por qué y cómo hacerlo sin tocar el núcleo ni las páginas privadas.

La caché de atrás y adelante

Los navegadores tienen una back/forward cache (bfcache): cuando sales de una página, la guardan entera en memoria y, si pulsas atrás, la restauran al momento, con el scroll donde estaba y sin pedir nada al servidor. Pero hay cosas que lo impiden, y una de las más habituales es que la página llegue con la cabecera Cache-Control: no-store.

Muchas tiendas PrestaShop envían esa cabecera, o no-cache y Pragma: no-cache, en todas sus páginas: a veces por la configuración de PHP y a veces por algún módulo. Resultado: cada vez que el cliente pulsa atrás, la categoría se vuelve a generar y a descargar entera.

El cambio de Gustavo

Gustavo lo hizo en classes/controller/FrontController.php, dentro de la función smartyOutputContent, justo antes de que se imprima el HTML: quitar las cabeceras Cache-Control y Pragma que traiga la respuesta y enviar en su lugar Cache-Control: max-age=0, must-revalidate, private.

  • private: solo el navegador del cliente puede guardar la página; ni un proxy ni una CDN.
  • max-age=0, must-revalidate: en una visita normal, el navegador vuelve a preguntar al servidor, así que nadie ve precios o stock viejos al entrar.
  • Sin no-store, el navegador puede usar la bfcache cuando se pulsa atrás.

Los que lo probaron confirmaron el efecto al momento. Uno de ellos quitó una de las líneas de Gustavo y le siguió funcionando igual.

Hazlo sin tocar el núcleo

Modificar FrontController.php tiene un problema: la próxima actualización de PrestaShop se lo lleva por delante. En ese mismo punto del código hay un hook, actionOutputHTMLBefore, que se ejecuta justo antes de imprimir la página, cuando todavía se pueden cambiar las cabeceras. Un módulo mínimo:

public function install()
{
    return parent::install() && $this->registerHook('actionOutputHTMLBefore');
}

public function hookActionOutputHTMLBefore($params)
{
    $pagina = isset($this->context->controller->php_self) ? (string) $this->context->controller->php_self : '';

    // Páginas con datos del cliente: se quedan como están
    $privadas = ['cart', 'order', 'order-confirmation', 'authentication', 'registration', 'password',
        'my-account', 'identity', 'addresses', 'address', 'history', 'order-detail',
        'order-follow', 'order-return', 'order-slip', 'discount', 'guest-tracking'];

    if ($pagina === '' || in_array($pagina, $privadas, true)) {
        return;
    }

    header_remove('Pragma');
    header('Cache-Control: max-age=0, must-revalidate, private');
}

Por qué dejar fuera las páginas privadas

Gustavo lo aplicó a todo el front y en su tienda funcionaba. Nosotros recomendamos excluir el carrito, el checkout y la cuenta del cliente:

  • Si alguien cierra sesión en un ordenador compartido, otra persona podría pulsar atrás y ver una página de su cuenta restaurada desde memoria.
  • En el carrito y el checkout quieres que cada vista refleje el estado real.

El catálogo (portada, categorías, productos, búsqueda, marcas) es donde está la ganancia, y no tiene datos personales. Las páginas de otros módulos, que no tienen php_self, el ejemplo también las deja como estaban.

Antes de dejarlo en producción

  1. Pruébalo con el modo depuración activo y comprueba que no salen avisos de cabeceras ya enviadas.
  2. Añade un producto al carrito, pulsa atrás y comprueba que el contador del carrito se ve bien. La página restaurada es la de antes, y algunos temas no lo refrescan solos.
  3. Si usas una caché de página completa o un proxy, revisa que respeta private y no empieza a servir páginas de un cliente a otro.
  4. En las herramientas de desarrollo de Chrome, en la pestaña Application, hay un apartado para probar la bfcache: te dice si una página se puede restaurar y, si no, por qué.

Esto salió en @PrestashopEsp, la mayor comunidad PrestaShop de España en Telegram. Ver la conversación

Cargando...
Cookies
Volver arriba