Comment forcer le cache CSS affleurant côté client?

magento.stackexchange https://magento.stackexchange.com/questions/60

  •  16-10-2019
  •  | 
  •  

Question

Supposons que nous avons changé beaucoup de fonctionnalités pour le module (modèles, schémas, CSS) et nous allons déplacer ces changements sur le site de production, mais beaucoup de clients ont mis en cache CSS dans leur navigateur. Voici donc une question. Comment forcer le cache CSS du client et éviter flush changement de nom de fichier (le styles.css -> styles-v2.css). Il y a une façon logique, mais il 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>

Toutes les idées?

Était-ce utile?

La solution

Une façon de faire face à ce permet à la fusion des CSS. Ensuite, vous pouvez simplement effacer le cache et un nouveau fichier fusionné serait créé avec un nouveau nom de fichier.

  

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

     

Pour autant que je sache, le code de hachage des séjours de fichier CSS fusionné le même   même si les fichiers sous-jacents ont changé - que si de nouveaux fichiers sont ajoutés à   l'ensemble des fichiers fusionnés, le hachage change.   - @ Alex

Une autre façon de traiter ce problème est au lieu d'utiliser le layout.xml,

  

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

Ou créer un bloc qui contient une balise <style> avec le numéro de version et de le mettre dans le fichier XML dans votre tête afin que vous puissiez avoir charger uniquement sur des pages spécifiques et toujours coller à l'aide des mises en page XML.

Autres conseils

Vous pouvez utiliser le module OpenSource Aoe_JsCssTstamp qui ajoute des informations d'horodatage des fichiers CSS fusionnés. Timestamps pour simples (non fusionnées) les fichiers CSS sont pas encore pris en charge cependant mais ce serait facile à mettre en œuvre.

Il y a une extension gratuite sur github « Magento Cachebuster » qui fait exactement cela. Il re

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

  

Le module fournit en modifiant automatiquement contournement du cache l'URI créé par Magento pour> 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'utiliser mon propre extension Speedster avancée pour cela. Mais le principe de base est que le nom des fichiers CSS et js fusionné comprend 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éé à l'origine des navigateurs pour demander le nouveau fichier au lieu de réutiliser la version mise en cache. Étant donné que votre bloc de tête peut être mis en mémoire cache une actualisation du cache Magento est nécessaire.

J'ai également mis en place un briseur de cache pour les fichiers css. Meilleure estimation I façon est d'étendre Mage_Page_Block_Html_Head et plus monter la fonction ci-dessous et mise à jour $ avec vos 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);

}

Got l'inspiration d'ici.

Il y a une simple mais lourde solution qui ne nécessite pas de plug-ins et juste utilise construit dans les capacités Magento -. Utile si vous avez juste à le faire rapidement sur un site existant sans vouloir installer un risque plus code

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

Comme le nom du fichier CSS fusionné est un hachage de tous les fichiers qui sont fusionnés ensemble, vous ajoutez simplement un fichier css blanc supplémentaire dans le thème avec un timbre de date pour un nom.

  1. Activer les fichiers CSS de fusion dans Configuration> Avancé> Développeur
  2. Dans vos mises en page à thème trouver où vous ajoutez des fichiers CSS à la tête (généralement page.xml) et ajouter un fichier stylesheet supplémentaire, appelez tout ce que vous voulez aussi longtemps que le nom est unique par exemple <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
  3. Dans votre CSS peau dossier, créez un nouveau fichier css avec ce nom, pour le contenu du fichier que je viens de mettre un commentaire en disant que le fichier est pour

Maintenant que pousser en direct et rincer le cache magento, le fichier css fusionné aura maintenant un nom différent et vos caches seront Busted!

de lourdeur que chaque fois que vous voulez buste du cache dont vous avez besoin de changer ce nom de fichier, mais il nécessite rien d'autre que construit dans les capacités Magento il est donc pratique si vous vous retrouvez coincé et ont 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 agréable ...

Je trouve un module qui ajoutera une chaîne de requête à la fin de tous les CSS et JS mises en page XML. La chaîne de requête est configurable de l'administrateur.

https://github.com/mklooss/Loewenstark_Head

L'idée de base consiste à substituer _prepareStaticAndSkinElements pour inclure une chaîne de requête, comme cela se fait dans le module, illustré 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 bien la solution proposée dans votre question, vous pouvez le faire avec un léger mod dans un fichier de base ( ne fait pas modifier le fichier de base ):

  

Mage / Page / Bloc / Html / head.php

Ajouter quelque chose comme v = 1 à la ligne 198 de sorte que tous les fichiers ont css cette annexe: 

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

Je pense que Fooman Speedster avancée ( http: //www.magentocommerce. com / magento-connexion / Fooman-speedsteradvanced-4030.html ) pourrait être une solution:

« entièrement automatisé une fois installé, avec versionnage automatique lorsque Javascript / fichiers CSS sont mis à jour »

J'ai construit un module gratuit pour ceci:

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

S'il vous plaît laissez-moi savoir si elle ne fonctionne pas comme prévu, mais je l'ai construit pour que les js combinés et les fichiers CSS auront un hachage différent si le contenu de l'un des fichiers concaténés a changé. Par défaut Magento ne change que le hachage du fichier combiné si le nom de l'un des fichiers inclus a changé.

UPDATE

J'ai aussi fait un module rapetisser libre et simple pour ceux d'entre vous qui y croient.

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

Il y a un module vraiment sympa créé par Fabrice Branca qui fait exactement la chose que vous intéresse. Il est appelé AOE_JsCSSTStamp . Ce qu'il fait? Il ajoute un horodatage à la fois CSS et JS ressources. Lorsque vous cache CSS / JS affleurant alors les horodateurs sont recréés.

Le navigateur voir nom différent - c'est pourquoi il retélécharger les ressources à nouveau et être servi avec la plus fraîche au lieu de un cache dans le navigateur.

Il suffit de modifier la méthode getCssJsHtml Mage_Page_Block_Html_Head , ajoutez une chaîne comme celui-ci pendant quelques jours après le contrôle css et c'est tout ... il fonctionne 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 est simple, j'ai créé mon propre. L'idée principale est que, après le cache de rinçage, il mettra à jour le timestamp. Donc, en d'autres termes -. Lorsque vous changez une css/js, juste flush cache et Timestamp seront mis à jour

  

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

     

Travaux sur 1.9 + Version. Pas sûr les anciennes versions, cependant, mais   la plupart devraient probablement travailler aussi bien.

Faites une copie de votre thème avec un nouveau nom (themev2) -. La peau et app / design, etc. Choisissez ensuite le nouveau thème dans l'admin

Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange
scroll top