Có cách nào để thêm JS / CSS vào trang chân trang không?

Tôi có một yêu cầu tùy chỉnh để thêm một JS và CSS cụ thể liên quan đến chân trang của trang web . Có cách nào trong Magento mà tôi có thể thêm nó trong phần chân trang không?

Các footerkhối không cung cấp bất kỳ hỗ trợ cho js trực tiếp, giống như người đứng đầu.

Nhưng có một khối với tên before_body_endmà bạn có thể thêm mọi thứ bạn muốn với mẫu hoặc khối văn bản.

Tôi sẽ suy nghĩ về mẫu của riêng bạn và loại khối Mage_Page_Block_Html_Head, sau đó bạn có thể sử dụng những gì @Dexter khuyên dùng.

Không, bạn cần một cái gì đó như thế này, bạn không có khối trang / html_head để tham khảo:

<!-- 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>

Và bên trong mẫu của bạn, bạn cần:

<?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() ?>

Phần đầu trang và chân trang được hiển thị bằng mô-đun Trang trong magento. Để xem các mẫu tiêu đề và chân trang, hãy đi đến

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

Hãy xem các tập tin khác trong thư mục trang cũng. Ở đó bạn có thể thấy header.phtmlphần tiêu đề kết xuất của mỗi trang. head.phtmlsử dụng để thêm các tệp js và css có thể áp dụng cho mọi trang trong magento.

Cũng xem các tập tin trong thư mục trang. Các tệp đó sẽ hiển thị cho mỗi trang theo đặc điểm kỹ thuật bố cục của một trang cụ thể.

Thực hiện một nghiên cứu nghiêm túc về mô-đun này. Nó sẽ giúp bạn rất nhiều.

biên tập

Bạn có thể thêm css và js của mình thông qua page.xml. Tôi nghĩ rằng nó sẽ giải quyết vấn đề của bạn. Đi đến

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

và thêm đoạn mã này vào defeault handle. (Bạn có thể thấy rất nhiều tệp js và css được thêm vào trong phần xử lý này. Chỉ cần thêm mã này bên dưới các mã đó)

 //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>

Đó là nó. Bây giờ hãy chắc chắn rằng tập tin js và css tùy chỉnh của bạn nằm ở vị trí

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

Chúc may mắn cho công việc của bạn.

Sử dụng XML cho nó. Để thêm Js trong phần chân trang, hãy gọi tham chiếu chân trang. Mã sẽ trông giống như thế này

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

Để thêm JS trong thư mục giao diện, bạn có thể sử dụng mã sau

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

Để thêm css, bạn có thể sử dụng mã xml sau

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

hoặc bạn cũng có thể sử dụng

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

Đối với javascript, bạn đã xem xét việc chỉ sử dụng onload hoặc jquery '$ (tài liệu). Đã () chưa?

Điều đó sẽ cho phép bạn đặt mã của mình vào tiêu đề như thiết lập thông thường, nhưng không chạy mã cho đến khi nội dung mà js của bạn được tham chiếu được tải.

Mã js filename.js của bạn sẽ trông như sau:

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

Mã cho bố cục của bạn sẽ trông như sau: (Rõ ràng bạn sẽ cần thêm các thư mục phù hợp khi bạn thiết lập chúng.)

<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>

Có, có một cách nhưng bạn phải thêm thông qua mã như bên dưới, thêm mã này vào cuối tệp 1column.phtml ngay trước khi kết thúc <body>thẻ.

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

Tôi đặc biệt khuyên dùng mô-đun trang tốc độ trung bình để giúp bạn tối ưu hóa javascript (và css) và cải thiện thứ hạng hiểu biết của trang Google.

Nó hoạt động bằng cách phân tích cú pháp đầu ra html bằng Magento và sau đó thực hiện hành động cắt và dán vào mã để di chuyển javascript xuống dưới cùng của mã html. Quá trình này nhanh nhưng được sử dụng tốt nhất kết hợp với bộ đệm toàn trang để lưu các thay đổi html.

Thông tin thêm về cách mô-đun này hoạt động và có thể giúp bạn cải thiện thứ hạng trang ở đây:

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