Agregar CSS y JS a <head> usando un módulo layout.xml para el bloque


9

Sinopsis

Me gustaría agregar un bloque a mi vista de producto agrupada y mi vista de producto simple. Este bloque tendrá algunas sugerencias de herramientas agradables para los estados de desplazamiento, estoy usando una pequeña biblioteca con un complemento jquery y una hoja de estilo CSS.

Deseo incluir estos dos recursos en of magento solo en estas páginas.

Notas

  • Estoy ejecutando un tema personalizado;
  • El almacenamiento en caché está deshabilitado ; y
  • Mis archivos están dentro del /jsdirectorio;

Hasta ahora…

Sin embargo, sabía que una forma era usarlo layout.xmlen mi módulo, al principio esto no funcionaba, así que pensé que tal vez necesitaba una configuración adicional dentro de mi config.xmlpara decirle a Magento sobre mis requisitos de diseño; esto tampoco funcionó.

Por no funcionó lo que quiero decir es que mis activos no fueron cargados.

Encuentre la fuente adjunta a continuación.


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>

Respuestas:


17

Primero, debe colocar su archivo de diseño app/design/frontend/{interface}/{theme}/layout/.
Segundo. Si desea agregar los archivos css y js solo en las páginas de productos agrupados y simples, no use el <default>controlador de diseño.
Haga que su diseño se vea así:

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

Muchas gracias, esto tiene mucho sentido. Supongo que ya que mi config.xmldefine el nombre del archivo xml de diseño, ¿puedo llamar a esto lo que quisiera?
ceniza

@Tomando lados. Si. El nombre puede ser lo que quieras.
Marius

4

Como esto aún no se ha señalado con suficiente claridad:

Directorios

Los archivos XML de diseño para un módulo personalizado deben ser independientes del tema y, por lo tanto, colocarse en

app/design/frontend/base/default/layout

Puede anular cualquiera de estos archivos XML en su tema personalizado, pero en la mayoría de los casos, es mejor tener un archivo de diseño específico de tema adicional que agregue cambios. Más información: ¿Cuál es la forma / enfoque correcto para modificar una plantilla de Magento?

Nombres de archivo

Tenga en cuenta que esos archivos a veces se denominan "archivos layout.xml", pero en layout.xmlrealidad no es un nombre de archivo que normalmente encontrará en cualquier código de Magento. Su código funciona si coloca su layout.xmlarchivo en la ubicación correcta (ver arriba), pero la convención es usar el nombre del módulo en minúsculas:

rating.xml

o mejor

vendor_rating.xml

Recuerde que los archivos XML de diseño de todos los módulos están en un solo directorio, por lo que el nombre debe ser único.


1

Su layout.xml debería ir adentro

aplicación / diseño / frontend / [SU PAQUETE PERSONALIZADO] / [SU TEMA PERSONALIZADO] / layout /


0

Como se indicó anteriormente para su caso particular, no debe usarlo dentro de las <default>etiquetas, pero por ejemplo, puede agregar archivos css que residen en su directorio raíz magento / js de esta manera en su app/design/frontend/vendor/theme/layout/local.xmlpor ejemplo:

<?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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.