¿Cómo forzar el vaciado de caché CSS en el lado del cliente?

Supongamos que cambiamos mucha funcionalidad para el módulo (plantillas, diseños, CSS) y vamos a mover estos cambios al sitio de producción, pero muchos clientes han almacenado en caché CSS en sus navegadores. Entonces aquí hay una pregunta. Cómo forzar el vaciado de la caché CSS del cliente y evitar el cambio de nombre del archivo ( styles.css-> styles-v2.css). Hay una forma lógica, pero no funciona en Magento, porque verifica el archivo existente (por cierto, este método funciona para archivos JS), vea a continuación:

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>  

¿Algunas ideas?

Una forma de lidiar con esto es habilitar la fusión de CSS. Luego, podría borrar el caché y se crearía un nuevo archivo combinado con un nuevo nombre de archivo.

System -> Configuration -> Developer -> CSS settings -> Merge CSS Files

Hasta donde sé, el código hash del archivo CSS combinado permanece igual incluso si los archivos subyacentes cambiaron, solo si se agregan nuevos archivos al conjunto de archivos combinados, el hash cambia. - @Alex

Otra forma de lidiar con esto es en lugar de usar el layout.xml,

solo ponlos en tu page/html/head.phtml

O cree un bloque que contenga una <style>etiqueta con el número de versión y póngalo en el XML en su cabeza para que pueda cargarlo solo en páginas específicas y seguir usando los diseños XML.

Puede usar el módulo OpenSource Aoe_JsCssTstamp que agrega información de marca de tiempo a los archivos CSS combinados. Sin embargo, las marcas de tiempo para archivos CSS simples (no fusionados) aún no son compatibles, pero esto sería fácil de implementar.

Hay una extensión gratuita en github 'Magento Cachebuster' que hace exactamente esto. Es re

https://github.com/gknoppe-guidance/magento-cachebuster

El módulo proporciona cachebusting al alterar automáticamente el URI creado por Magento para> archivos estáticos al agregar la marca de tiempo del archivo al nombre del archivo:

Antes: http://www.example.com/js/varien/js.js Después: http://www.example.com/js/varien/js.1324429472.js

Utilizo mi propia extensión Speedster Advanced para esto. Pero el principio básico es que el nombre de los archivos css y js combinados incluye la marca de tiempo del último archivo modificado - vea Mage_Core_Model_Design_Package::getMergedCssUrl(). Cada vez que edita cualquiera de los archivos CSS, se crea un nuevo nombre de archivo, lo que hace que los navegadores soliciten el nuevo archivo en lugar de reutilizar la versión en caché. Como su bloque de cabeza puede estar en caché, se necesita una actualización de caché de Magento.

También he implementado un buster de caché para archivos css. Supongo que la mejor manera es extender Mage_Page_Block_Html_Head y anular la función a continuación y actualizar la matriz $ skinItems con los cambios deseados.

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{
    $designPackage = Mage::getDesign();
    //$skinItems: contains all css
    foreach ($skinItems as $params => $rows) {
        foreach ($rows as $key=>$name) {
            $file = $designPackage->getFilename($name, array('_type' => 'skin'));
            $skinItems[$params][$key] = $name . "?fmt=" . filemtime($file);
        }
    }
    return parent::_prepareStaticAndSkinElements($format, $staticItems, $skinItems, $mergeCallback);

}

Tengo la inspiración de aquí. Fuente

Hay una solución simple pero engorrosa que no requiere ningún complemento y solo usa capacidades integradas de Magento, útil si solo tiene que hacerlo rápidamente en un sitio existente sin querer arriesgarse a instalar más código.

La idea es que puede usar el sistema CSS fusionado para generar un nombre de archivo de almacenamiento en caché.

Como el nombre del archivo CSS combinado es un hash de todos los archivos que se combinan, simplemente agregue un archivo css en blanco adicional al tema con una marca de fecha para un nombre.

Entonces:

1. Active Combinar archivos CSS en Configuración> Avanzado> Desarrollador
2. En los diseños de tema, encuentre dónde agrega archivos CSS al encabezado (generalmente page.xml) y agrega un archivo de hoja de estilo adicional, llámelo como desee siempre que el nombre sea único, por ejemplo <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. En su carpeta CSS de piel, cree un nuevo archivo CSS con ese nombre, para el contenido del archivo, solo pongo un comentario que dice para qué es el archivo

