2011-09-29 21 views
6

local.xml kullanarak Magento ile birlikte gelen komut dosyalarının kalanı ÖNCE jQuery (veya herhangi bir komut dosyası) eklemenin en iyi yolu nedir?jQuery to Magento'a ekleme

I (local.xml olarak) kullanmayı denedik:

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

ama bu baz pakette page.xml içinde Magento tarafından eklenen komut sonuna jQuery ekleyerek biter.

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

ben olmak onlara ihtiyacımız page.xml eklendi betiklerininüzerinde kaldırmak ve daha sonra sırayla local.xml onları-ekliyoruz.Güncel: Hatta kullanarak tüm komut dosyalarını kaldırma denedim (jQuery önce), ama bir şekilde, aynı sırayla biterler (jQuery ile son).

Magento koduna göz attım ve komut dosyalarının kaldırıldığını doğruladıktan sonra Mage_Page_Block_Html_Head içindeki $ -> [data] öğelerine yeniden ekledim, ancak bir noktaya eklendiklerinde sayfa, jQuery ile son eklenir.

Bunu yapmanın daha zarif bir yolu olması gerektiğini tahmin ediyorum, ancak bunu Googling'imde bulamadım. Bulunduğum her şey, başka bir yerde okudum, doğrudan sayfa.xml değiştirilmesini önerir iyi bir fikir değildir.

cevap

9

En performans/hız daha iyi olacaktır içerik dağıtım ağından etmektir kullanırsınız nerede

var $j=jQuery.noConflict(); 

Sonra sadece $j kullanmak Senin internet siten.

çoğunlukla sadece ben eklemek/html/head.phtml ve sağ

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

önce şablon/sayfa açmak:

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

emin jQuery.noConflict() yöntemini çalıştırmak yapmak ve prototip ile çakışmaları önlemek için her zaman $ (dolar işareti) yerine tam jQuery adını kullanın;)

+0

numarasına ekleyebilirsiniz. Teşekkürler. Bir düzenleme, http: src özniteliğinin başlangıcında eksik olmasıdır. Düzenlememe izin vermem çünkü düzenlemem 6'dan fazla değildi. – Luke

+0

Harika;), bunun nedeni mod_pagespeed için üzgünüm. Cevabımı güncellendi. – Kenny

1

Sen _prepareLayout() yöntemde $this->getLayout()->getBlock('head')->addJs('path/to/jquery.js'); ile blok dosyalarında

Bir ihtar ekleyebilirsiniz Magento Prototip kullanır, bu nedenle sadece $ başka bir değişken diğer jQuery ayarlamak emin olmak gerekir. sayfanıza eklemek benim için çalışmak yapılan: normalde $

+0

Bunu, _prepareLayout() yöntemine eklememek, temel dosyaları düzenlemeyi gerektirir mi? Veya temanın içindeki temel dosyaları geçersiz kılmanın bir yolu var mı? – Luke

+1

İşlevselliği genişletmeye çalışıyorsanız, kendi başınıza oluşturmak yerine, http://prattski.com/2010/06/24/magento-overriding-core-files-blocks-models-resources-controllers/ adresine bakın. ve http://prattski.com/2010/06/24/magento-overriding-core-files-blocks-models-resources-controllers/. Kendi temanızı oluşturuyorsanız, her zaman – jprofitt

13

Bunu yapmak için tercih edilen (ve en esnek yol) tercihimkullanılarak XML, iki ayrı Javascript dosyası ve oluşturacağımız yeni bir dosya. İlk Javascript dosyası jQuery'nin kendisi - tamamen değiştirilmemiş. İkinci dosya ben no-conflict.js arayıp yalnızca bir satır içerir:

<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: Bizim local.xml head bölümüne,

jQuery.noConflict(); 

Şimdi yeni bir blokla birlikte bu dosyaların ikisi de eklemek jQuery'nin Prototip ile birlikte çalışmasına izin vermek için gereklidir, varsayılan olarak Magento'da bulunan Javascript çerçevesi.JQuery ve no-conflict dosyalarının ayrı tutulması, jQuery dosyasının kendisini noConflict() yöntemini içerecek şekilde düzenleme gereği olmadan jQuery'yi gerektiği gibi yükseltmenize veya yükseltmenize olanak tanır.

XML'de şablon dosyası top_scripts.phtml olarak ayarlanmış yeni bir blok (topScripts) oluşturduk.

/app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/'a gidin ve bu yeni dosyayı oluşturun.

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

Şimdi /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml düzenleyin: Bu bir satır içerir.

sizin head.phtml satırı <?php echo $this->getCssJsHtml() ?> bulun ve üstündeki doğrudan bu satırı ekleyin:

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

Doğru başka Magento Javascript önce jQuery eklendi şimdi var. Alternatif güzergah olarak

+0

Yaratıcı! Bu şimdi benim yeni tercih ettiğim yol! – andnil

+0

Bu işlem çalışırken, komut dosyalarının geri kalanı öncesinde Jquery'nin nasıl ekleneceği sorusunu yanıtlamıyor. – Christian

+0

Diğer tüm Magento Javascripts ÖNCE jQuery eklemek için düzenlenmiş! – cfx

1

ve bunun yerine elle Magento her seferinde dosyaları düzenleme, sadece jQuery bu uzantıyı kullanarak ekleyebilirsiniz: http://www.intersales.de/shop/magento-magejquery.html

o belirttiğiniz jQuery sürümünü indirmek ve tüm gerekli dosyaları yüklemek olduğu için ne yapar? otomatik olarak referansları şablonunuza eklerken. Arka uçta istenen sürümü belirtebilir ve çakışma ayarını etkinleştirebilirsiniz.