Thêm CSS và JS vào <head> bằng mô-đun layout.xml cho khối


9

Tóm tắc

Tôi muốn thêm một khối vào chế độ xem sản phẩm được nhóm và chế độ xem sản phẩm đơn giản của tôi. Khối này sẽ có một số chú giải công cụ tuyệt vời cho các trạng thái di chuột, tôi đang sử dụng một thư viện nhỏ với một plugin jquery và một biểu định kiểu css.

Tôi muốn bao gồm hai tài nguyên này trong magento chỉ trên các trang này.

Ghi chú

  • Tôi đang chạy một chủ đề tùy chỉnh;
  • Bộ nhớ đệm bị vô hiệu hóa ; và
  • Các tập tin của tôi nằm trong /jsthư mục;

Cho đến nay

Tuy nhiên, tôi biết một cách là sử dụng layout.xmltrong mô-đun của mình, lúc đầu điều này không hoạt động nên tôi nghĩ có lẽ tôi cần cấu hình bổ sung bên trong config.xmlđể nói với Magento về các yêu cầu bố trí của tôi - điều này cũng không hoạt động.

Bởi tôi không làm việc theo ý tôi là, tài sản của tôi không được tải.

Vui lòng tìm nguồn đính kèm bên dưới.


ứng dụng / mã / cục bộ / Nhà cung cấp / Xếp hạng / etc / layout.xml

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </default>
</layout>

ứng dụng / mã / cục bộ / Nhà cung cấp / Xếp hạng / etc / config.xml

<?xml version="1.0"?>
<config>

    ...

    <frontend>
        <layout>
            <updates>
                <vendor_rating>
                    <file>layout.xml</file>
                </vendor_rating>
            </updates>
        </layout>
    </frontend>

    ...

</config>

Câu trả lời:


17

Đầu tiên, tập tin bố trí của bạn nên được đặt trong app/design/frontend/{interface}/{theme}/layout/.
Thứ hai. Nếu bạn muốn thêm các tệp css và js chỉ trong các trang sản phẩm được nhóm và đơn giản, không sử dụng <default>tay cầm bố cục.
Làm cho bố cục của bạn trông như thế này:

<?xml version="1.0"?>
<layout>
    <my_handle><!-- declare a custom handle so you won't duplicate the code -->
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </my_handle>
    <PRODUCT_TYPE_simple><!-- layout handle for simple products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_simple>
    <PRODUCT_TYPE_grouped><!-- layout handle for grouped products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_grouped>
</layout>

Cảm ơn bạn rất nhiều, điều này rất có ý nghĩa. Tôi đoán từ khi tôi config.xmlxác định tên của tệp xml bố trí tôi có thể gọi đây là bất cứ điều gì tôi muốn?
tro

@Đứng về phía. Đúng. Tên có thể là bất cứ điều gì bạn muốn.
Marius

4

Vì điều này chưa được chỉ ra rõ ràng đủ:

Thư mục

Bố trí các tệp XML cho một mô-đun tùy chỉnh phải độc lập với chủ đề và do đó được đặt vào

app/design/frontend/base/default/layout

Bạn có thể ghi đè bất kỳ tệp XML nào trong chủ đề tùy chỉnh của mình, nhưng trong hầu hết các trường hợp, tốt hơn là có một tệp bố cục cụ thể theo chủ đề bổ sung để thêm các thay đổi. Thông tin thêm: Cách / cách tiếp cận chính xác để sửa đổi mẫu Magento là gì?

Tên tệp

Lưu ý rằng các tệp đó đôi khi được gọi là "tệp layout.xml", nhưng layout.xmlthực tế không phải là tên tệp bạn thường tìm thấy trong bất kỳ mã Magento nào. Mã của bạn hoạt động nếu bạn đặt layout.xmltệp của mình vào đúng vị trí (xem bên trên), nhưng quy ước là sử dụng tên mô-đun chữ thường:

rating.xml

hoặc tốt hơn

vendor_rating.xml

Hãy nhớ rằng các tệp XML bố trí từ tất cả các mô-đun nằm trong một thư mục duy nhất, vì vậy tên phải là duy nhất!


1

Bố cục của bạn nên đi vào bên trong

ứng dụng / thiết kế / frontend / [GÓI TÙY CHỈNH CỦA BẠN] / [CHỦ ĐỀ TÙY CHỈNH CỦA BẠN] / layout /


0

Như đã nêu ở trên cho trường hợp cụ thể của bạn, bạn không nên sử dụng nó bên trong <default>các thẻ nhưng ví dụ như mục đích bạn có thể thêm các tệp css nằm trong thư mục gốc magento / js của bạn theo cách này trong app/design/frontend/vendor/theme/layout/local.xmlví dụ của bạn :

<?xml version="1.0"?>

<layout version="0.1.0">
    <default>
        <reference name="head">
             <action method="addItem">
                <type>js_css</type>
                <stylesheet>css/styles.css</stylesheet>
                <params>media="all"</params>
            </action>
        </reference>
    </default>
</layout>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.