Czy jest jakiś sposób na dodanie JS / CSS do strony stopki?

Mam niestandardowy wymóg, aby dodać konkretny JS i CSS związany ze stopką witryny . Czy jest jakiś sposób w Magento, dzięki któremu mogę dodać go w sekcji stopki ?

footerBlok nie oferuje żadnego wsparcia dla js bezpośrednio, jak głowa.

Ale jest blok z nazwą, w before_body_endktórym możesz dodać wszystko, co chcesz, za pomocą szablonu lub bloku tekstowego.

Mage_Page_Block_Html_HeadPomyślę o twoim własnym szablonie i typie bloku , a potem możesz użyć tego, co zalecił @Dexter.

Nie, potrzebujesz czegoś takiego, nie masz bloku page / html_head, do którego można by się odwoływać:

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

A w szablonie potrzebujesz:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

Część nagłówka i stopki jest renderowana przez moduł strony w magento. Aby zobaczyć szablony nagłówków i stopek, przejdź do

app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml

Spójrz także na inne pliki w folderze stron. Tam możesz zobaczyć, header.phtmlktóra sekcja renderowania nagłówka każdej strony. head.phtmlSłuży do dodawania plików js i css, które są odpowiednie dla każdej strony w Magento.

Zobacz także pliki w folderze stron. Pliki te będą renderowane dla każdej strony zgodnie ze specyfikacją układu konkretnej strony.

Poważnie przestudiuj ten moduł. To ci bardzo pomoże.

edytować

Możesz dodać swoje css i js poprzez page.xml. Myślę, że to rozwiąże twój problem. Iść do

app / design / frontend/ <your_package> /<your_theme> / layout / page.xml

i dodaj do niego ten fragment kodu defeault handle. (Możesz zobaczyć wiele plików js i css dodanych w tym uchwycie. Po prostu dodaj ten kod poniżej tych kodów)

 //this will add your js
 <action method="addItem">
     <type>skin_js</type>
     <name>js/yourjsfile.js</name>
 </action>  
 //this will add your css file
 <action method="addItem">
     <type>skin_css</type>
     <name>js/yourcssfile.css</name>
 </action>

Otóż ​​to. Teraz upewnij się, że niestandardowy plik js i css znajduje się w lokalizacji

  skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
  skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css

Powodzenia w pracy.

Użyj do tego XML. Aby dodać J w stopce, wywołaj odnośnik w stopce. Kod będzie wyglądał mniej więcej tak

<reference name="footer">
   <action method="addJs"><script>js/file.js</script></action>
</reference>

Aby dodać JS w folderze skóry, możesz użyć następującego kodu

    <reference name="footer">
    <action method="addItem"><type>skin_js</type><name>js/test.js</name></action>
</reference>

Aby dodać css, możesz użyć następującego kodu xml

<reference name="footer">
    <action method="addCss"><stylesheet>css/layout.css</stylesheet></action>
</reference>

lub możesz także użyć

<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
  </reference>

W przypadku javascript, czy zastanawiałeś się nad użyciem $ (dokumentu) onload lub jquery .ready ()?

Umożliwiłoby to umieszczenie kodu w nagłówku, tak jak w przypadku typowej instalacji, ale nie uruchamianie go do momentu załadowania treści, do której odwołuje się js.

Twój kod js nazwa_pliku.js wyglądałby następująco:

$(document).ready( function(){
   your custom js here
});

Kod dla twojego układu wyglądałby następująco: (Oczywiście musisz dodać odpowiednie katalogi, gdy je skonfigurujesz).

<reference name="head">
   <action method="addItem"><type>js</type><name>js/jquery/jquery.js</name></action>
   <action method="addItem"><type>js</type><name>js/filename.js</name></action>
</reference>

Tak, jest jeden sposób, ale musisz dodać za pomocą kodu, jak poniżej. Dodaj ten kod na dole pliku 1column.phtml tuż przed końcem <body>tagu.

<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>

Bardzo polecam moduł mediarox pagespeed, aby pomóc Ci zoptymalizować javascript (i css) i poprawić ranking wglądu w Google Pagespeed.

Działa poprzez parsowanie wyjścia html przez Magento, a następnie wykonanie operacji wycinania i wklejania na kodzie, aby przenieść javascript na dół kodu html. Proces jest szybki, ale najlepiej go używać w połączeniu z pełną pamięcią podręczną strony, aby buforować zmiany HTML.

Więcej informacji o tym, jak działa ten moduł i może pomóc Ci poprawić ranking szybkości strony tutaj:

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/