Cómo aplicar el control deslizante Slick a Magento

Question

Soy un novato en Magento y hoy estoy intentando postularme. Control deslizante resbaladizo a mi sitio web Magento como un módulo personalizado.

Creé un módulo en blanco con un 'eco' simple y HTML y todos funcionaron bien.Sin embargo, no sé qué hacer con el directorio de Slick.¿Debo ponerlo en el directorio raíz del sitio web o en algún lugar?Y después de eso, ¿cómo puedo aplicar esos Js y Css en mi módulo?

Por favor proporcione alguna orientación

Answer 1

No sé qué hacer con el directorio de Slick.

Según las mejores prácticas de Magento, debe colocar esta carpeta deslizante en skin directorio.Sin embargo, poner esto bajo lib La carpeta también está bien y funcionará.pero lo recomiendo skin directorio.

Así que coloque sus archivos css js skin\frontend\[package]\[theme]\slick_slider\*

¿Cómo puedo aplicar esos Js y Css en mi módulo?

El siguiente paso es definir el archivo xml de actualización del diseño dentro de su módulo.Para esto, agregue este fragmento dentro del archivo de su módulo. config.xml archivo.

<config>
    <frontend>
        <layout>
            <updates>
                <{namespace_module}>
                    <file>{namespace_module}.xml</file>
                </{namespace_module}>
            </updates>
        </layout>
    </frontend>
</config>

Ahora use este archivo para agregar archivos específicos del control deslizante (css y js) a la sección principal

Archivo : app\design\frontend\[package]\[theme]\layout\{namespace_module.xml}

<layout>
    <{layout_update_handle_you_need}>
        <reference name="head">
            <action method="addItem">
                <type>skin_css</type>
                <item>slick_slider/slick.css</item>
            </action>
            <action method="addItem">
                <type>skin_css</type>
                <item>slick_slider/slick-theme.css</item>
            </action>
            <!-- add jquery if not present -->
            <action method="addItem">
                <type>skin_js</type>
                <item>slick_slider/slick.min.js.css</item>
            </action>
        </reference>
    </{layout_update_handle_you_need}>
</layout>

Ahora coloque html y script específicos para el control deslizante en cualquiera de los archivos de plantilla de su módulo.

Espero que ayude

Answer 2

para el JS agregarlo en

base/js/modulename/   //put you js file here

para CSS Agregar archivo en

base/skin/frontend/default Or Base/default/css/modulename/  //put css file here

para agregar archivos en la cabeza en el archivo module layout.Puede agregar archivos CSS y JS como ese

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
      <reference name="head">
        <action method="addCss"><stylesheet>css/modulename/style.css</stylesheet></action>

        <action method="addJs"><script>modulename/search.js</script></action>

      </reference>
</default>
</layout>