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

9

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

отметка
источник
Я написал блог для этой проблемы. См. Здесь: blog.rahuldadhich.com/magento-load-css-js-footer
Рахул Дадхич,

Ответы:

17

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() ?>
Фабиан Блехшмидт
источник
спасибо за ответ @fabian blechschmidt. Я добавил что-то вроде этого, но не исключение и удача тоже. <default> <reference name = "before_body_end"> <action method = "addItem"> <type> skin_js </ type> <name> js / test.js </ name> <params /> </ action> </ reference > </ default>
Отметить
обновил ответ, нужен блок!
Фабиан Блехшмидт
ты МУЖЧИНА !!! Престижность .. Спасибо за тонну за ответ .. Но я буду рад, если ты объяснишь мне немного о коде, а также для лучшего понимания ..
Марк
Добавил несколько комментариев. Если у вас есть еще вопросы, пожалуйста, задавайте их - конкретные вопросы :-)
Фабиан Блехшмидт
1
правильное имя блока: <reference name = "before_body_end">, а не <reference name = "before_body_ends">
Томас Дермисек,
3

Часть верхнего и нижнего колонтитула отрисовывается модулем 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

Удачи в вашей работе.

Раджив К Томи
источник
Я не работаю с page.xml . В моем local.xml я должен использовать метод xml. Ваш отредактированный пост только предлагает, как я могу добавить JS / CSS в XML-файлы (это не вопрос).
Отметить
@Mark: в вашем qn нет подсказки для использования файла local.xml для вашей работы. Ваш qn требует, чтобы вы добавили js и css в нижний колонтитул. Мое обновление отлично справится с этой задачей. В любом случае, зачем вам файл local.xml для этой цели?
Раджив К Томи
Будучи разработчиком Mage, который поддерживает стандарты, зачем кому-то использовать page.xml? Ваш код <action method="addItem"> <type>skin_js</type> <name>js/yourjsfile.js</name> </action>добавит JS в <head>, а не в нижний колонтитул !!!
Отметить
2

Используйте 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>
правый
источник
Неверный метод Mage_Page_Block_Html_Footer :: addJs
Отметить
@Mark: это происходит потому, что класс Footer не имеет метода с именем "addJs". Для получения дополнительной информации, посмотрите на это: magento.stackexchange.com/questions/15904/…
pablofiumara
2

Для 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>
zeusstl
источник
1

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

<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>
Кейул Шах
источник
Плохой совет, потому что вы не хотите копировать свой код во все шаблоны.
Фабиан Блехшмидт
мы не можем добавить JS в нижний колонтитул через XML, поэтому я использую этот поток.
Кейул Шах
1
Посмотрите на мой ответ. Вы решаете проблему потоком, но вам необходимо скопировать код в каждый корневой шаблон.
Фабиан Блехшмидт
1

Я настоятельно рекомендую модуль mediarox pagespeed, чтобы помочь вам оптимизировать ваш javascript (и css) и улучшить рейтинг в Google Pagespeed.

Он работает путем анализа html-вывода Magento, а затем выполняет действие вырезания и вставки кода, чтобы переместить javascript в конец HTML-кода. Процесс быстрый, но лучше всего использовать его вместе с полным кэшем страниц для кэширования изменений HTML.

Более подробная информация о том, как работает этот модуль и может помочь вам повысить рейтинг страниц, здесь:

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

PAJ
источник