Bagaimana cara memaksa cache CSS flush di sisi klien?

Misalkan kita telah mengubah banyak fungsi untuk modul (templat, layout, CSS) dan kami akan memindahkan perubahan ini ke situs produksi, tetapi banyak pelanggan yang telah menembolokkan CSS di browser mereka. Jadi ini pertanyaannya. Cara memaksa cache CSS klien flush dan menghindari penggantian nama file ( styles.css-> styles-v2.css). Ada satu cara logis tetapi tidak berfungsi di Magento, karena memeriksa file yang ada (dengan cara metode ini bekerja untuk file JS), lihat di bawah:

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

Ada ide?

Salah satu cara menangani hal ini adalah memungkinkan penggabungan CSS. Kemudian Anda bisa menghapus cache dan file gabungan baru akan dibuat dengan nama file baru.

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

Sejauh yang saya tahu, kode hash dari file CSS yang digabungkan tetap sama bahkan jika file yang mendasarinya berubah - hanya jika file baru ditambahkan ke set file yang digabungkan, hash berubah. - @Alex

Cara lain untuk mengatasi hal ini adalah alih-alih menggunakan layout.xml,

hanya menempatkan mereka di page/html/head.phtml

Atau buat blok yang berisi <style>tag dengan nomor versi dan letakkan di XML di kepala Anda sehingga Anda dapat memuatnya hanya pada halaman tertentu dan tetap menggunakan tata letak XML.

Anda dapat menggunakan Modul OpenSource Aoe_JsCssTstamp yang menambahkan informasi timestamp ke file CSS yang digabungkan. Cap waktu untuk file CSS biasa (tidak digabungkan) belum didukung, tetapi ini akan mudah diimplementasikan.

Ada ekstensi gratis di github 'Magento Cachebuster' yang melakukan ini. Itu kembali

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

Modul ini menyediakan cachebusting dengan secara otomatis mengubah URI yang dibuat oleh Magento untuk> file statis dengan menambahkan timestamp file ke nama file:

Sebelum: http://www.example.com/js/varien/js.js Setelah: http://www.example.com/js/varien/js.1324429472.js

Saya menggunakan ekstensi saya sendiri, Speedster Advanced untuk ini. Tetapi prinsip dasarnya adalah bahwa nama file css dan js yang digabung termasuk stempel waktu dari file yang terakhir dimodifikasi - lihat Mage_Core_Model_Design_Package::getMergedCssUrl(). Setiap kali Anda mengedit file css, nama file baru dibuat yang menyebabkan browser meminta file baru alih-alih menggunakan kembali versi yang di-cache. Karena blok kepala Anda mungkin di-cache, refresh cache Magento diperlukan.

Saya juga telah mengimplementasikan cache buster untuk file css. Cara terbaik yang saya kira adalah untuk memperpanjang Mage_Page_Block_Html_Head dan naik fungsi di bawah ini dan memperbarui array $ skinItems dengan perubahan yang Anda inginkan.

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

}

Dapatkan inspirasi dari sini. Sumber

Ada solusi sederhana namun rumit yang tidak memerlukan plugin apa pun dan hanya menggunakan kemampuan Magento bawaan - berguna jika Anda hanya perlu dengan cepat melakukannya di situs yang sudah ada tanpa ingin mengambil risiko memasang kode lagi.

Idenya adalah bahwa Anda dapat menggunakan sistem CSS gabungan untuk menghasilkan nama file penghilang cache.

Karena nama file CSS yang digabungkan adalah hash dari semua file yang digabung bersama, Anda cukup menambahkan file css kosong tambahan ke dalam tema dengan cap tanggal untuk sebuah nama.

Begitu:

1. Aktifkan Gabungkan file CSS di Konfigurasi> Tingkat Lanjut> Pengembang
2. Dalam tata letak tema Anda temukan di mana Anda menambahkan file CSS ke kepala (biasanya page.xml) dan menambahkan file stylesheet tambahan, sebut saja apa pun yang Anda inginkan asalkan namanya unik misalnya <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. Di folder CSS skin Anda buat file css baru dengan nama itu, untuk konten file saya hanya memberikan komentar yang mengatakan untuk apa file itu

Sekarang dorong itu hidup dan siram cache magento, file css yang digabungkan sekarang akan memiliki nama yang berbeda dan cache Anda akan rusak!

Ini rumit karena setiap kali Anda ingin memecahkan cache, Anda perlu mengubah nama file itu, tetapi tidak memerlukan apa pun selain kemampuan Magento bawaan sehingga berguna jika Anda menemukan diri Anda macet dan perlu perbaikan cepat!

=> Alih-alih menggunakan kode ini:

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

=> Coba gunakan kode ini:

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

Tapi itu tidak terlalu bagus ...

Saya menemukan modul yang akan menambahkan string kueri ke akhir semua CSS dan JS dalam tata letak xml. String kueri dapat dikonfigurasi dari admin.

https://github.com/mklooss/Loewenstark_Head

Ide dasarnya adalah menimpa _prepareStaticAndSkinElementsuntuk memasukkan string kueri, seperti yang dilakukan dalam modul, yang ditunjukkan di bawah.

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

Jika saya memahami solusi yang diajukan dalam pertanyaan Anda, Anda dapat melakukannya dengan sedikit mod ke file inti ( tidak benar-benar mengedit file inti ):

Mage / Page / Block / Html / Head.php

Tambahkan sesuatu seperti? V = 1 ke baris 198 sehingga semua file css ditambahkan ini:

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

Saya pikir Fooman Speedster Advanced ( http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html ) bisa menjadi solusi:

"Sepenuhnya otomatis setelah diinstal, dengan versi otomatis ketika file Javascript / CSS diperbarui"

Saya telah membuat modul gratis untuk ini:

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

Tolong beri tahu saya jika itu tidak berfungsi seperti yang diharapkan tetapi saya telah membangunnya sehingga file gabungan js dan css akan memiliki hash yang berbeda jika konten dari salah satu file gabungan telah berubah. Secara default Magento hanya mengubah hash dari file gabungan jika nama file dari salah satu file yang disertakan telah berubah.

MEMPERBARUI

Saya juga membuat modul minify gratis dan sederhana untuk Anda yang memercayainya.

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

Ada modul yang sangat bagus yang dibuat oleh Fabrizio Branca yang melakukan hal yang Anda minati. Namanya AOE_JsCSSTStamp . Apa itu? Ini menambahkan cap waktu untuk sumber daya CSS dan JS. Ketika Anda menyiram cache CSS / JS maka cap waktu akan dibuat kembali.

Browser akan melihat nama file yang berbeda - itu sebabnya ia akan mengunduh ulang sumber daya lagi dan disajikan dengan yang paling baru alih-alih di-cache di browser.

Cukup edit metode getCssJsHtml di Mage_Page_Block_Html_Head , tambahkan string seperti ini selama beberapa hari setelah mengedit css dan itu saja ... itu hanya berfungsi

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

Beberapa tahun kemudian dan tidak menemukan ekstensi yang berguna yang tidak akan menggabungkan file dan sederhana, saya membuat sendiri. Gagasan utamanya adalah setelah membersihkan cache, itu akan memperbarui Timestamp. Jadi dengan kata lain - ketika Anda mengubah beberapa css/js, cukup flush cache dan Timestamp akan diperbarui.

Kode sumber ada di sini -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Bekerja pada versi 1.9+ . Namun, tidak yakin tentang versi yang lebih lama, tetapi kemungkinan besar akan berhasil juga.

Buat salinan tema Anda dengan nama baru (themev2) - kulit dan aplikasi / desain, dll. Kemudian pilih tema baru di admin.