Blok Spesifik JS (ve CSS) nasıl eklenir - _right_ yolu?


9

Bu yüzden tam anlamıyla saatlerce googling, okuma, ect okuyarak saatler geçirdim, ama kimse (Alan Storm bile!) Bunu bana açıklamamıştı. Tüm internet Magento 2'nin belirli bir sayfasına JS veya CSS eklemekle ilgileniyor gibi görünüyor , ancak aradığım şey belirli bir bloğa JS / CSS eklemek .

Kısacası sorum şu:

Belirli bir bloğa JS (ve ek olarak CSS) eklemenin en iyi yolu nedir , böylece blok sayfada (*) mevcutsa, JS / CSS yüklenir, blok yoksa, CSS / JS olmaz mı? ?

* Bu, her durumda, bir bloğun / sayfanın toHtml yöntemi veya en önemlisi bir kategorinin WYSIWYG'sine gömülü bir blok aracılığıyla, layout.xml yoluyla bir sayfada / şablonda, modülümden özel bir sayfada oluşturulabileceği anlamına gelir / ürün açıklaması / CMS Bloğu / CMS Sayfası.

Ben Alan'ın büyük makaleler ALOT okudum (Kudos yine bu adama !!), bu konuda diğer makalelerin reams bahsetmiyorum , ancak herkesin bir sayfaya, belirli bir sayfaya eklemek istediği hissi alıyorum, hiç blok kullanılır.

Çeşitli tekniklere aşina olduğumu hissediyorum, ancak burada bir şey eksik olabilirim, bu yüzden topluluktan bir fikir birliği istiyorum, aynı zamanda orada arayan tam yığın geliştiricilere yönelik tüm ön uçlar için belki de bir işaret direği istiyorum. benzer soruları ve benim gibi seçenekleri düşünerek.

Daha önce, Magento 1'de blok yapıcısına bakar, düzeni alır, kafa referansını alır ve orada addJs / addCss çağırır veya mümkünse layout.xml'deki yöntemleri kullanırdım. Bu JS'nin blok yapıcısındaki kaynak listesine "eklendi" anlamına gelir (tema seviyesi kafa bloğunun çıktısını almadan önce). Ancak bu artık mümkün görünmüyor.

