Ajout de CSS et JS à <head> en utilisant un module layout.xml pour le bloc


9

Synopsis

Je voudrais ajouter un bloc à ma vue de produit groupée et à ma vue de produit simple. Ce bloc aura de belles info-bulles pour les états de survol, j'utilise une petite bibliothèque avec un plugin jquery et une feuille de style css.

Je souhaite inclure ces deux ressources dans le magento uniquement sur ces pages.

Remarques

  • J'utilise un thème personnalisé;
  • La mise en cache est désactivée ; et
  • Mes fichiers se trouvent dans le /jsrépertoire;

Jusqu'ici…

Néanmoins, je savais qu'une façon était d'utiliser layout.xmldans mon module, au début, cela ne fonctionnait pas, alors j'ai pensé que j'avais peut-être besoin d'une configuration supplémentaire à l'intérieur de moi config.xmlpour informer Magento de mes exigences de mise en page - cela ne fonctionnait pas non plus.

Par n'a pas fonctionné, je veux dire que mes actifs n'ont pas été chargés.

Veuillez trouver la source ci-jointe ci-dessous.


app / code / local / Vendor / Rating / etc / layout.xml

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </default>
</layout>

app / code / local / Vendor / Rating / etc / config.xml

<?xml version="1.0"?>
<config>

    ...

    <frontend>
        <layout>
            <updates>
                <vendor_rating>
                    <file>layout.xml</file>
                </vendor_rating>
            </updates>
        </layout>
    </frontend>

    ...

</config>

Réponses:


17

Tout d'abord, votre fichier de mise en page doit être placé dans app/design/frontend/{interface}/{theme}/layout/.
Seconde. Si vous souhaitez ajouter les fichiers css et js uniquement dans les pages produit groupées et simples, n'utilisez pas la <default>poignée de mise en page.
Faites ressembler votre mise en page à ceci:

<?xml version="1.0"?>
<layout>
    <my_handle><!-- declare a custom handle so you won't duplicate the code -->
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </my_handle>
    <PRODUCT_TYPE_simple><!-- layout handle for simple products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_simple>
    <PRODUCT_TYPE_grouped><!-- layout handle for grouped products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_grouped>
</layout>

Merci beaucoup, cela a beaucoup de sens. Je suppose que mon config.xmldéfinit le nom du fichier xml de mise en page que je peux appeler comme je le voulais?
ash

@Tanciesides. Oui. Le nom peut être ce que vous voulez.
Marius

4

Comme cela n'a pas encore été souligné assez clairement:

Répertoires

Les fichiers XML de mise en page pour un module personnalisé doivent être indépendants du thème et donc placés dans

app/design/frontend/base/default/layout

Vous pouvez remplacer n'importe lequel de ces fichiers XML dans votre thème personnalisé, mais dans la plupart des cas, il est préférable d'avoir un fichier de disposition spécifique au thème supplémentaire qui ajoute des modifications. Plus d'informations: Quelle est la bonne façon / approche pour modifier un modèle Magento?

Noms de fichiers

Notez que ces fichiers sont parfois appelés "fichiers layout.xml", mais ce layout.xmln'est en fait pas un nom de fichier que vous trouverez généralement dans n'importe quel code Magento. Votre code fonctionne si vous placez votre layout.xmlfichier au bon endroit (voir ci-dessus), mais la convention est d'utiliser le nom du module en minuscule:

rating.xml

ou mieux

vendor_rating.xml

N'oubliez pas que les fichiers XML de mise en page de tous les modules sont dans un seul répertoire, donc le nom doit être unique!


1

Votre layout.xml devrait aller à l'intérieur

application / design / frontend / [VOTRE FORFAIT PERSONNALISÉ] / [VOTRE THÈME PERSONNALISÉ] / mise en page /


0

Comme indiqué ci-dessus pour votre cas particulier, vous ne devez pas l'utiliser à l'intérieur des <default>balises, mais à des fins d'exemple, vous pouvez ajouter des fichiers CSS qui résident dans votre répertoire racine magento / js de cette manière dans votre app/design/frontend/vendor/theme/layout/local.xmlpar exemple:

<?xml version="1.0"?>

<layout version="0.1.0">
    <default>
        <reference name="head">
             <action method="addItem">
                <type>js_css</type>
                <stylesheet>css/styles.css</stylesheet>
                <params>media="all"</params>
            </action>
        </reference>
    </default>
</layout>
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.