Como aplicar o controle deslizante Slick ao Magento

Question

Sou um novato em Magento e hoje estou tentando me inscrever Controle deslizante liso ao meu site Magento como um módulo personalizado.

Eu criei um módulo em branco com alguns 'echo' e HTML simples e todos funcionaram bem.No entanto, não sei o que fazer com o diretório Slick.Devo colocá-lo no diretório raiz do site ou em algum lugar?E depois disso, como posso aplicar esses Js e Css no meu módulo?

Forneça alguma orientação

Answer 1

Não sei o que fazer com o diretório Slick

De acordo com as práticas recomendadas do Magento, você deve colocar esta pasta deslizante em skin diretório.No entanto, colocando isso sob lib pasta também está bem e funcionará.Mas eu recomendo skin diretório.

Então coloque seus arquivos css js skin\frontend\[package]\[theme]\slick_slider\*

Como posso aplicar esses Js e Css em meu módulo

O próximo passo é definir o arquivo xml de atualização de layout dentro do seu módulo.Para isso adicione este trecho dentro do seu módulo config.xml arquivo.

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

Agora use este arquivo para adicionar arquivos específicos do controle deslizante (css e js) à seção principal

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

Agora coloque o html e o script específico para o controle deslizante em qualquer um dos arquivos de modelo do seu módulo.

espero que ajude

Answer 2

para o js adicione-o em

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

para css adicionar arquivo em

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

para adicionar arquivos no head em você module layout arquivo.você pode adicionar arquivos css e js assim

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