2011-09-29 11 views
6

पर jQuery जोड़ना स्थानीय.एक्सएमएल का उपयोग कर Magento के साथ आने वाली शेष स्क्रिप्ट से पहले jQuery (या कोई स्क्रिप्ट) जोड़ने का अनुशंसित तरीका क्या है?Magento

मैं (local.xml में) का उपयोग करने की कोशिश की है:

<reference name="head"> 
    <action method="addItem"> 
     <type>skin_js</type> 
     <script>js/jquery-1.6.4.js</script> 
    </action> 
</reference> 

लेकिन इस स्क्रिप्ट को आधार पैकेज में page.xml में Magento द्वारा जोड़ रहे हैं के अंत में jQuery जोड़ने समाप्त होता है।

<action method="removeItem"> 
... 
</action> 

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

मैंने Magento कोड के माध्यम से कदम रखा है और सत्यापित किया है कि स्क्रिप्ट हटा दी जा रही हैं और फिर Mage_Page_Block_Html_Head में यह -> _ डेटा ['आइटम'] में फिर से जोड़ा गया है, लेकिन किसी बिंदु पर, जब वे जोड़े जाते हैं पेज, वे आखिरी jQuery के साथ जोड़े गए हैं।

मुझे लगता है कि ऐसा करने के लिए एक और शानदार तरीका होना चाहिए, लेकिन मुझे अभी तक इसे अपने गुगलिंग में नहीं मिला है। जो कुछ भी मैंने पाया है, वह सीधे पृष्ठ.एक्सएमएल को संशोधित करने की सिफारिश करता है, जिसे मैंने कहीं और पढ़ा है, यह एक अच्छा विचार नहीं है।

उत्तर

9

बेस्ट सामग्री वितरण नेटवर्क है जिसके लिए प्रदर्शन/गति में बेहतर होगा उपयोग करने के लिए है आपका वेबसाइट।

मैं ज्यादातर बस टेम्पलेट/पेज/html/head.phtml और सही

<?php echo $this->getCssJsHtml() ?> 
<?php echo $this->getChildHtml() ?> 

इससे पहले कि मैं जोड़ने खोलें:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 

यह भी सुनिश्चित करें कि आप jQuery.noConflict() विधि चलाने बनाने और प्रोटोटाइप के साथ संघर्ष से बचने के लिए हमेशा $ (डॉलर चिह्न) के बजाय पूर्ण jQuery नाम का उपयोग करें;)

+0

में जोड़ सकते हैं यह बहुत अच्छा काम करता है! धन्यवाद। एक संपादन यह है कि http: src विशेषता की शुरुआत से गायब है। मुझे संपादित करने की अनुमति नहीं दी जाएगी क्योंकि मेरा संपादन> 6 वर्ण नहीं था। – Luke

+0

ग्रेट;), यह mod_pagespeed की वजह से है, इसके लिए खेद है। मेरा जवाब अपडेट किया गया। – Kenny

1

आप _prepareLayout() विधि में $this->getLayout()->getBlock('head')->addJs('path/to/jquery.js'); के साथ अपने ब्लॉक फाइलों में जोड़ सकते हैं

एक चेतावनी, Magento प्रोटोटाइप का उपयोग करता है, तो आप आप बस $ तुलना में एक और चर दूसरे से jQuery सेट सुनिश्चित करें की आवश्यकता होगी। पेज को यह जोड़ा जा रहा है यह मेरे लिए काम किया:

var $j=jQuery.noConflict(); 

तो फिर तुम सिर्फ $j का उपयोग जहाँ आप सामान्य रूप का प्रयोग करेंगे $

+0

_prepareLayout() विधि में इसे जोड़ने से कोर फ़ाइलों को संपादित करने की आवश्यकता नहीं है? या मेरे विषय के अंदर कोर फाइलों को ओवरराइड करने का कोई तरीका है? – Luke

+1