¡Ahora empuje eso en vivo y vacíe el caché de magento, el archivo css combinado ahora tendrá un nombre diferente y sus cachés serán destruidas!

Es engorroso, ya que cada vez que quieres reventar el caché necesitas cambiar ese nombre de archivo, pero no requiere nada más que las capacidades integradas de Magento, ¡así que es útil si te encuentras atascado y necesitas una solución rápida!

=> En lugar de usar este código:

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>

=> Intenta usar este código:

<reference name="head">
    <block type="core/text" name="foocss">
        <action method="setText">
            <css><![CDATA[<link rel="stylesheet" type="text/css" href="foo.css?1" media="all" />]]></css>
        </action>
    </block>
</reference>

Pero no es muy agradable ...

Encontré un módulo que agregará una cadena de consulta al final de todos los CSS y JS en diseños xml. La cadena de consulta es configurable desde el administrador.

https://github.com/mklooss/Loewenstark_Head

La idea básica es anular _prepareStaticAndSkinElementspara incluir una cadena de consulta, como se hizo en el módulo, que se muestra a continuación.

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{
    $version = Mage::getStoreConfig("design/head/meta_version_tag");
    $format = sprintf($format, "%s?v{$version}", "%s");
    return parent::_prepareStaticAndSkinElements($format, $staticItems, $skinItems, $mergeCallback);
}

Si entiendo la solución propuesta en su pregunta, puede hacerlo con un ligero mod en un archivo central (en realidad no edite el archivo central ):

Mage / Page / Block / Html / Head.php

Agregue algo como? V = 1 a la línea 198 para que todos los archivos css tengan esto adjunto:

$html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?v=1"%s />' . "\n",

Creo que Fooman Speedster Advanced ( http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html ) podría ser una solución:

"Totalmente automatizado una vez instalado, con versiones automáticas cuando se actualizan los archivos Javascript / CSS"

He creado un módulo gratuito para esto:

http://www.magentocommerce.com/magento-connect/frontend-flush-2048.html

Avíseme si no funciona como se esperaba, pero lo he creado para que los archivos js y css combinados tengan un hash diferente si el contenido de uno de los archivos concatenados ha cambiado. Por defecto, Magento solo cambia el hash del archivo combinado si el nombre de archivo de uno de los archivos incluidos ha cambiado.

ACTUALIZAR

También hice un módulo minify gratuito y simple para aquellos de ustedes que creen en él.

http://www.magentocommerce.com/magento-connect/minify-7771.html

Hay un módulo realmente bueno creado por Fabrizio Branca que hace exactamente lo que le interesa. Se llama AOE_JsCSSTStamp . ¿Que hace? Agrega una marca de tiempo a los recursos CSS y JS. Cuando vacías el caché CSS / JS, las marcas de tiempo se recrean.

El navegador verá un nombre de archivo diferente, es por eso que volverá a descargar los recursos nuevamente y se servirá con el más reciente en lugar de almacenarse en caché en el navegador.

Simplemente edite el método getCssJsHtml en Mage_Page_Block_Html_Head , agregue una cadena como esta durante unos días después de la edición css y eso es todo ... simplemente funciona

// static and skin css
        $html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?foo=WHAT_YOU_WANT_HERE"%s />' . "\n",
            empty($items['js_css']) ? [] : $items['js_css'],
            empty($items['skin_css']) ? [] : $items['skin_css'],
            $shouldMergeCss ? [Mage::getDesign(), 'getMergedCssUrl'] : null
        );

Pocos años después y al no encontrar ninguna extensión útil que no combine archivos y es simple, creé la mía. La idea principal es que después de vaciar la memoria caché, actualizará la marca de tiempo. En otras palabras, cuando cambie algunos css/js, simplemente vacíe el caché y se actualizará Timestamp.

El código fuente está aquí -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Funciona en la versión 1.9+ . Sin embargo, no estoy seguro acerca de las versiones anteriores, pero lo más probable es que también funcione.

Haga una copia de su tema con un nuevo nombre (themev2): diseño y aplicación / diseño, etc. Luego elija el nuevo tema en admin.