Як додати специфічний блок JS (та CSS) - шлях _right_?


9

Тож я витратив буквально години на години, гуляючи, читаючи, вивчаючи інші, але ніхто (навіть Алан Шторм!) Цього мені не пояснив. Здається, весь Інтернет зацікавлений у додаванні JS або CSS на певну сторінку Magento 2, але те, що я шукаю, - це додавання JS / CSS до певного блоку .

Отже, ось моє запитання у двох словах:

Який найкращий спосіб додати JS (та додатково CSS) до певного блоку , так що якщо блок присутній на сторінці (*), завантажується JS / CSS, якщо блоку немає, немає CSS / JS? ?

* Це означає, що будь-який блок можна встановити, на сторінці / шаблоні через layout.xml, на користувальницькій сторінці з мого модуля, за допомогою методу toHtml блоку / сторінки або, головне, блоку, вбудованого у WYSIWYG категорії / опис продукту / Блок CMS / Сторінка CMS.

Я читав АЛО від чудових статей Алана (знову Kudos для цього хлопця !!), не кажучи вже про нитки інших статей навколо цього , однак я відчуваю, що всі хочуть додати до сторінки, певної сторінки, а не де колись блок використовується.

Я відчуваю, що я знайомий з різними техніками, але, можливо, тут мені щось не вистачає, тому я хотів би поступитися з громадою, а також, можливо, трохи вивіски для всіх передніх кінців, що приїхали до повних штабелів там, шукаючи подібні питання та розмірковування над варіантами, як я.

Раніше в Magento 1 я хотів би звернутися до конструктора блоків, отримати макет, отримати посилання на голову та зателефонувати там addJs / addCss або, якщо можливо, використати методи у layout.xml. Це означало б, що JS було "додано" до списку ресурсів у конструкторі блоків (до того, як рівень теми виведе головний блок). Але зараз це не здається можливим.

Я прочитав про те, як рухатись щодо додавання JS / CSS (це не просте "як мені ???", це більше, ніж ", що правильний / mag2 спосіб ???") і мені добре знайоме це методики:

  • /view/ evidenceareaSense/layout/ evidencedefault/page_idškar.xml техніка з використанням <head></head>кореневих елементів
  • Додавання блоку Head до мого модуля, доданого до head.additional, з певною логікою щодо того, чи завантажений мій блок
  • використовуючи об’єкти \ Asset \ GroupedCollection та \ Asset \ Repository, щоб вводити їх від захисника сторінки / шаблону (однак, схоже, це не заморожується блоками), потенційно порядку завантаження ??
  • Використання RequireJS та використання конфігурації RequJS до мого модуля

Я щось пропустив ??

Можна вважати, що правильним способом було б використання бібліотеки RequireJS та атрибутів x-magento-init або просто сценарій із require("my_module", function(){ ... })синтаксисом у вбудованому сценарії. Але це здається мені klunky? Мені доведеться налаштовувати сценарії для завантаження скриптів, я змушений вкладати хоча б деякі мої JS, однак, здається, найбільш чутливий спосіб сказати "ось мій блок, тепер вимагайте від мене певного JS", перескочивши це в мій phtml.

Однак я дуже хотів би зробити це за допомогою PHP, як програмний програвач, який я б хотів би інкапсулювати JS і (в ідеалі) дозволити моїй команді переднього кінця написати це так, як вони цього хочуть. Коротше кажучи, подбайте про завантаження (Back End Dev to Frond End Dev "тут є phtml, замініть тему, якщо вам подобається. Так само є файл js, його залежні libs та heres css для блоку").

Це пропонує __constructметод із введеними залежностями в системі активів. Однак я не можу змусити це працювати, здається, це підтверджено у швидкій статті статті Алана Бурі: Magento Quickies: Magento 2: Додавання файлів активів Frontend Asset Programmatic

Зверніть увагу на знак "Отже, будь-які думки про створення блоків, які несуть із собою активи фронту", знаходяться у вікні ". ... облом :(

Дякую, хлопці, що знайшли час для читання та розгляду . Я з нетерпінням чекаю Ваших відповідей!

PS> Очевидно, що це StackExchange, тому я позначу відповідь найкращим курсом для того, що я намагаюся досягти (заблокувати завантаження певних ресурсів), проте я буду доцільно також перелічити як рефракції внизу моєї публікації будь-які і всі відповіді які або додають до дискусії, або пропонують надійне рішення!

Відповіді:


5

Для js це може бути легко, оскільки використовує magento 2 require.js.
Отже, це означає, що ви можете включити js на льоту, коли вам це потрібно.

Блок повинен бути наданий (у більшості випадків) шаблоном.
Тому вам потрібно додати це у свій шаблон:

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

Тепер створіть свій файл js, view/adminhtml|frontend/web/js/filename_here.jsде присутній весь ваш js-код.

require.js буде знати, як забрати файл, коли його буде запитано.

Для файлів css я не знаю, чи можливо.
Файли css повинні переходити до headрозділу сторінки, але, наприклад, якщо у вас є блок всередині вмісту сторінки cms, як це {{block class="..." template="..."}}, коли вміст сторінки cms має бути оброблений, HTML до цього моменту вже наданий тому ви не можете додати нічого іншого до блоку голови через php. Ви можете спробувати додати його як шаблон, <style...але це не те, що ви хочете (я припускаю).


Дякую, Маріус, я досліджую маршрут RequJS як одну з можливостей, які я перераховував вище, але дякую за незмінний приклад! Я погоджуюся, однак він не пропонує вирішення проблеми CSS, однак це може бути глухим моментом через менш компілятор Magento. Крім того, це abit абстрактно, але я гадаю, що ми могли б використовувати requJS для завантаження нашого JS, що, в свою чергу, може додати посилання на таблицю стилів до DOM, його асинхронного принаймні !!!
cygnus digital

Насправді я знаходжу це на сторінках Requjs, як завантажити CSS за допомогою RequireJS! : Requjs.org/docs/faq-advanced.html#css
cygnus digital

@cygnusdigital. Приємно. Тож проблема вирішена :)
Маріус

Привіт, Маріус, так, так, ні, це, безумовно, хороший кандидат на рішення, воно відповідає вимогам, тому я дякую вам за ваш внесок, але я шукаю обговорення та альтернативи. Можливо, це просто я, будучи динозавром, проте я відчуваю, що його швидше мати завантаження JS / CSS всередині конструктора, тобто. "якщо блок побудований / включений, додайте це до голови." : DI цікаво, чи можна умовно додати його до головної частини. (тобто додайте головний блок з мого модуля до head.additional на етапі конструктора блоків).
cygnus digital

це можна зробити за допомогою звичайних блоків, які додаються через файли компонування, але, як я пояснив, ви не можете цього робити для блоків, що містяться у вмісті сторінки, через {{block}}директиви, оскільки розділ заголовка вже надається, коли клас блоку є екземпляром.
Маріус
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.