यदि आप अपना खुद का निर्माण करने के बजाए कार्यक्षमता बढ़ाने की कोशिश कर रहे हैं, तो http://prattski.com/2010/06/24/magento-overriding-core-files-blocks-models-resources-controllers/ पर एक नज़र डालें और http://prattski.com/2010/06/24/magento-overriding-core-files-blocks-models-resources-controllers/। यदि आप अपनी खुद की थीम बना रहे हैं, तो आप हमेशा इसे – jprofitt

13

ऐसा करने के लिए मेरा पसंदीदा (और सबसे लचीला तरीका)का उपयोग कर एक्सएमएल के माध्यम से है, दो अलग जावास्क्रिप्ट फ़ाइलें, और एक नई फाइल जो हम बनाएंगे। पहली जावास्क्रिप्ट फ़ाइल स्वयं jQuery है - पूरी तरह से unmodified। दूसरी फ़ाइल मैं no-conflict.js फोन और यह केवल एक पंक्ति है:

<reference name="head"> 
     <block type="page/html_head" name="topScripts" template="page/html/top_scripts.phtml" before="head"> 
      <action method="addItem"> 
       <type>skin_js</type> 
       <name>js/jquery-1.7.2.min.js</name> 
      </action> 
      <action method="addItem"> 
       <type>skin_js</type> 
       <name>js/no-conflict.js</name> 
      </action> 
     </block> 
    </reference> 

no-conflict.js: हमारे local.xml के शीर्ष अनुभाग के,

jQuery.noConflict(); 

अब हम इन फ़ाइलों में से दोनों को जोड़ने, एक नए ब्लॉक के साथ jQuery को प्रोटोटाइप के साथ काम करने की अनुमति देने के लिए जरूरी है, जावास्क्रिप्ट फ्रेमवर्क डिफ़ॉल्ट रूप से Magento में शामिल है।JQuery को रखने और no-conflict फ़ाइल को अलग करने से आप jQuery फ़ाइल को संपादित करने की आवश्यकता के बिना jQuery को अपग्रेड या डाउनग्रेड करने की अनुमति देता है ताकि noConflict() विधि शामिल हो सके।

हमारे एक्सएमएल में हमने टेम्पलेट फ़ाइल top_scripts.phtml पर सेट एक नया ब्लॉक (topScripts) बनाया है।

/app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/ पर नेविगेट करें और यह नई फ़ाइल बनाएं।

<?php echo $this->getCssJsHtml(); ?>

अब संपादित /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml: यह एक पंक्ति में शामिल होंगे।

अपने head.phtml में लाइन <?php echo $this->getCssJsHtml() ?> का पता लगाएं और यह ऊपर सीधे इस पंक्ति जोड़ें:

<?php echo $this->getChildHtml('topScripts') ?>

आप सही ढंग से किसी अन्य Magento जावास्क्रिप्ट से पहले jQuery जोड़ा अब है।

+0

क्रिएटिव! यह अब भी मेरा नया पसंदीदा तरीका है! – andnil

+0

हालांकि यह काम करता है, यह बाकी स्क्रिप्ट से पहले Jquery को शामिल करने के सवाल का जवाब नहीं दे रहा है। – Christian

+0

अन्य सभी Magento जावास्क्रिप्ट से पहले jQuery जोड़ने के लिए संपादित! – cfx

1

एक वैकल्पिक तरीका के रूप में, और इसके बजाय मैन्युअल रूप से संपादित Magento हर बार फाइल की, तो आप बस इस एक्सटेंशन का उपयोग jQuery जोड़ सकते हैं: http://www.intersales.de/shop/magento-magejquery.html

इसके लिए आप jQuery संस्करण आपके द्वारा निर्दिष्ट डाउनलोड करने और सभी आवश्यक फ़ाइलें स्थापित है क्या करता है अपने टेम्पलेट में संदर्भ जोड़ने के दौरान स्वचालित रूप से। बैकएंड में आप वांछित संस्करण निर्दिष्ट कर सकते हैं और नो-विवाद सेटिंग भी सक्रिय कर सकते हैं।

 संबंधित मुद्दे