Wie erzwinge ich das Leeren des CSS-Cache auf der Clientseite?

Angenommen, wir haben viele Funktionen für das Modul (Vorlagen, Layouts, CSS) geändert und werden diese Änderungen auf die Produktionssite verschieben, aber viele Kunden haben CSS in ihren Browsern zwischengespeichert. Also hier ist eine Frage. So erzwingen Sie das Leeren des CSS-Cache des Clients und vermeiden das Umbenennen von Dateien ( styles.css-> styles-v2.css). Es gibt einen logischen Weg, aber er funktioniert in Magento nicht, da er die vorhandene Datei überprüft (wie diese Methode für JS-Dateien funktioniert), siehe unten:

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

Irgendwelche Ideen?

Eine Möglichkeit, damit umzugehen, besteht darin, das Zusammenführen von CSS zu ermöglichen. Dann könnten Sie einfach den Cache leeren und eine neue zusammengeführte Datei mit einem neuen Dateinamen erstellen.

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

Soweit ich weiß, bleibt der Hash-Code der zusammengeführten CSS-Datei selbst dann unverändert, wenn sich die zugrunde liegenden Dateien geändert haben - nur wenn neue Dateien zum Satz zusammengeführter Dateien hinzugefügt werden, ändert sich der Hash. -- @Alex

Eine andere Möglichkeit, damit umzugehen, ist die Verwendung der Datei layout.xml.

steck sie einfach in deine page/html/head.phtml

Oder erstellen Sie einen Block, der ein <style>Tag mit der Versionsnummer enthält, und fügen Sie ihn in das XML-Format in Ihrem Kopf ein, damit Sie ihn nur auf bestimmten Seiten laden und weiterhin die XML-Layouts verwenden können.

Sie können das OpenSource-Modul Aoe_JsCssTstamp verwenden, das den zusammengeführten CSS-Dateien Zeitstempelinformationen hinzufügt. Zeitstempel für einfache (nicht zusammengeführte) CSS-Dateien werden noch nicht unterstützt , dies wäre jedoch einfach zu implementieren.

Es gibt eine kostenlose Erweiterung für den Github 'Magento Cachebuster', die genau dies tut. Es ist re

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

Das Modul bietet Cachebusting, indem es den von Magento für> statische Dateien erstellten URI automatisch ändert, indem es den Zeitstempel der Datei zum Dateinamen hinzufügt:

Vorher: http://www.example.com/js/varien/js.js Nachher: http://www.example.com/js/varien/js.1324429472.js

Ich benutze dafür meine eigene Erweiterung Speedster Advanced. Das Grundprinzip ist jedoch, dass der Name der zusammengeführten CSS- und JS-Dateien den Zeitstempel der zuletzt geänderten Datei enthält - siehe Mage_Core_Model_Design_Package::getMergedCssUrl(). Jedes Mal, wenn Sie eine der CSS-Dateien bearbeiten, wird ein neuer Dateiname erstellt, sodass Browser die neue Datei anfordern, anstatt die zwischengespeicherte Version erneut zu verwenden. Da Ihr Headblock möglicherweise zwischengespeichert wird, ist eine Magento-Cache-Aktualisierung erforderlich.

Ich habe auch einen Cache-Buster für CSS-Dateien implementiert. Am besten erweitern Sie Mage_Page_Block_Html_Head und überschreiben die folgende Funktion. Aktualisieren Sie das Array $ skinItems mit den gewünschten Änderungen.

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

}

Habe mich von hier inspirieren lassen. Quelle

Es gibt eine einfache, aber umständliche Problemumgehung, die keine Plugins erfordert und nur integrierte Magento-Funktionen verwendet - nützlich, wenn Sie dies auf einer vorhandenen Site schnell erledigen müssen, ohne das Risiko eingehen zu müssen, weiteren Code zu installieren.

Die Idee ist, dass Sie das zusammengeführte CSS-System verwenden können, um einen Cache-Busting-Dateinamen zu generieren.

Da der Name der zusammengeführten CSS-Datei ein Hash aller zusammengeführten Dateien ist, fügen Sie dem Design einfach eine zusätzliche leere CSS-Datei mit einem Datumsstempel für einen Namen hinzu.

Damit:

