क्या जेएस / सीएसएस को पाद लेख पृष्ठ पर जोड़ने का कोई तरीका है?

Question

मुझे वेबसाइट के पाद लेख से संबंधित विशिष्ट जेएस और सीएसएस जोड़ने की एक कस्टम आवश्यकता है । क्या Magento में कोई तरीका है जिसके द्वारा मैं इसे पाद लेख अनुभाग में जोड़ सकता हूं ?

Comments

मैंने इस मुद्दे के लिए ब्लॉग लिखा है। : यहाँ देखें blog.rahuldadhich.com/magento-load-css-js-footer

— राहुल दाधीच

Answer 1

footerब्लॉक सिर की तरह सीधे js के लिए किसी भी समर्थन की पेशकश नहीं करता है।

लेकिन नाम के साथ एक ब्लॉक है before_body_endजहां आप टेम्प्लेट या टेक्स्ट ब्लॉक के साथ अपनी इच्छित सब कुछ जोड़ सकते हैं।

मैं आपके अपने टेम्प्लेट और ब्लॉक प्रकार के Mage_Page_Block_Html_Headबारे में सोचूंगा, तब आप @Dexter की सिफारिश की गई का उपयोग कर सकते हैं।

नहीं, आपको कुछ इस तरह की जरूरत है, आपके पास कोई पेज / html_head ब्लॉक भी नहीं है:

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

Comments

प्रतिक्रिया के लिए धन्यवाद @fabian blechschmidt। मैंने कुछ इस तरह से जोड़ा लेकिन भाग्य और अपवाद भी नहीं। <डिफ़ॉल्ट> <संदर्भ नाम = "पहले_बनाएँ"> <कार्रवाई विधि = "addItem"> <प्रकार> skin_js </ प्रकार> <नाम> js / test.js </ नाम> <params /> </ कार्रवाई> </ संदर्भ > </ Default>

— मार्क

जवाब अद्यतन, आपको एक ब्लॉक की आवश्यकता है!

— फेबियन ब्लेसश्मिड

आप MAN !!! Kudos हैं। उत्तर के लिए एक टन..लेकिन अगर मैं आपको कोड के बारे में थोड़ा और बेहतर समझ के लिए समझाऊं तो मुझे खुशी होगी ..

— Mark

कुछ टिप्पणियों को जोड़ा। यदि आपके पास अधिक प्रश्न हैं, तो कृपया उनसे पूछें - ठोस प्रश्न :-)

— फैबियन ब्लेसस्मिड

ब्लॉक का सही नाम है: <संदर्भ नाम = "पहले_बनाएँ"> और नहीं <संदर्भ नाम = "पहले_बनाएँ">

— टॉमस डर्मिसेक

Answer 2

Magento में पेज मॉड्यूल द्वारा हैडर और पाद लेख भाग प्रदान किया जाता है। शीर्ष लेख और पाद लेख टेम्पलेट देखने के लिए, पर जाएँ

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

पृष्ठ फ़ोल्डर में अन्य फ़ाइलों पर भी एक नज़र डालें। वहां आप देख सकते हैं header.phtmlकि प्रत्येक पृष्ठ के शीर्ष लेख अनुभाग को कौन सा प्रस्तुत करता है। head.phtmlMags में हर पेज के लिए लागू होने वाली js और css फाइलें जोड़ने के लिए उपयोग करें।

पेज फोल्डर में फाइलें भी देखें। वे फ़ाइलें किसी विशेष पृष्ठ के लेआउट विनिर्देश के अनुसार प्रत्येक पृष्ठ के लिए प्रस्तुत करेंगी।

इस मॉड्यूल पर एक गंभीर अध्ययन करें। यह आपकी बहुत मदद करेगा।

संपादित करें

आप अपने 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

आपके काम के लिए शुभकामनाएँ।

Comments

मैं page.xml के साथ काम नहीं करता । मेरे local.xml में , मुझे xml विधि का उपयोग करना शामिल करना है। आपकी संपादित पोस्ट केवल यह बताती है कि मैं xml फ़ाइलों में जेएस / सीएसएस कैसे जोड़ सकता हूं (जो सवाल नहीं है)।

