Menambahkan CSS dan JS ke <head> menggunakan module layout.xml untuk blok


9

Ringkasan

Saya ingin menambahkan blok ke tampilan produk yang dikelompokkan dan tampilan produk sederhana. Blok ini akan memiliki beberapa tooltips yang bagus untuk mengarahkan kursor, saya menggunakan perpustakaan kecil dengan satu plugin jquery dan satu stylesheet css.

Saya ingin memasukkan kedua sumber ini ke dalam magento di halaman ini saja.

Catatan

  • Saya menjalankan tema khusus;
  • Caching dinonaktifkan ; dan
  • File saya ada di dalam /jsdirektori;

Sejauh ini…

Namun demikian saya tahu satu cara adalah menggunakan layout.xmldalam modul saya, pada awalnya ini tidak bekerja jadi saya pikir mungkin saya perlu konfigurasi tambahan di dalam saya config.xmluntuk memberi tahu Magento tentang persyaratan tata letak saya - ini juga tidak berfungsi.

Dengan tidak bekerja apa yang saya maksud adalah, aset saya tidak dimuat.

Silakan temukan sumber terlampir di bawah ini.


app / code / local / Vendor / Rating / 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>

app / code / local / Vendor / Rating / etc / config.xml

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

    ...

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

    ...

</config>

Jawaban:


17

Pertama, file tata letak Anda harus ditempatkan app/design/frontend/{interface}/{theme}/layout/.
Kedua. Jika Anda ingin menambahkan file css dan js hanya di halaman produk yang dikelompokkan dan sederhana tidak menggunakan <default>pegangan tata letak.
Jadikan tata letak Anda seperti ini:

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

Terima kasih banyak, ini masuk akal. Saya kira karena saya config.xmlmendefinisikan nama file xml tata letak saya dapat memanggil ini apa pun yang saya inginkan?
ash

@Takingsides. Iya. Namanya bisa apa saja yang kamu mau.
Marius

4

Karena ini belum ditunjukkan dengan cukup jelas:

Direktori

Layout file XML untuk modul khusus harus tema independen dan karenanya ditempatkan

app/design/frontend/base/default/layout

Anda dapat mengganti file XML ini di tema khusus Anda, tetapi dalam kebanyakan kasus, lebih baik memiliki file tata letak khusus tema tambahan yang menambahkan perubahan. Info lebih lanjut: Apa cara / pendekatan yang benar untuk memodifikasi template Magento?

Nama file

Perhatikan bahwa file-file itu kadang-kadang disebut sebagai "file layout.xml", tetapi layout.xmlsebenarnya bukan nama file yang biasanya Anda temukan dalam kode Magento. Kode Anda berfungsi jika Anda meletakkan layout.xmlfile Anda di lokasi yang benar (lihat di atas), tetapi konvensi adalah dengan menggunakan nama modul huruf kecil:

rating.xml

atau lebih baik

vendor_rating.xml

Ingatlah bahwa tata letak file XML dari semua modul berada dalam satu direktori tunggal, jadi namanya harus unik!


1

Lay.xml Anda harus masuk ke dalam

aplikasi / desain / antarmuka / [PAKET KUSTOM ANDA] / [TEMA KUSTOM ANDA] / tata letak /


0

Seperti yang dinyatakan di atas untuk kasus khusus Anda, Anda tidak boleh menggunakannya di dalam <default>tag tetapi untuk tujuan contoh Anda dapat menambahkan file css yang berada di direktori root magento / js Anda dengan cara ini di app/design/frontend/vendor/theme/layout/local.xmlmisalnya Anda:

<?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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.