Есть ли способ добавить JS / CSS на страницу нижнего колонтитула?

У меня есть специальное требование добавить JS и CSS, связанные с нижним колонтитулом сайта . Есть ли способ в Magento, с помощью которого я могу добавить его в раздел нижнего колонтитула ?

footerБлок не предлагает никакой поддержки JS непосредственно, как голова.

Но есть блок с именем, before_body_endкуда вы можете добавить все, что хотите, с помощью шаблона или текстового блока.

Я бы подумал о вашем собственном шаблоне и типе блока Mage_Page_Block_Html_Head, тогда вы можете использовать то, что рекомендовал @Dexter.

Нет, вам нужно что-то вроде этого, у вас нет блока page / 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, которые применимы для каждой страницы в magento.

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

Проведите серьезное изучение этого модуля. Это вам очень поможет.

редактировать

Вы можете добавить свои 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 для этого. Чтобы добавить J в нижний колонтитул, вызовите ссылку нижнего колонтитула. Код будет выглядеть примерно так

<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 вы рассматривали только использование onload или jquery $ (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/