Magento додавання CSS та JS включає в колонтитул

Я роблю деяку оптимізацію Yslow свого сайту Magento і намагаюся додати CSS та Js до колонтитулу сайту.

На даний момент я використовую головний довідковий тег у макеті 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/

Перший крок - створити блок під назвою "стопа", який по суті такий же, як "голова", але ви виведете його в іншому місці. Ви можете додати це до свого 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) вам потрібно буде вивести цей блок перед закритим тегом тіла:

    <?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 поряд із прототипом у режимі noConflict. Вам потрібно буде забезпечити завантаження jQuery перед прототипом, щоб не траплялося конфліктів.

Для 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 - Це все!