การเพิ่ม CSS และ JS ไปยัง <head> โดยใช้โมดูล layout.xml สำหรับบล็อก


9

สรุป

ฉันต้องการเพิ่มบล็อกในมุมมองผลิตภัณฑ์ที่จัดกลุ่มและมุมมองผลิตภัณฑ์อย่างง่ายของฉัน บล็อกนี้จะมีคำแนะนำเครื่องมือที่ดีสำหรับสถานะการเลื่อนเมาส์ฉันใช้ไลบรารีขนาดเล็กที่มีปลั๊กอิน jquery หนึ่งชุดและสไตล์ชีท css อีกหนึ่งชุด

ฉันต้องการรวมสองแหล่งข้อมูลไว้ในวีโอไอพีในหน้าเหล่านี้เท่านั้น

หมายเหตุ

  • ฉันใช้ธีมที่กำหนดเอง;
  • แคชเป็นคนพิการ ; และ
  • ไฟล์ของฉันอยู่ใน/jsไดเรกทอรี;

ป่านนี้…

อย่างไรก็ตามฉันรู้ว่าวิธีหนึ่งคือการใช้layout.xmlในโมดูลของฉันในตอนแรกมันใช้งานไม่ได้ดังนั้นฉันคิดว่าฉันอาจต้องการการกำหนดค่าเพิ่มเติมภายในconfig.xmlเพื่อบอก Magento เกี่ยวกับข้อกำหนดด้านโครงร่างของฉัน - นี่ก็ใช้งานไม่ได้เช่นกัน

โดยไม่ได้ทำงานในสิ่งที่ผมหมายถึงคือสินทรัพย์ของฉันไม่ได้โหลด

กรุณาหาแหล่งที่แนบมาด้านล่าง


app / รหัส / ท้องถิ่น / ผู้ขาย / การจัดอันดับ / 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 / รหัส / ท้องถิ่น / ผู้ขาย / การจัดอันดับ / etc / config.xml

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

    ...

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

    ...

</config>

คำตอบ:


17

app/design/frontend/{interface}/{theme}/layout/แรกแฟ้มรูปแบบของคุณควรจะอยู่ใน
ที่สอง หากคุณต้องการเพิ่มไฟล์ css และ js เฉพาะในหน้าผลิตภัณฑ์ที่จัดกลุ่มและเรียบง่ายไม่ใช้ตัว<default>จัดการเลย์เอาต์
ทำให้เค้าโครงของคุณเป็นดังนี้:

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

ขอบคุณมากมันสมเหตุสมผลมาก ฉันเข้าใจเนื่องจากconfig.xmlกำหนดชื่อของไฟล์เลย์เอาต์ xml ที่ฉันสามารถเรียกสิ่งนี้ได้ว่าฉันต้องการอะไร
เถ้า

@Takingsides ใช่. ชื่อสามารถเป็นอะไรก็ได้ที่คุณต้องการ
Marius

4

เช่นนี้ยังไม่ได้ชี้ชัดเจนพอ:

ไดเรกทอรี

ไฟล์ XML เลย์เอาต์สำหรับโมดูลที่กำหนดเองควรเป็นธีมที่แยกกันและวางไว้ในนั้น

app/design/frontend/base/default/layout

คุณสามารถแทนที่ไฟล์ XML เหล่านี้ในธีมที่กำหนดเองของคุณ แต่โดยส่วนใหญ่จะดีกว่าถ้ามีไฟล์เลย์เอาต์เฉพาะธีมเพิ่มเติมที่เพิ่มการเปลี่ยนแปลง ข้อมูลเพิ่มเติม: วิธี / แนวทางที่ถูกต้องในการแก้ไขเทมเพลต Magento คืออะไร?

ชื่อไฟล์

โปรดทราบว่าไฟล์เหล่านั้นบางครั้งเรียกว่า "ไฟล์ layout.xml" แต่layout.xmlจริงๆแล้วไม่ใช่ชื่อไฟล์ที่คุณมักจะพบในรหัสวีโอไอพี รหัสของคุณใช้งานได้หากคุณวางlayout.xmlไฟล์ในตำแหน่งที่ถูกต้อง (ดูด้านบน) แต่การประชุมคือการใช้ชื่อโมดูลตัวพิมพ์เล็ก:

rating.xml

หรือดีกว่า

vendor_rating.xml

โปรดจำไว้ว่าไฟล์ XML เลย์เอาต์จากโมดูลทั้งหมดอยู่ในไดเรกทอรีเดียวดังนั้นชื่อจะต้องไม่ซ้ำกัน!


1

layout.xml ของคุณควรเข้าไปข้างใน

แอพ / ออกแบบ / ส่วนหน้า / [แพ็คเกจที่กำหนดเองของคุณ] / [ธีมที่กำหนดเองของคุณ] / เลย์เอาต์ /


0

ตามที่ระบุไว้ข้างต้นสำหรับกรณีเฉพาะของคุณคุณไม่ควรใช้ภายใน<default>แท็ก แต่ตัวอย่างเช่นคุณสามารถเพิ่มไฟล์ css ที่อยู่ในไดเรกทอรี root magento / js ของคุณด้วยวิธีนี้ในapp/design/frontend/vendor/theme/layout/local.xmlตัวอย่างของคุณ:

<?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>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.