Magento 2 - Como posso adicionar um arquivo de modelo personalizado em <head>?

9

No magento 1.x, posso adicionar os arquivos css na cabeça usando o helper como no código abaixo.

<reference name="head">
    <action method="addCss"><stylesheet helper="module/helperclass/helperfunction"/></action>
</reference>

Mas não pode fazer isso no Magento 2.

Então agora eu adicionei esse código <link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>">no contêiner "after.body.start".

Alguém sabe como posso adicionar um arquivo de modelo personalizado <head>?

magento2 layout css

— Mike
fonte

17

Se você deseja adicionar um arquivo css ao head, pode usar este código:

<head>
   <css src="path_to/file.css" />
</head>

Mas se você precisar adicionar um bloco personalizado ao cabeçalho, poderá usar este código:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="block_name" template="path_to_file.phtml" />
        </referenceBlock>
    </body>
</page>

Espero que isto ajude

— Ihor Klymchuk
fonte

Você pode sugerir como fazer o mesmo em admin, eu tentei todos os nomes de bloco de referência, mas sem sorte, embora a saída aparece corretamente quando eu uso referenceblock conteúdo

— Sunil Verma

quando estou usando meu bloco personalizado em vez de Magento \ Framework \ View \ Element \ Template, é erro de exibição "o objeto domdocument deve ser criado" como remover esse erro e usar meu bloco personalizado?

— Sanjay Gohil

2

Pesquisou em toda a Web por essa resposta e finalmente conseguiu muitas experiências.

Acredito que seja a maneira mais fácil:
Vá para a página localizada no painel Admin.
Encontre sua página e role a seção de conteúdo para baixo até a seção xml de atualização de layout.
Nessa caixa, você pode adicionar CSS e JS específicos da página.

<head> <css src="js/ingredients.css> </head>

Isso adicionará seu script ao topo da seção principal.
(Tornando as coisas complicadas para o seu JS)

<head><script src="requirejs/require.js"/><script src="js/ingredients.js"/></head>

Acima você notará que eu adicionei o requirejsarquivo primeiro. Isso é feito porque, sem adicioná-lo antes do seu arquivo JS personalizado, você não poderá acessar as outras bibliotecas carregadas no requirejs.

— Daniel Barenboim
fonte