1. Aktivieren Sie die Option CSS-Dateien zusammenführen unter Konfiguration> Erweitert> Entwickler
2. Suchen Sie in Ihren Design-Layouts, wo Sie CSS-Dateien zum Kopf hinzufügen (normalerweise page.xml) und fügen Sie eine zusätzliche Stylesheet-Datei hinzu. Nennen Sie sie beliebig, solange der Name eindeutig ist, z <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. Erstellen Sie in Ihrem Skin-CSS-Ordner eine neue CSS-Datei mit diesem Namen. Für den Dateiinhalt habe ich nur einen Kommentar eingefügt, in dem steht, wozu die Datei dient

Schieben Sie das jetzt live und leeren Sie den Magento-Cache. Die zusammengeführte CSS-Datei hat nun einen anderen Namen und Ihre Caches werden gelöscht!

Es ist umständlich, da Sie jedes Mal, wenn Sie den Cache auflösen möchten, diesen Dateinamen ändern müssen. Es sind jedoch nur integrierte Magento-Funktionen erforderlich. Es ist also praktisch, wenn Sie nicht weiterkommen und eine schnelle Lösung benötigen!

=> Anstatt diesen Code zu verwenden:

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

=> Versuchen Sie diesen Code zu benutzen:

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

Aber es ist nicht sehr schön ...

Ich habe ein Modul gefunden, das eine Abfragezeichenfolge an das Ende von CSS und JS in XML-Layouts anfügt. Die Abfragezeichenfolge kann vom Administrator konfiguriert werden.

https://github.com/mklooss/Loewenstark_Head

Die Grundidee besteht darin _prepareStaticAndSkinElements, eine Abfragezeichenfolge zu überschreiben , wie in dem unten gezeigten Modul ausgeführt.

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

Wenn ich die vorgeschlagene Lösung in Ihrer Frage verstehe, können Sie dies mit einem kleinen Mod an einer Kerndatei tun ( bearbeiten Sie die Kerndatei nicht wirklich ):

Mage / Page / Block / Html / Head.php

Fügen Sie in Zeile 198 so etwas wie? V = 1 hinzu, damit an alle CSS-Dateien Folgendes angehängt wird:

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

Ich denke, dass Fooman Speedster Advanced ( http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html ) eine Lösung sein könnte:

"Vollautomatisch nach der Installation mit automatischer Versionierung, wenn Javascript / CSS-Dateien aktualisiert werden"

Ich habe dafür ein kostenloses Modul gebaut:

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

Bitte lassen Sie mich wissen, wenn es nicht wie erwartet funktioniert, aber ich habe es so erstellt, dass die kombinierten js- und css-Dateien einen anderen Hash haben, wenn sich der Inhalt einer der verketteten Dateien geändert hat. Standardmäßig ändert Magento den Hash der kombinierten Datei nur, wenn sich der Dateiname einer der enthaltenen Dateien geändert hat.

AKTUALISIEREN

Ich habe auch ein kostenloses und einfaches Minify-Modul für diejenigen von euch erstellt, die daran glauben.

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

Es gibt ein wirklich nettes Modul von Fabrizio Branca, das genau das macht, woran Sie interessiert sind. Es heißt AOE_JsCSSTStamp . Was es macht? Es fügt CSS- und JS-Ressourcen einen Zeitstempel hinzu. Wenn Sie den CSS / JS-Cache leeren, werden die Zeitstempel neu erstellt.

Im Browser wird ein anderer Dateiname angezeigt. Aus diesem Grund werden die Ressourcen erneut heruntergeladen und es wird der neueste bereitgestellt, anstatt im Browser zwischengespeichert zu werden.

Bearbeiten Sie einfach die Methode getCssJsHtml in Mage_Page_Block_Html_Head , fügen Sie nach der CSS-Bearbeitung für einige Tage eine Zeichenfolge wie diese hinzu, und das ist alles ... es funktioniert einfach

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

Einige Jahre später habe ich meine eigene Erweiterung erstellt, die keine sinnvolle Erweiterung findet, mit der Dateien nicht zusammengeführt werden können. Die Hauptidee ist, dass nach dem Leeren des Caches der Zeitstempel aktualisiert wird. Mit anderen Worten: Wenn Sie Änderungen vornehmen css/js, werden nur der Cache und der Zeitstempel aktualisiert.

Der Quellcode ist hier -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Funktioniert auf 1.9+ Version. Bei älteren Versionen bin ich mir nicht sicher, sollte aber höchstwahrscheinlich auch funktionieren.

Erstellen Sie eine Kopie Ihres Themas mit einem neuen Namen (themev2) - sowohl Skin als auch App / Design usw. Wählen Sie dann das neue Thema in admin aus.