Come forzare lo svuotamento della cache CSS sul lato client?

Supponiamo di aver modificato molte funzionalità per il modulo (modelli, layout, CSS) e di spostare queste modifiche nel sito di produzione, ma molti clienti hanno memorizzato nella cache CSS nei loro browser. Quindi ecco una domanda. Come forzare lo svuotamento della cache CSS del client ed evitare la ridenominazione dei file ( styles.css-> styles-v2.css). C'è un modo logico ma non funziona in Magento, perché controlla il file esistente (dal modo in cui questo metodo funziona per i file JS), vedi sotto:

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

Qualche idea?

Un modo per gestirlo è consentire la fusione dei CSS. Quindi potresti semplicemente cancellare la cache e un nuovo file unito verrebbe creato con un nuovo nome di file.

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

Per quanto ne so, il codice hash del file CSS unito rimane lo stesso anche se i file sottostanti sono cambiati - solo se vengono aggiunti nuovi file all'insieme di file uniti, l'hash cambia. - @Alex

Un altro modo di gestirlo è invece di utilizzare layout.xml,

inseriscili nel tuo page/html/head.phtml

Oppure crea un blocco che contiene un <style>tag con il numero di versione e inseriscilo nell'XML nella tua testa in modo da poterlo caricare solo su pagine specifiche e continuare a utilizzare i layout XML.

È possibile utilizzare il modulo OpenSource Aoe_JsCssTstamp che aggiunge informazioni di data e ora ai file CSS uniti. I timestamp per file CSS semplici (non uniti) non sono ancora supportati, ma sarebbe facile da implementare.

Esiste un'estensione gratuita su Github 'Magento Cachebuster' che fa esattamente questo. E '

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

Il modulo fornisce il busting della cache modificando automaticamente l'URI creato da Magento per> file statici aggiungendo il timestamp del file al nome file:

Prima: http://www.example.com/js/varien/js.js Dopo: http://www.example.com/js/varien/js.1324429472.js

Per questo uso la mia estensione Speedster Advanced. Ma il principio di base è che il nome dei file css e js uniti include il timestamp dell'ultimo file modificato - vedi Mage_Core_Model_Design_Package::getMergedCssUrl(). Ogni volta che modifichi uno qualsiasi dei file css viene creato un nuovo nome file che induce i browser a richiedere il nuovo file invece di riutilizzare la versione memorizzata nella cache. Poiché il blocco di memoria potrebbe essere memorizzato nella cache, è necessario un aggiornamento della cache di Magento.

Ho anche implementato un buster della cache per i file CSS. Il modo migliore immagino sia estendere Mage_Page_Block_Html_Head e cavalcare la funzione di seguito e aggiornare l' array $ skinItems con le modifiche desiderate.

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

}

Ho preso l'ispirazione da qui. fonte

Esiste una soluzione semplice ma ingombrante che non richiede alcun plug-in e utilizza solo le funzionalità di Magento integrate, utile se devi solo farlo rapidamente su un sito esistente senza voler rischiare di installare altro codice.

L'idea è che è possibile utilizzare il sistema CSS unito per generare un nome file di busting della cache.

Poiché il nome del file CSS unito è un hash di tutti i file che vengono uniti, è sufficiente aggiungere un ulteriore file CSS vuoto nel tema con un timbro data per un nome.

Così:

1. Attiva Unisci file CSS in Configurazione> Avanzate> Sviluppatore
2. Nei layout dei temi trova dove aggiungi i file CSS alla testa (in genere page.xml) e aggiungi un file di foglio di stile extra, chiamalo come vuoi purché il nome sia univoco, ad es. <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. Nella tua skin la cartella CSS crea un nuovo file CSS con quel nome, per il contenuto del file ho appena messo un commento dicendo a cosa serve il file

Ora spingi dal vivo e svuota la cache di Magento, il file CSS unito avrà ora un nome diverso e le tue cache verranno eliminate!

È ingombrante poiché ogni volta che vuoi rompere la cache devi cambiare quel nome di file, ma non richiede nient'altro che funzionalità Magento integrate, quindi è utile se ti trovi bloccato e hai bisogno di una soluzione rapida!

=> Invece di utilizzare questo codice:

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

=> Prova a usare questo codice:

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

Ma non è molto bello ...

Ho trovato un modulo che aggiungerà una stringa di query alla fine di tutti i CSS e JS nei layout xml. La stringa di query è configurabile dall'amministratore.

https://github.com/mklooss/Loewenstark_Head

L'idea di base è quella di sovrascrivere _prepareStaticAndSkinElementsper includere una stringa di query, come fatto nel modulo, mostrato di seguito.

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 capisco la soluzione proposta nella tua domanda, puoi farlo con una leggera mod in un file principale ( non modificare effettivamente il file principale ):

Mage / Pagina / blocchi / Html / head.php

Aggiungi qualcosa come? V = 1 alla riga 198, quindi tutti i file CSS hanno questo allegato:

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

Penso che Fooman Speedster Advanced ( http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html ) potrebbe essere una soluzione:

"Completamente automatizzato una volta installato, con controllo delle versioni automatico quando i file Javascript / CSS vengono aggiornati"

Ho creato un modulo gratuito per questo:

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

Per favore fatemi sapere se non funziona come previsto ma l'ho costruito in modo che i file js e css combinati abbiano un hash diverso se il contenuto di uno dei file concatenati è cambiato. Per impostazione predefinita, Magento modifica l'hash del file combinato solo se il nome file di uno dei file inclusi è cambiato.

AGGIORNARE

Ho anche creato un modulo minify gratuito e semplice per quelli di voi che ci credono.

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

C'è un modulo davvero carino creato da Fabrizio Branca che fa esattamente quello che ti interessa. Si chiama AOE_JsCSSTStamp . Cosa fa? Aggiunge un timestamp alle risorse CSS e JS. Quando svuoti la cache CSS / JS, vengono ricreati i timestamp.

Il browser visualizzerà diversi nomi di file, ecco perché scaricherà nuovamente le risorse e verrà servito con quello più recente anziché memorizzato nella cache.

Basta modificare il metodo getCssJsHtml in Mage_Page_Block_Html_Head , aggiungere una stringa come questa per alcuni giorni dopo la modifica del CSS e questo è tutto ... funziona semplicemente

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

Pochi anni dopo e non trovando alcuna estensione utile che non unisse i file ed è semplice, ho creato il mio. L'idea principale è che dopo aver svuotato la cache, aggiornerà il Timestamp. Quindi, in altre parole, quando ne cambi alcuni css/js, basta scaricare cache e Timestamp verranno aggiornati.

Il codice sorgente è qui -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Funziona con la versione 1.9+ . Non sono sicuro delle versioni precedenti, tuttavia, molto probabilmente dovrebbe funzionare anche.

Crea una copia del tuo tema con un nuovo nome (themev2) - sia skin che app / design, ecc. Quindi scegli il nuovo tema in admin.