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

15

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

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

Крис Моррис
источник
3
возможный дубликат Переместить все, что включает в себя Javascript до </ body>
Бен Лессани - Сонасси
1
Сообщение об ошибке, полученной при попытке просмотра сайта после обмена, может помочь людям ответить на ваш вопрос.
Алан Сторм
3
Помимо перемещения JS в нижний колонтитул, я уверен, что вы не хотите перемещать CSS в нижний колонтитул. Это должно быть в <head>.
pspahn
Оформить заказ @sonassi со ссылкой на мой старый пост. Одно из решений было правильным и работает, но имейте в виду, что при включении слияния вы получаете несколько объединенных файлов JS. Это, кажется, происходит, если вы включаете JS, используя также разные дескрипторы.
Марк Уэстон
CSS в ногу. Гадость на отображении страницы ... И JS следует делать только для внешних включений, которые могут блокировать отображение страницы. Все, что подается с вашего сервера, должно быть в голове. Это фреймворк, фреймворк интенсивно используется при сборке страниц и должен быть там до того, как страница начнет отображаться. Большинство рекомендаций слепо выполнялись, не понимая (культ груза), почему вы наносите ущерб.
Fiasco Labs

Ответы:

7

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

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

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

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

Сандер Мангель
источник
2
Ошибки OP, скорее всего, вызваны неправильной загрузкой - для большинства встроенных сценариев требуется prototype et al. Если вы загружаете это только в нижний колонтитул, это слишком поздно. Удаление встроенного JS будет первым шагом. Много работы - удачи.
Кристоф на Fooman
4

Первым шагом является создание блока под названием «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, чтобы не возникало конфликтов.

jharrison.au
источник
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 - Вот и все!

Марсио Масиэль
источник
Гораздо более простой способ добавления сценариев js перед закрывающим тегом
body,