Come applicare SLICK SLIDER TO MAGENTO

Question

Sono un Magento Newbie e oggi sto cercando di applicare slick slider al mio sito Web Magento come modulo personalizzato.

Ho creato un modulo vuoto con alcuni semplici "echo" e HTML e tutti hanno funzionato bene.Tuttavia, non so cosa fare con la directory slick.Dovrei metterlo nella directory root del sito Web o da qualche parte?E dopo, come posso applicare quegli JS e CSS nel mio modulo?

Si prega di fornire alcune indicazioni

Answer 1

.

Non so cosa fare con la directory slick

Come da magento le migliori pratiche, è necessario inserire questa cartella del cursore in Directory skin.Tuttavia, mettendo questa sotto la cartella lib è anche fine e funzionerà.Ma consiglio la directory skin.

Quindi inserisci i file CSS JS in skin\frontend\[package]\[theme]\slick_slider\*

.

Come posso applicare quegli JS e CSS nel mio modulo

Il passaggio successivo è quello di definire il layout Aggiorna file XML all'interno del modulo.Per questo aggiungere questo snippet all'interno del file config.xml del tuo modulo.

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

.

Ora usa questo file per aggiungere file specifici del cursore (CSS e JS) alla sezione della testa

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

.

Ora inserisci l'HTML e lo script specifici per il cursore in uno qualsiasi del file del modello del modulo.

Spero che aiuti

Answer 2

per il js aggiungerlo in

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

.

per il file CSS Aggiungi

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

.

Per aggiungere file in testa nel tuo file module layout.Puoi aggiungere file CSS e JS come quello

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

.