มีวิธีเพิ่ม JS / CSS ในหน้าท้ายกระดาษหรือไม่?

ผมมีความต้องการที่กำหนดเองเพื่อเพิ่ม JS ที่เฉพาะเจาะจงและ CSS ที่เกี่ยวข้องกับเว็บไซต์ของส่วนท้าย Magento มีวิธีใดบ้างที่ฉันสามารถเพิ่มไว้ในส่วนท้ายได้หรือไม่

footerบล็อกไม่ให้การสนับสนุนใด ๆ สำหรับ js โดยตรงเช่นหัว

แต่มีบล็อกที่มีชื่อbefore_body_endซึ่งคุณสามารถเพิ่มทุกสิ่งที่คุณต้องการด้วยเทมเพลตหรือบล็อคข้อความ

ฉันจะคิดถึงเทมเพลตและประเภทบล็อกของคุณเองMage_Page_Block_Html_Headจากนั้นคุณสามารถใช้สิ่งที่ @Dexter แนะนำ

ไม่คุณต้องการอะไรเช่นนี้คุณไม่มีหน้า / html_head block ที่จะอ้างอิงด้วย:

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

และภายในเทมเพลตของคุณคุณต้องการ:

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

ส่วนหัวและท้ายกระดาษคือการแสดงผลโดยโมดูลหน้าในวีโอไอพี หากต้องการดูเทมเพลตส่วนหัวและส่วนท้ายให้ไปที่

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

ลองดูไฟล์อื่นในโฟลเดอร์หน้าด้วย คุณสามารถดูได้header.phtmlที่ส่วนหัวการแสดงผลของแต่ละหน้า head.phtmlใช้เพื่อเพิ่มไฟล์ js และ css ที่ใช้ได้กับทุกหน้าใน magento

ดูไฟล์ในโฟลเดอร์หน้า ไฟล์เหล่านั้นจะแสดงผลสำหรับแต่ละหน้าตามข้อกำหนดโครงร่างของหน้าเฉพาะ

ทำการศึกษาอย่างจริงจังเกี่ยวกับโมดูลนี้ มันจะช่วยคุณได้มาก

แก้ไข

คุณสามารถเพิ่ม css และ js ของคุณผ่าน page.xml ฉันคิดว่ามันจะแก้ปัญหาของคุณ ไปที่

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

และเพิ่มส่วนย่อยของรหัสนี้defeault handle(คุณสามารถดูไฟล์ js และ css จำนวนมากที่เพิ่มในหมายเลขอ้างอิงนี้เพียงเพิ่มรหัสนี้ใต้รหัสเหล่านั้น)

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

แค่นั้นแหละ. ตอนนี้ให้แน่ใจว่าไฟล์ js และ css ที่กำหนดเองของคุณอยู่ในตำแหน่ง

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

ขอให้โชคดีสำหรับการทำงานของคุณ

ใช้ XML สำหรับมัน ในการเพิ่ม Js ในส่วนท้ายเรียกการอ้างอิงส่วนท้าย รหัสจะมีลักษณะเช่นนี้

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

ในการเพิ่ม JS ในโฟลเดอร์ skin คุณสามารถใช้รหัสต่อไปนี้

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

ในการเพิ่ม css คุณสามารถใช้รหัส xml ต่อไปนี้

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

หรือคุณสามารถใช้

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

สำหรับ javascript คุณได้พิจารณาใช้เพียง $ onload หรือ jquery's $ (document) .ready () หรือยัง

ที่จะช่วยให้คุณวางรหัสของคุณในส่วนหัวเช่นการตั้งค่าทั่วไป แต่ไม่เรียกใช้จนกว่าเนื้อหาที่อ้างอิง js ของคุณจะถูกโหลด

รหัส js filename.js ของคุณจะมีลักษณะดังนี้:

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

โค้ดสำหรับเลย์เอาต์ของคุณจะมีลักษณะดังนี้: (คุณจะต้องเพิ่มไดเรกทอรีที่เหมาะสมตามที่คุณตั้งค่า)

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

ใช่มีหลายวิธี แต่คุณต้องเพิ่มรหัสผ่านด้านล่างเพิ่มรหัสนี้ที่ด้านล่างของไฟล์ 1column.phtml ก่อน<body>แท็กสิ้นสุด

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

ฉันขอแนะนำโมดูล mediarox pagespeed เพื่อช่วยให้คุณเพิ่มประสิทธิภาพ javascript (และ css) ของคุณและปรับปรุงการจัดอันดับข้อมูลเชิงลึกของ google pagespeed

มันทำงานได้โดยการแยกเอาต์พุต HTML โดย Magento แล้วทำการตัดและวางบนโค้ดเพื่อย้ายจาวาสคริปต์ไปที่ด้านล่างของรหัส html กระบวนการนี้รวดเร็ว แต่ใช้ดีที่สุดร่วมกับแคชแบบเต็มหน้าเพื่อแคชการเปลี่ยนแปลง html

ข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโมดูลนี้และสามารถช่วยคุณปรับปรุงอันดับหน้าเพจได้ที่นี่:

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