Переместить файлы JavaScript вниз в Magento

Question

Я вижу в page.xml, что файлы JavaScript установлены в голове так:

<default>
    <block type="page/html" name="root" output="toHtml" template="page/2columns-right.phtml">
        <block type="page/html_head" name="head" as="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>
            <action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
            <action method="addJs"><script>prototype/validation.js</script></action>
            <action method="addJs"><script>scriptaculous/builder.js</script></action>
            <action method="addJs"><script>scriptaculous/effects.js</script></action>
            <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
            <action method="addJs"><script>scriptaculous/controls.js</script></action>
            <action method="addJs"><script>scriptaculous/slider.js</script></action>
            <action method="addJs"><script>varien/js.js</script></action>
            <action method="addJs"><script>varien/form.js</script></action>
            <action method="addJs"><script>varien/menu.js</script></action>
            <action method="addJs" ifconfig="dev/translate_inline/active"><script>mage/translate.js</script></action>
            <action method="addJs"><script>mage/cookies.js</script></action>
            <action method="addCss"><stylesheet>css/screen.css</stylesheet></action>

            <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
            <action method="addItem"><type>skin_css</type><name>css/styles-ie8.css</name><params/><if>IE 8</if></action>

            <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
            <action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>

            <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
            <block type="page/html" name="store_language_js" as="store_language_js" template="page/html/head-translator.phtml"/>
</default>

Но если бы я хотел переместить их на дно, я бы просто сделал следующее?

<reference name="head">
    <action method="unsetData">
        <name>items</name>
    </action><!– There are now no CSS/JavaScript links in the head –>

    <action method="addCss">
        <stylesheet>css/some-file.css</stylesheet>
    </action><!– There is now one CSS and no JavaScript links in the head –>
</reference>

А потом в before_body_end добавить обратно файлы JavaScript?

Answer 1

Этот метод может сработать, но не будет хорошей идеей. В Magento есть много встроенных скриптов, которые зависят от заранее загружаемых библиотек Javascript. Некоторые модули добавляют свои собственные сценарии для определенных страниц, и, если items не установлены, они завершатся с ошибкой.

Если ваша цель - уменьшить время загрузки страницы, то конкатенация скриптов - как предусмотрено параметром «Объединить файлы JavaScript», Fooman Speedster и ранее mod_pagespeed (хотя функция объединения была ошибочной и удалена) - будет значительно сократить время прохождения сценариев в голове.

Чтобы эффективно переместить весь скрипт вниз, вам необходимо переопределить Mage_Page_Block_Html, чтобы отфильтровать все теги скрипта, а затем заменить их перед тегом </body>. К этому моменту блок before_body_end уже будет отрисован, поэтому вы не можете на это полагаться. Я не хотел бы пробовать это, поскольку многое еще может пойти не так.

Answer 2

Для Magento v1.6 + (необходимо протестировать в более старых версиях);

1 - создать файл шаблона в page/html/footer/extras.phtml с таким содержанием:

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

2 - Добавитьэтот HTML-узел в вашем макете XML:

<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 - Вот и все!