Magento добавляет CSS и JS в нижний колонтитул

Я немного оптимизирую свой сайт Magento и пытаюсь добавить CSS и J в нижний колонтитул сайта.

В настоящее время я использую тег ссылки на заголовок в макете XML и использую addJsи addCssдействия, чтобы включить все мои файлы. Я попытался поменять местами ссылку на нижний колонтитул, но при попытке просмотра сайта мне выдали ошибку. Есть ли способ сделать это в local.xml или это должно быть сделано жестко в самом файле шаблона нижнего колонтитула?

Я знаю, что это не ответ на ваш вопрос, а то, что вы, возможно, захотите рассмотреть, тем не менее.

Magento использует довольно много встроенного JavaScript, особенно на странице с описанием продукта. Поскольку этот javascript зависит от внешних скриптов, загруженных в заголовок, вам нужно будет также переместить все встроенные скрипты во внешние файлы и добавить их в нижний колонтитул.

Вы можете быть быстрее и лучше, сжимая CSS и JS с помощью инструментов, встроенных в Magento, и используя сжатие gzip и заголовки с большим сроком действия, чтобы ускорить их. Таким образом, «лаги», вызванные javascript и CSS, будут сведены к минимуму без необходимости изменять макет расширения по умолчанию для Magento и сторонних производителей. Таким образом, когда вы обновляете Magento или расширения, вам не нужно переделывать всю работу.

.Htaccess, предоставляемый стандартным проектом HTML5, обеспечивает сжатие gzip и заголовки с большим сроком действия. Пожалуйста, проверьте http://inchoo.net/ecommerce/magento/magento-boilerplate/

Первым шагом является создание блока под названием «foot», который по сути совпадает с «head», но вы выведете его в другом месте. Вы можете добавить это к вашему page.xml:

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

Теперь вы можете добавить JS / CSS (хотя CSS в нижнем колонтитуле не рекомендуется), используя эту команду в любом из ваших XML-файлов:

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

Внутри page/html/foot.phtml:

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

В ваших файлах шаблонов страниц (например page/1column.phtml) вам нужно будет вывести этот блок перед закрывающим тегом body:

    <?php echo $this->getChildHtml('foot') ?>

Если вы используете шаблоны Magento по умолчанию, вы получите ошибки JS. Возьмите мини-форму поиска например ( catalogsearch/form.mini.phtml). У этого есть встроенный скрипт:

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

Это будет вызвано, как только он загрузится, поскольку это не находится ни в одном обработчике готовности документа. Varien еще не существует, потому что он находится в нижнем колонтитуле, поэтому вы получаете сообщение об ошибке. Это можно исправить, добавив обработчик готовых документов или переместив все встроенные JS такого типа во внешний файл, который также загружается в нижний колонтитул. Подобные проблемы будут возникать по всему сайту, особенно на страницах оформления заказа и настраиваемых товаров.

Другая проблема, с которой вы можете столкнуться, это если вы используете jQuery вместе с Prototype в режиме noConflict. Вам нужно убедиться, что jQuery загружен до Prototype, чтобы не возникало конфликтов.

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