Como forçar a descarga do cache CSS no lado do cliente?

Suponha que alteramos muitas funcionalidades do módulo (modelos, layouts, CSS) e vamos mover essas alterações para o site de produção, mas muitos clientes armazenaram o CSS em cache em seus navegadores. Então aqui está uma pergunta. Como forçar a descarga do cache CSS do cliente e evitar a renomeação de arquivos ( styles.css-> styles-v2.css). Existe uma maneira lógica, mas ela não funciona no Magento, porque verifica o arquivo existente (pela maneira como esse método funciona para arquivos JS), veja abaixo:

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

Alguma ideia?

Uma maneira de lidar com isso é permitir a mesclagem de CSS. Em seguida, basta limpar o cache e um novo arquivo mesclado será criado com um novo nome de arquivo.

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

Até onde eu sei, o código de hash do arquivo CSS mesclado permanece o mesmo, mesmo que os arquivos subjacentes tenham sido alterados - somente se novos arquivos forem adicionados ao conjunto de arquivos mesclados, o hash será alterado. - @Alex

Outra maneira de lidar com isso é em vez de usar o layout.xml,

basta colocá-los no seu page/html/head.phtml

Ou crie um bloco que contenha uma <style>tag com o número da versão e coloque-o no XML em sua cabeça para que você possa carregá-lo apenas em páginas específicas e continuar usando os layouts de XML.

Você pode usar o Módulo OpenSource Aoe_JsCssTstamp, que adiciona informações de registro de data e hora aos arquivos CSS mesclados. Os carimbos de data e hora para arquivos CSS simples (não mesclados) ainda não são suportados, mas isso seria fácil de implementar.

Existe uma extensão gratuita no github 'Magento Cachebuster' que faz exatamente isso. É re

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

O módulo fornece armazenamento em cache, alterando automaticamente o URI criado pelo Magento para arquivos estáticos, adicionando o registro de data e hora do arquivo ao nome do arquivo:

Antes: http://www.example.com/js/varien/js.js Depois: http://www.example.com/js/varien/js.1324429472.js

Eu uso minha própria extensão Speedster Advanced para isso. Mas o princípio básico é que o nome dos arquivos css e js mesclados inclui o registro de data e hora do último arquivo modificado - consulte Mage_Core_Model_Design_Package::getMergedCssUrl(). Sempre que você edita um dos arquivos css, um novo nome de arquivo é criado, fazendo com que os navegadores solicitem o novo arquivo em vez de reutilizar a versão em cache. Como seu bloco principal pode ser armazenado em cache, é necessária uma atualização do cache do Magento.

Também implementei um cache buster para arquivos css. A melhor maneira, eu acho, é estender Mage_Page_Block_Html_Head e percorrer a função abaixo e atualizar o array $ skinItems com as alterações desejadas.

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

}

Tenho a inspiração daqui. Fonte

Existe uma solução alternativa simples, mas complicada, que não requer plugins e apenas utiliza recursos internos do Magento - útil se você precisar fazer isso rapidamente em um site existente sem correr o risco de instalar mais código.

A ideia é que você possa usar o sistema CSS mesclado para gerar um nome de arquivo com impedimento de cache.

Como o nome do arquivo CSS mesclado é um hash de todos os arquivos que são mesclados, basta adicionar um arquivo css em branco extra ao tema com um carimbo de data para um nome.

Assim:

1. Ative Mesclar arquivos CSS em Configuração> Avançado> Desenvolvedor
2. Nos layouts de seu tema, encontre onde você adiciona arquivos CSS ao cabeçalho (normalmente page.xml) e adicione um arquivo de folha de estilo extra, chame-o como quiser, desde que o nome seja único, por exemplo <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. Na pasta CSS da sua pele, crie um novo arquivo css com esse nome. Para o conteúdo do arquivo, basta colocar um comentário dizendo para que serve o arquivo

Agora empurre isso ao vivo e limpe o cache do magento, o arquivo css mesclado agora terá um nome diferente e seus caches serão eliminados!

É complicado, pois toda vez que você deseja interromper o cache, é necessário alterar o nome do arquivo, mas não requer nada além de recursos internos do Magento; portanto, é útil se você ficar preso e precisar de uma solução rápida!

=> Em vez de usar este código:

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

=> Tente 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>

Mas não é muito legal ...

Encontrei um módulo que anexará uma string de consulta ao final de todos os CSS e JS nos layouts de XML. A sequência de consultas é configurável a partir do administrador.

https://github.com/mklooss/Loewenstark_Head

A idéia básica é substituir _prepareStaticAndSkinElementspara incluir uma string de consulta, conforme feito no módulo, mostrado abaixo.

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

Se eu entendo a solução proposta em sua pergunta, você pode fazer isso com um leve mod para um arquivo principal ( na verdade, não edite o arquivo principal ):

Mago / Página / Bloco / Html / Head.php

Adicione algo como? V = 1 à linha 198 para que todos os arquivos css tenham este anexo:

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

Acho que o Fooman Speedster Advanced ( http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html ) poderia ser uma solução:

"Totalmente automatizado depois de instalado, com controle de versão automático quando os arquivos Javascript / CSS são atualizados"

Eu construí um módulo gratuito para isso:

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

Informe-me se ele não funcionar conforme o esperado, mas eu o criei para que os arquivos js e css combinados tenham um hash diferente se o conteúdo de um dos arquivos concatenados for alterado. Por padrão, o Magento altera apenas o hash do arquivo combinado se o nome do arquivo de um dos arquivos incluídos tiver sido alterado.

ATUALIZAR

Também criei um módulo minify gratuito e simples para aqueles que acreditam nele.

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

Existe um módulo muito bom, criado por Fabrizio Branca, que faz exatamente o que você está interessado. É chamado AOE_JsCSSTStamp . O que faz? Ele adiciona um carimbo de data / hora nos recursos CSS e JS. Quando você libera o cache CSS / JS, os carimbos de data e hora são recriados.

O navegador verá um nome de arquivo diferente - é por isso que fará o download novamente dos recursos e será servido com o mais novo, em vez de armazenado em cache no navegador.

Apenas edite o método getCssJsHtml em Mage_Page_Block_Html_Head , adicione uma string como essa por alguns dias após a edição do css e é tudo ... simplesmente 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
        );

Poucos anos depois, e não encontrando nenhuma extensão útil que não mesclasse arquivos e seja simples, criei minha própria. A idéia principal é que, após liberar o cache, ele atualizará o carimbo de data / hora. Portanto, em outras palavras - quando você alterar algumas css/js, limpe o cache e o Timestamp será atualizado.

O código fonte está aqui -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Funciona na versão 1.9+ . Não tenho certeza sobre as versões mais antigas, porém, mas provavelmente também deve funcionar.

Faça uma cópia do seu tema com um novo nome (themev2) - skin e app / design, etc. Em seguida, escolha o novo tema em admin.