Magento 2 - Comment puis-je ajouter un fichier de modèle personnalisé dans <head>?


9

Dans magento 1.x, je peux ajouter les fichiers css dans la tête en utilisant une aide comme le code ci-dessous.

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

Mais ne peut pas faire cela sur Magento 2.

Alors maintenant, j'ai ajouté ce code <link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>">dans le conteneur "after.body.start".

Quelqu'un sait comment puis-je ajouter un fichier de modèle personnalisé <head>?

Réponses:


17

Si vous souhaitez ajouter un fichier CSS dans head, vous pouvez utiliser ce code:

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

Mais si vous devez ajouter un bloc personnalisé dans head, vous pouvez utiliser ce code:

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

J'espère que cela t'aides


Pouvez-vous suggérer comment faire la même chose dans l'administration, j'ai essayé tous les noms de blocs de référence mais sans succès, bien que la sortie s'affiche correctement lorsque j'utilise le bloc de référence de contenu
Sunil Verma

quand j'utilise mon bloc personnalisé au lieu de Magento \ Framework \ View \ Element \ Template c'est une erreur d'affichage "l'objet domdocument doit être créé" comment supprimer cette erreur et utiliser mon bloc personnalisé?
Sanjay Gohil

2

J'ai recherché cette réponse partout sur le Web, et j'ai finalement obtenu de nombreuses expérimentations.

Je pense que c'est le moyen le plus simple:
accédez à la page située dans le panneau d'administration.
Recherchez votre page et faites défiler la section de contenu jusqu'à la section xml de mise à jour de la mise en page.
Dans cette boîte, vous pouvez ajouter des CSS et JS spécifiques à une page.

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

Cela ajoutera votre script en haut de la section head.
(Rendre les choses difficiles pour votre JS)

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

Ci-dessus, vous remarquerez que j'ai ajouté le requirejsfichier en premier. Cela se fait car sans l'ajouter avant votre fichier JS personnalisé, vous ne pourrez pas accéder aux autres bibliothèques chargées dans requirejs.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.