Magento thêm CSS và JS bao gồm chân trang

Tôi đang thực hiện một số tối ưu hóa Yslow của trang Magento của mình và đang cố gắng thêm CSS và J vào chân trang của trang.

Hiện tại tôi đang sử dụng thẻ tham chiếu chính trong bố cục XML và sử dụng addJsvà addCsscác hành động để bao gồm tất cả các tệp của tôi. Tôi đã thử trao đổi tham chiếu đầu đến chân trang, nhưng đã gặp lỗi khi tôi cố xem trang web. Có cách nào để làm điều này trong local.xml hoặc điều này phải được thực hiện mã hóa cứng trong chính tệp mẫu chân trang?

Tôi biết đây không phải là một câu trả lời cho câu hỏi của bạn nhưng dù sao bạn cũng có thể muốn xem xét.

Magento sử dụng khá nhiều javascript nội tuyến, đặc biệt là trên trang chi tiết sản phẩm. Vì javascript phụ thuộc vào các tập lệnh bên ngoài được tải trong tiêu đề, bạn sẽ cần phải di chuyển tất cả các tập lệnh nội tuyến sang các tệp bên ngoài và thêm chúng vào phần chân trang.

Bạn có thể nhanh hơn và tốt hơn bằng cách nén CSS và JS bằng các công cụ được tích hợp trong Magento và sử dụng nén gzip và các tiêu đề hết hạn để tăng tốc chúng. Bằng cách đó, độ trễ 'gây ra bởi javascript và CSS sẽ được giữ ở mức tối thiểu mà không cần thay đổi bố cục tiện ích mở rộng của Magento và bên thứ ba mặc định. Bằng cách này, khi bạn nâng cấp Magento hoặc tiện ích mở rộng, bạn không phải làm lại tất cả công việc.

.Htaccess được cung cấp bởi dự án soạn sẵn HTML5 cung cấp tính năng nén gzip này và các tiêu đề hết hạn xa, vui lòng kiểm tra http://inchoo.net/ec Commerce / magento / magento-bobilerplate /

Bước đầu tiên là tạo một khối gọi là "chân" về cơ bản giống như "đầu" nhưng bạn sẽ xuất nó ở một vị trí khác. Bạn có thể thêm phần này vào page.xml:

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

Bây giờ bạn có thể thêm JS / CSS (mặc dù CSS trong phần chân trang không được khuyến nghị) bằng cách sử dụng lệnh này trong bất kỳ tệp XML nào của bạn:

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

Bên trong page/html/foot.phtml:

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

Trong tệp mẫu trang của bạn (ví dụ page/1column.phtml) bạn sẽ cần xuất khối này trước khi đóng thẻ body:

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

Nếu bạn đang sử dụng các mẫu Magento mặc định, bạn sẽ gặp lỗi JS. Lấy mẫu tìm kiếm nhỏ chẳng hạn ( catalogsearch/form.mini.phtml). Nó có kịch bản nội tuyến này:

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

Điều này sẽ được gọi ngay khi nó tải, vì nó không có trong bất kỳ trình xử lý tài liệu sẵn sàng nào. Varien chưa tồn tại vì nó ở chân trang, do đó bạn gặp lỗi. Bạn có thể khắc phục điều này bằng cách thêm một trình xử lý tài liệu sẵn sàng hoặc bằng cách di chuyển tất cả các JS nội tuyến có tính chất này sang một tệp bên ngoài cũng được tải trong phần chân trang. Các vấn đề như thế này sẽ xảy ra trên toàn bộ trang web, đặc biệt là trong các trang sản phẩm thanh toán và có thể định cấu hình.

Vấn đề khác bạn có thể gặp là nếu bạn đang sử dụng jQuery cùng với Prototype ở chế độ noConflict. Bạn sẽ cần đảm bảo jQuery được tải trước Prototype để không xảy ra xung đột.

Đối với Magento v1.6 + (cần thử nghiệm trong các phiên bản cũ hơn);

1 - tạo một tệp mẫu page/html/footer/extras.phtmlvới nội dung này:

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

2 - Thêm nút html này vào bố cục xml của bạn:

<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 - Thế thôi!