Altbilgiye CSS ve JS ekleyen Magento

Magento sitemin bazı Yslow optimizasyonunu yapıyorum ve sitenin altbilgisine CSS ve Js eklemeye çalışıyorum.

Şu anda mizanpaj XML'de bir baş referans etiketi kullanıyorum addJsve addCsstüm dosyalarımı dahil etmek için ve eylemleri kullanıyorum . Alt referansı altbilgiye değiştirmeyi denedim, ancak siteyi görüntülemeye çalıştığımda bir hata verildi. Bunu yapmanın bir yolu var mı local.xml veya altbilgi şablon dosyasında sabit kodlanmış olması gerekiyor mu?

Bunun sorunuza bir cevap değil, yine de düşünmek isteyebileceğiniz bir şey olduğunu biliyorum.

Magento özellikle ürün detay sayfasında oldukça fazla satır içi javascript kullanır. Bu javascript, başlıkta yüklü harici komut dosyalarına bağlı olduğundan, tüm satır içi komut dosyalarını da harici dosyalara taşımanız ve bunları altbilgiye eklemeniz gerekir.

CSS ve JS'yi Magento'da yerleşik araçlarla sıkıştırarak ve hızlandırmak için gzip sıkıştırma ve uzak sona erme başlıklarını kullanarak daha hızlı ve daha iyi olabilirsiniz. Bu şekilde, javascript ve CSS'nin neden olduğu 'gecikme', varsayılan Magento ve 3. taraf uzantı düzenini değiştirmeye gerek kalmadan minimumda tutulacaktır. Bu şekilde, Magento'nuzu veya uzantılarınızı yükselttiğinizde tüm işleri yeniden yapmanız gerekmez.

HTML5 boilerplate projesi tarafından sağlanan .htaccess bu gzip sıkıştırmasını ve son kullanma tarihi başlıklarını sağlar, Lütfen http://inchoo.net/ecommerce/magento/magento-boilerplate/ adresini ziyaret edin.

İlk adım, "foot" adında bir blok oluşturmaktır. Bunu aşağıdakilere ekleyebilirsiniz page.xml:

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

Artık XML dosyalarınızdan herhangi birinde bu komutu kullanarak JS / CSS ekleyebilirsiniz (altbilgideki CSS önerilmez).

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

İçinde page/html/foot.phtml:

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

Sayfa şablonu dosyalarınızda (ör. page/1column.phtml) Kapanış gövdesi etiketinden önce bu bloğu çıkarmanız gerekir:

    <?php echo $this->getChildHtml('foot') ?>

Varsayılan Magento şablonlarını kullanıyorsanız JS hataları alırsınız. Mini arama formunu ele alalım örneğin ( catalogsearch/form.mini.phtml). Bu satır içi komut dosyasına sahiptir:

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

Bu, herhangi bir belgeye hazır işleyicide olmadığı için yüklenir yüklenmez çağrılacaktır. Varien henüz altbilgide olduğu için mevcut değil, bu nedenle bir hata alıyorsunuz. Belgeye hazır bir işleyici ekleyerek veya bu türdeki tüm satır içi JS'yi altbilgide de yüklü olan harici bir dosyaya taşıyarak bunu düzeltebilirsiniz. Bu gibi sorunlar site genelinde, özellikle ödeme ve yapılandırılabilir ürün sayfalarında ortaya çıkacaktır.

Karşılaşabileceğiniz diğer sorun, noConflict modunda Prototip ile birlikte jQuery kullanıyorsanız. Prototipten önce jQuery'nin yüklendiğinden emin olmanız gerekir, böylece çakışma olmaz.

Magento v1.6 + için (eski sürümlerde test edilmesi gerekir);

1 - page/html/footer/extras.phtmlbu içerikle bir şablon dosyası oluşturun :

<?php echo $this->getCssJsHtml() ?>

2 - Bu html düğümünü düzen xml'nize ekleyin:

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3 - İşte bu!