Magento dodaje CSS i JS obejmuje do stopki

Robię optymalizację Yslow mojej strony Magento i próbuję dodać CSS i Js do stopki strony.

W tej chwili używam znacznika referencyjnego nagłówka w układzie XML i używam addJsoraz addCssakcji, aby dołączyć wszystkie moje pliki. Próbowałem zamienić odniesienie w nagłówku na stopkę, ale wystąpił błąd podczas próby wyświetlenia witryny. Czy istnieje sposób, aby to zrobić, local.xml czy też należy to zrobić na stałe w samym pliku szablonu stopki?

Wiem, że to nie jest odpowiedź na twoje pytanie, ale coś, co warto rozważyć.

Magento używa sporo wbudowanego javascript, szczególnie na stronie szczegółów produktu. Ponieważ ten javascript zależy od zewnętrznych skryptów załadowanych w nagłówku, będziesz musiał przenieść wszystkie wbudowane skrypty do zewnętrznych plików i dodać je w stopce.

Możesz być szybszy i lepiej, kompresując CSS i JS za pomocą narzędzi wbudowanych w Magento oraz używając kompresji gzip i nagłówków dalekiego okresu ważności, aby je przyspieszyć. W ten sposób „opóźnienie” spowodowane przez javascript i CSS zostanie ograniczone do minimum bez konieczności zmiany domyślnego układu rozszerzeń Magento i zewnętrznych firm. W ten sposób, kiedy uaktualnisz swoje Magento lub rozszerzenia, nie musisz ponawiać całej pracy.

Plik .htaccess udostępniony przez projekt HTML5 typu kocioł zapewnia tę kompresję gzip i nagłówki dalekiego okresu ważności. Sprawdź http://inchoo.net/ecommerce/magento/magento-boilerplate/

Pierwszym krokiem jest utworzenie bloku o nazwie „stopa”, który jest zasadniczo taki sam jak „głowa”, ale wyprowadzisz go w innym miejscu. Możesz dodać to do swojegopage.xml :

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

Teraz możesz dodać JS / CSS (chociaż CSS w stopce nie jest zalecany) za pomocą tego polecenia w dowolnym pliku 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>

Wewnątrz page/html/foot.phtml:

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

W plikach szablonów strony (np. page/1column.phtml) Musisz wydrukować ten blok przed tagiem zamykającym:

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

Jeśli używasz domyślnych szablonów Magento, otrzymasz błędy JS. Weźmy na przykład formularz mini wyszukiwania ( catalogsearch/form.mini.phtml). Ma ten wbudowany skrypt:

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

Zostanie to wywołane, gdy tylko się załaduje, ponieważ nie ma go w żadnym programie obsługującym dokumenty. Varien jeszcze nie istnieje, ponieważ znajduje się w stopce, więc pojawia się błąd. Można to naprawić, dodając moduł obsługi dokumentów lub przenosząc wszystkie wbudowane pliki JS tego rodzaju do zewnętrznego pliku, który jest również ładowany w stopce. Takie problemy będą występować w całej witrynie, szczególnie na kasach i konfigurowalnych stronach produktów.

Innym problemem, który możesz napotkać, jest użycie jQuery razem z Prototype w trybie noConflict. Musisz upewnić się, że jQuery jest załadowane przed Prototypem, aby nie doszło do konfliktów.

Dla Magento v1.6 + (trzeba przetestować w starszych wersjach);

1 - utwórz plik szablonu page/html/footer/extras.phtmlz tą zawartością:

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

2 - Dodaj ten węzeł HTML do swojego układu 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 - To jest to!