Comment forcer le vidage du cache CSS côté client?

Supposons que nous ayons modifié de nombreuses fonctionnalités pour le module (modèles, mises en page, CSS) et que nous allons transférer ces modifications vers le site de production, mais de nombreux clients ont mis en cache CSS dans leurs navigateurs. Alors voici une question. Comment forcer le vidage du cache CSS du client et éviter de renommer les fichiers ( styles.css-> styles-v2.css). Il y a un moyen logique mais cela ne fonctionne pas dans Magento, car il vérifie le fichier existant (par la façon dont cette méthode fonctionne pour les fichiers JS), voir ci-dessous:

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

Des idées?

Une solution consiste à permettre la fusion de CSS. Ensuite, vous pouvez simplement vider le cache et créer un nouveau fichier fusionné avec un nouveau nom de fichier.

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

Autant que je sache, le code de hachage du fichier CSS fusionné reste le même, même si les fichiers sous-jacents ont été modifiés. Ce n'est que si de nouveaux fichiers sont ajoutés à l'ensemble des fichiers fusionnés que le hachage change. - @Alex

Une autre façon de gérer cela consiste à utiliser le fichier layout.xml,

il suffit de les mettre dans votre page/html/head.phtml

Vous pouvez également créer un bloc contenant une <style>balise avec un numéro de version et l'insérer dans le code XML de manière à pouvoir le charger uniquement sur des pages spécifiques tout en conservant les dispositions XML.

Vous pouvez utiliser le module OpenSource Aoe_JsCssTstamp qui ajoute des informations d'horodatage aux fichiers CSS fusionnés. Les horodatages des fichiers CSS simples (non fusionnés) ne sont pas encore pris en charge, mais ils seraient faciles à implémenter.

Il existe une extension gratuite sur github 'Magento Cachebuster' qui fait exactement cela. Il re

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

Le module fournit le cachebusting en modifiant automatiquement l'URI créé par Magento pour> les fichiers statiques en ajoutant l'horodatage du fichier au nom du fichier:

Avant: http://www.example.com/js/varien/js.js Après: http://www.example.com/js/varien/js.1324429472.js

J'utilise ma propre extension Speedster Advanced pour cela. Mais le principe de base est que le nom des fichiers fusionnés css et js inclut l’horodatage du dernier fichier modifié - voir Mage_Core_Model_Design_Package::getMergedCssUrl(). Chaque fois que vous modifiez l'un des fichiers css, un nouveau nom de fichier est créé, ce qui force les navigateurs à demander le nouveau fichier au lieu de réutiliser la version mise en cache. Puisque votre bloc de tête est peut-être mis en cache, une actualisation du cache de Magento est nécessaire.

J'ai également implémenté un cache buster pour les fichiers CSS. La meilleure façon, je suppose, est d'étendre Mage_Page_Block_Html_Head et d' utiliser la fonction ci-dessous et de mettre à jour le tableau $ skinItems avec les modifications souhaitées.

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

}

Vous avez l'inspiration d'ici. La source

Il existe une solution de contournement simple mais fastidieuse qui ne nécessite aucun plug-in et utilise uniquement les fonctionnalités intégrées de Magento - utile si vous devez simplement le faire rapidement sur un site existant sans vouloir risquer d'installer plus de code.

L'idée est que vous pouvez utiliser le système CSS fusionné pour générer un nom de fichier contournant le cache.

Comme le nom de fichier CSS fusionné est un hachage de tous les fichiers fusionnés, il vous suffit d'ajouter un fichier CSS vierge supplémentaire dans le thème avec un horodatage pour un nom.

Alors:

1. Activer les fichiers CSS de fusion dans Configuration> Avancé> Développeur
2. Dans vos mises en page de thèmes, trouvez où vous ajoutez des fichiers CSS à l’en-tête (généralement page.xml) et ajoutez un fichier de feuille de style supplémentaire, appelez-le comme vous le souhaitez tant que le nom est unique, par exemple <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. Dans votre dossier CSS skin, créez un nouveau fichier css portant ce nom. Pour le contenu du fichier, je viens de mettre un commentaire indiquant le contenu du fichier.

Maintenant, appuyez dessus et videz le cache de magento, le fichier CSS fusionné aura désormais un nom différent et vos caches seront détruits!

C'est fastidieux, car chaque fois que vous voulez décomposer le cache, vous devez changer ce nom de fichier, mais il ne nécessite rien d'autre que des fonctionnalités intégrées de Magento, il est donc pratique si vous vous retrouvez coincé et avez besoin d'une solution rapide!

=> Au lieu d'utiliser ce code:

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

=> Essayez d'utiliser ce code:

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

Mais ce n'est pas très gentil ...

J'ai trouvé un module qui ajoutera une chaîne de requête à la fin de toutes les dispositions CSS et JS en XML. La chaîne de requête est configurable à partir de l'administrateur.

https://github.com/mklooss/Loewenstark_Head

L'idée de base est de remplacer l' _prepareStaticAndSkinElementsinclusion d'une chaîne de requête, comme indiqué dans le module ci-dessous.

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 je comprends la solution proposée dans votre question, vous pouvez le faire avec un mod léger dans un fichier core ( n'éditez pas réellement le fichier core ):

Mage / Page / Block / Html / Head.php

Ajoutez quelque chose comme? V = 1 à la ligne 198 pour que tous les fichiers css aient ceci ajouté:

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

Je pense que Fooman Speedster Advanced ( http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html ) pourrait être une solution:

"Entièrement automatisé une fois installé, avec versioning automatique lorsque les fichiers Javascript / CSS sont mis à jour"

J'ai construit un module gratuit pour cela:

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

Faites-moi savoir si cela ne fonctionne pas comme prévu, mais je l'ai construit de sorte que les fichiers js et css combinés aient un hachage différent si le contenu de l'un des fichiers concaténés a été modifié. Par défaut, Magento ne modifie le hachage du fichier combiné que si le nom de fichier de l'un des fichiers inclus a été modifié.

MISE À JOUR

J'ai également créé un module de minify gratuit et simple pour ceux qui y croient.

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

Fabrizio Branca a créé un très bon module qui fait exactement ce qui vous intéresse. Il s'appelle AOE_JsCSSTStamp . Ce qu'il fait? Il ajoute un horodatage aux ressources CSS et JS. Lorsque vous videz le cache CSS / JS, les horodatages sont recréés.

Le navigateur verra un nom de fichier différent - c'est pourquoi il retéléchargera à nouveau les ressources et sera servi avec le plus récent au lieu d'être mis en cache dans le navigateur.

Il suffit d’éditer la méthode getCssJsHtml dans Mage_Page_Block_Html_Head , d’ajouter une chaîne comme celle-ci pendant quelques jours après la modification css et c’est tout… ça fonctionne tout simplement.

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

Quelques années plus tard et ne trouvant aucune extension utile qui ne fusionne pas les fichiers et qui est simple, j'ai créé la mienne. L'idée principale est qu'après avoir vidé le cache, le timestamp sera mis à jour. En d'autres termes, lorsque vous en changez css/js, vider le cache et l'horodatage sera mis à jour.

Le code source est ici -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Fonctionne sur la version 1.9+ . Pas sûr des versions plus anciennes, cependant, mais probablement aussi devrait fonctionner.

Faites une copie de votre thème avec un nouveau nom (themev2) - skin et application / design, etc. Choisissez ensuite le nouveau thème dans admin.