Altbilgi sayfasına JS / CSS eklemenin bir yolu var mı?

Web sitesinin altbilgisi ile ilgili belirli bir JS ve CSS eklemek için özel bir gereksinimim var . Magento'da altbilgi bölümüne ekleyebilmemin bir yolu var mı ?

footerBlok başı gibi, doğrudan js için herhangi bir destek sağlamamaktadır.

Ancak before_body_end, şablon veya metin bloğu ile istediğiniz her şeyi ekleyebileceğiniz adıyla bir blok var .

Kendi şablon ve blok türü hakkında düşünmek istiyorum Mage_Page_Block_Html_Head, o zaman @Dexter önerilen ne kullanabilirsiniz.

Hayır, böyle bir şeye ihtiyacınız var, başvuracağınız sayfa / html_head bloğunuz yok:

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

Ve şablonunuzun içinde şunlara ihtiyacınız vardır:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

Üstbilgi ve altbilgi bölümü, Magento'daki Page modülü tarafından oluşturuluyor. Üstbilgi ve altbilgi şablonlarını görmek için şu adrese gidin:

app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml

Sayfa klasöründeki diğer dosyalara da göz atın. Orada header.phtmlher sayfanın hangi oluşturma başlığı bölümünü görebilirsiniz . head.phtmlmagento'daki her sayfa için geçerli olan js ve css dosyaları eklemek için kullanın.

Ayrıca sayfa klasöründeki dosyalara bakın. Bu dosyalar, her sayfa için belirli bir sayfanın düzen spesifikasyonuna göre oluşturulur.

Bu modül üzerinde ciddi bir çalışma yapın. Size çok yardımcı olacaktır.

Düzenle

Css ve js dosyalarınızı page.xml dosyasından ekleyebilirsiniz. Sanırım sorununuzu çözecek. Adresine git

app / design / frontend/ <your_package> /<your_theme> / layout / page.xml

ve bu kod snippet'ini ekleyin defeault handle. (Bu tutamağa çok sayıda js ve css dosyası eklendiğini görebilirsiniz. Sadece bu kodu bu kodların altına ekleyin)

 //this will add your js
 <action method="addItem">
     <type>skin_js</type>
     <name>js/yourjsfile.js</name>
 </action>  
 //this will add your css file
 <action method="addItem">
     <type>skin_css</type>
     <name>js/yourcssfile.css</name>
 </action>

Bu kadar. Şimdi özel js ve css dosyanızın yerinde olduğundan emin olun

  skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
  skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css

Çalışmanız için iyi şanslar.

Bunun için XML kullanın. Altbilgiye Js eklemek için altbilgi başvurusunu çağırın. Kod şöyle görünecek

<reference name="footer">
   <action method="addJs"><script>js/file.js</script></action>
</reference>

Kaplama klasörüne JS eklemek için aşağıdaki kodu kullanabilirsiniz

    <reference name="footer">
    <action method="addItem"><type>skin_js</type><name>js/test.js</name></action>
</reference>

Css eklemek için aşağıdaki xml kodunu kullanabilirsiniz

<reference name="footer">
    <action method="addCss"><stylesheet>css/layout.css</stylesheet></action>
</reference>

ya da kullanabilirsiniz

<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
  </reference>

Javascript için, sadece onload veya jquery's $ (document) .ready () kullanmayı düşündünüz mü?

Bu, kodunuzu tipik kurulum gibi başlığa yerleştirmenize izin verir, ancak js'inizin başvurduğu içerik yüklenene kadar çalıştırmaz.

Js dosyaadı.js kodunuz şöyle görünür:

$(document).ready( function(){
   your custom js here
});

Düzeninizin kodu şuna benzer: (Açıkça ayarladığınız gibi uygun dizinleri eklemeniz gerekir.)

<reference name="head">
   <action method="addItem"><type>js</type><name>js/jquery/jquery.js</name></action>
   <action method="addItem"><type>js</type><name>js/filename.js</name></action>
</reference>

Evet bir yolu var ama aşağıdaki kod ile eklemek zorunda bu kodu <body>etiketi bitmeden hemen önce 1column.phtml dosyasının altına ekleyin .

<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>

Javascript (ve css) optimize etmek ve google pagespeed içgörü sıralamasını iyileştirmek için mediarox pagespeed modülünü tavsiye ederim.

Magento tarafından html çıktısını ayrıştırıp javascript'i html kodunun altına taşımak için kod üzerinde bir kes ve yapıştır eylemi gerçekleştirerek çalışır. İşlem hızlıdır, ancak en iyi şekilde html değişikliklerini önbelleğe almak için tam sayfa önbellek ile birlikte kullanılır.

Bu modülün nasıl çalıştığı hakkında daha fazla bilgi ve sayfa hızı sırasını iyileştirmenize yardımcı olabilir:

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/