1

I am a Magento newbie and today I am trying to apply Slick Slider to my Magento website as a custom module.

I have created a blank module with some simple 'echo' and HTML and they all worked well. However, I don't know what to do with the Slick directory. Should I put it in the website root directory or somewhere? And after that, how can I apply those Js and Css into my module?

Please provide some guidance

1

I don't know what to do with the Slick directory

As per Magento best practices, you should put this slider folder under skin directory. However puting this under lib folder is also fine and will work. But I recommend skin directory.

So put your css js files in skin\frontend\[package]\[theme]\slick_slider\*

How can I apply those Js and Css into my module

Next step is to define layout update xml file inside your module. For this add this snippet inside your module's config.xml file.

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

Now use your this file to add slider specific files (css and js) to head section

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>

Now put html and script specific for the slider in any one of the template file of your module.

Hope that helps

  • @user293167 glad to help you out – Rajeev K Tomy Sep 17 '15 at 13:26
  • @TaiChristian : Is it working,, May i know the steps – Gem Jan 31 '17 at 6:19
1

for the js add it into

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

for css add file into

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

for adding files in head in you module layout file. you can add css and js files like that

<?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>
  • Thank you for your response! I'm sorry if this is a silly question, but where is the "base" directory? – Tai Christian Sep 16 '15 at 11:04
  • you magento main directery.. – Qaisar Satti Sep 16 '15 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.