Ben nasıl JS / CSS (bu basit bir "nasıl yaparım ???" bu daha kısa bir "doğru / mag2 yolu nedir ???" nedir) ekleme hakkında gitmek okumuş ve bunlara aşina değilim teknikleri:

  • / view/[area Cialis/layout/[default/page_id Cialis.xml tekniği, <head></head>kök öğelerini kullanma
  • Modülüme bir Head block eklenmesi , head.additional öğesine eklenir, bloğumun yüklenip yüklenmediğine ilişkin bir tür mantıkla birlikte
  • potansiyel olarak yükleme sırası bir sayfa / Şablon (bu bloklarla ork görünmüyor gibi) enjekte etmek için \ Asset \ GroupedCollection ve \ Asset \ Repository Nesneleri kullanarak ??
  • RequireJS kullanımı ve modülüme bir requirJS yapılandırması uygulanması

Bir şey kaçırdım mı ??

Biri, doğru yolun RequireJS kitaplığını ve x-magento-init özniteliklerini veya yalnızca require("my_module", function(){ ... })satır içi komut dosyasında sözdizimine sahip bir komut dosyasını kullanmak olduğuna inanır . Ama bu bana körelmiş gibi geliyor mu? Komut dosyalarını yüklemek için komut dosyaları ayarlamak zorunda kalacaktım, JS'mden en azından bazılarını satır içine almak zorunda kaldım, ancak bu benim phtml içine haşhaş, "İşte benim blok, şimdi bana biraz JS gerektirir" demenin en şüpheli yolu gibi görünüyor.

Ancak ben gerçekten PHP ile bunu yapmak istiyorum, bir backend / yığın programcı olarak ideal JS uzağa kapsüllemek istiyorum ve (ideal) ön uç ekibi istedikleri gibi bu yazmak için izin istiyorum. Kısacası yükleme dikkat edin (Back End Dev to Frond End Dev "phtml heres, isterseniz temayı geçersiz kılar, aynı şekilde js dosyasını, bağımlı lbs ve blok için css heres").

Bu __construct, Varlıklar sistemindeki Enjekte Edilmiş Bağımlılıkların yöntemini göstermektedir . Ancak bu işe yarayamıyorum, bu Alan Storms hızlı makalesinde teyit gibi görünüyor: Magento Quickies: Magento 2: Programlı ön uç varlık dosyaları ekleme

"Öyleyse onlarla ön uç varlıklarını taşıyan bloklar oluşturma düşüncesi pencereden dışarı çıksın" işaretini not edin . ... bummer :(

Okumak ve düşünmek için zaman ayırdığınız için teşekkürler . Yanıtlarınızı duymayı dört gözle bekliyorum!

PS> Açıkçası bu StackExchange olduğunu, bu yüzden cevabı elde etmeye çalıştığım şey için en iyi kurs olarak işaretleyeceğim (belirli kaynak yüklemesini engelleyin) ancak aynı zamanda yazımın altındaki referanslar olarak listelemeye ve tüm cevaplara girmeye çalışacağım ya tartışmaya katkıda bulunur ya da sağlam bir çözüm önerir!

Yanıtlar:


5

Js için kolay olmalı çünkü magento 2 kullanıyor require.js.
Bu, ihtiyacınız olduğunda anında bir js ekleyebileceğiniz anlamına gelir.

Bir blok bir şablon tarafından (çoğu durumda) oluşturulmalıdır.
Bu yüzden bunu şablonunuza eklemeniz gerekir:

<script type="text/javascript">
    require([
        "jquery",
        .... //any other js dependencies you have
        "Namespace_Module/js/filename_here"
    ], function(){
        //some js code here. 
        //if you don't need any additional js code just have an empty function
    });
</script>

Şimdi view/adminhtml|frontend/web/js/filename_here.jstüm js kodunuzun bulunduğu yerde js dosyanızı oluşturun .

require.js talep edildiğinde dosyanızı nasıl alacağınızı bilecektir.

Css dosyaları için mümkün olup olmadığını bilmiyorum.
Css dosyaları headsayfanın bölümüne gitmelidir , ancak bloğunuz böyle bir cms sayfasının {{block class="..." template="..."}}içeriğinde varsa, cms sayfasının içeriği işlendiğinde, o noktaya kadar olan html zaten işlenir böylece php üzerinden kafa bloğuna başka bir şey ekleyemezsiniz. Bunu şablona eklemeyi deneyebilirsiniz, <style...ancak istediğiniz şey bu değildir (sanırım).


Teşekkürler Marius, requirJS rotasını yukarıda listelediğim olasılıklardan biri olarak araştırıyorum, ancak kısa örnek için teşekkür ederim! Ancak, CSS sorununa bir çözüm sunmadığını kabul ediyorum, ancak bu Magento'nun Daha Az derleyici vb. Nedeniyle bir sessiz nokta olabilir. Ayrıca, abit soyut ama sanırım biz JS yüklemek için requirJS kullanabilirsiniz ki sırayla DOM için stil sayfasına bir bağlantı ekleyebilir, onun en az asenkron !!!
cygnus digital

Aslında, bunu requirjs sayfalarında, RequireJS ile CSS nasıl yükleyeceğimi buldum! : requirjs.org/docs/faq-advanced.html#css
cygnus digital

@cygnusdigital. Güzel. So problem çözüldü :)
Marius

Merhaba Marius, evet ve hayır, bu kesinlikle çözüm için iyi bir aday, gereksinimlere uyuyor, bu yüzden girdiniz için teşekkür ederim, ama tartışma ve alternatifler arıyorum. Belki de sadece ben bir dinozor olmak, ancak JS / CSS bir kurucu içinde yükleme için daha özlü hissediyorum, yani. "blok oluşturulmuş / dahil edilmişse, bunu başa ekleyin." : DI şartlı olarak kafaya eklemek mümkün olup olmadığını merak ediyorum. Anında ek blok. (yani, modülümden head.add komut satırına blok yapıcı aşamasında bir head block ekleyin).
cygnus digital

bunu düzen dosyaları aracılığıyla eklenen normal bloklarla yapabilirsiniz, ancak açıkladığım gibi, {{block}}direktifler aracılığıyla sayfa içeriğine dahil edilen bloklar için bunu yapamazsınız , çünkü blok bölümü somutlaştırıldığında başlık bölümü zaten oluşturulur.
Marius
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.