— मार्क

@ मर्क: आपके qn में, आपके काम के लिए local.xml फ़ाइल का उपयोग करने के लिए कोई संकेत नहीं है। आपकी qn मांग करती है कि आपको पाद लेख में js और css जोड़ने की आवश्यकता है। मेरा अपडेशन उस काम को पूरी तरह से करेगा। किसी भी तरह से आपको इस उद्देश्य के लिए local.xml फ़ाइल की आवश्यकता क्यों है?

— राजीव के टॉमी

एक Mage डेवलपर होने के नाते जो मानकों को बनाए रखता है, कोई भी page.xml का उपयोग क्यों करेगा? आपका कोड <action method="addItem"> <type>skin_js</type> <name>js/yourjsfile.js</name> </action>जेएस को <head> में जोड़ेगा न कि पाद लेख में !!!

— मार्क

Answer 3

इसके लिए XML का उपयोग करें। पाद लेख में Js जोड़ने के लिए पाद लेख का संदर्भ लें। कोड कुछ इस तरह दिखेगा

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

त्वचा फ़ोल्डर में JS जोड़ने के लिए आप निम्नलिखित कोड का उपयोग कर सकते हैं

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

सीएसएस जोड़ने के लिए आप निम्नलिखित 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>

Comments

अमान्य विधि Mage_Page_Block_Html_Footer :: addJs

— मार्क

@ मार्क: ऐसा इसलिए होता है क्योंकि पाद वर्ग में "addJs" नामक एक विधि नहीं होती है। अधिक जानकारी के लिए, इस पर एक नज़र डालें: magento.stackexchange.com/questions/15904/…

— pablofiumara

Answer 4

जावास्क्रिप्ट के लिए, क्या आपने केवल onload या jquery के $ (दस्तावेज़) का उपयोग करने पर विचार किया है? ()?

यह आपको हेडर में अपने कोड को विशिष्ट सेटअप की तरह रखने की अनुमति देगा, लेकिन इसे तब तक न चलाएं जब तक कि आपका जेएस संदर्भित सामग्री लोड न हो जाए।

आपका 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>

Answer 5

हां एक तरीका है, लेकिन आपको कोड के माध्यम से जोड़ना होगा जैसे <body>टैग के अंत से ठीक पहले 1column.phtml फ़ाइल के नीचे इस कोड को जोड़ें ।

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

Comments

बुरी सलाह, क्योंकि आप अपने कोड को सभी टेम्प्लेट में कॉपी नहीं करना चाहते हैं।

— फेबियन ब्लेसश्मिड

हम xml के माध्यम से पाद में जेएस नहीं जोड़ सकते हैं इसलिए मैं इस प्रवाह का उपयोग करता हूं।

— कीयुल शाह

मेरे जवाब पर एक नजर। आप समस्या को हल करते हैं, लेकिन आपको हर रूट टेम्पलेट में कोड को कॉपी करना होगा।

— फेबियन ब्लेसश्मिड

Answer 6

मैं आपके जावास्क्रिप्ट (और सीएसएस) को अनुकूलित करने और Google पेजस्पीड इनसाइट रैंकिंग में सुधार करने में आपकी मदद करने के लिए मीडियाॉक्स पेजस्पीड मॉड्यूल की अत्यधिक अनुशंसा करता हूं।

यह Magento द्वारा html आउटपुट को पार्स करके काम करता है और फिर जावास्क्रिप्ट को html कोड के निचले भाग में ले जाने के लिए कोड पर कट और पेस्ट क्रिया करता है। प्रक्रिया तेज है, लेकिन HTML परिवर्तनों को कैश करने के लिए एक पूर्ण पृष्ठ कैश के साथ संयोजन में सबसे अच्छा उपयोग किया जाता है।

यह मॉड्यूल कैसे काम करता है, इसके बारे में अधिक जानकारी और पेजस्पेड रैंक को बेहतर बनाने में आपकी मदद कर सकता है:

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