Чи є спосіб додати JS / CSS на сторінку нижнього колонтитулу?

У мене є власна вимога додати певний JS та CSS, пов’язаний із колонтитулом веб-сайту . Чи є в Magento спосіб, за допомогою якого я можу додати його у розділі колонтитулу ?

footerБлок не пропонує ніякої підтримки JS безпосередньо, як голова.

Але є блок з назвою, before_body_endкуди ви можете додати все, що завгодно, за допомогою шаблону чи текстового блоку.

Я б подумав про ваш власний шаблон і тип блоку Mage_Page_Block_Html_Head, тоді ви можете використовувати те, що рекомендував @Dexter.

Ні, вам потрібно щось подібне, у вас немає сторінки / блоку html_head для посилання також:

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

А всередині шаблону вам потрібно:

<?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() ?>

Частина верхнього та нижнього колонтитулів відображається за допомогою модуля Page в magento. Щоб побачити шаблони колонтитулів та колонтитулів, перейдіть до

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

Погляньте і на інші файли в папці сторінки. Там ви можете побачити, header.phtmlякий розділ заголовка відображається на кожній сторінці. head.phtmlвикористовувати для додавання файлів js та css, які застосовні для всіх сторінок в магенто.

Також дивіться файли в папці сторінки. Ці файли відображатимуться для кожної сторінки відповідно до специфікації макета певної сторінки.

Зробіть серйозне дослідження на цьому модулі. Це вам дуже допоможе.

редагувати

Ви можете додати свої css та js через page.xml. Я думаю, це вирішить вашу проблему. Йти до

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

і додайте цей фрагмент коду до нього defeault handle. (Ви можете побачити багато файлів js та css, доданих у цій ручці. Просто додайте цей код під цими кодами)

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

Це воно. Тепер переконайтеся, що ваші користувальницькі js та css-файли розміщені

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

Успіхів у вашій роботі.

Використовуйте для нього XML. Щоб додати Js у нижньому колонтитулі, виклик посилання на колонтитул. Код буде виглядати приблизно так

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

Для додавання JS у папку шкіри ви можете використовувати наступний код

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

Для додавання css можна скористатися наступним кодом xml

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

або ви також можете використовувати

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

Що стосується javascript, чи розглядали ви просто використання он-лайн або jquery''s $ (document) .ready ()?

Це дозволить вам розмістити свій код у заголовку як типовий параметр, але не запускати його, поки не завантажиться вміст, на який посилається ваш js.

Ваш js filename.js код буде виглядати так:

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

Код для вашого макета виглядатиме так: (Очевидно, вам потрібно буде додати відповідні каталоги, коли ви їх налаштували.)

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

Так, є один спосіб, але вам потрібно додати код, як показано нижче, додати цей код внизу файлу 1column.phtml безпосередньо перед закінченням <body>тегу.

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

Я настійно рекомендую модуль mediarox pagespeed, який допоможе вам оптимізувати javascript (та css) та покращити рейтинг розуміння google pagespeed.

Він працює, аналізуючи вихід HTML в Magento, а потім виконуючи операцію вирізання та вставки коду для переміщення javascript у нижню частину коду html. Процес швидкий, але найкраще його використовувати в поєднанні з кешем повних сторінок для кешування змін у HTML.

Більше інформації про те, як працює цей модуль і може допомогти вам покращити рейтинг сторінок тут:

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