スリックスライダをマゼントに適用する方法

Question

マゼント初心者であり、今日は slick slider カスタムモジュールとしてのMy Magentoのウェブサイトに。

私はいくつかの単純な「echo」とhtmlを持つ空白のモジュールを作成し、それらはすべてうまくいった。ただし、Slickディレクトリで何をすべきかわかりません。私はそれをウェブサイトのルートディレクトリまたはどこかに置くべきですか？その後、私はそれらのJSとCSSを私のモジュールに適用することができますか？

いくつかのガイダンスを提供してください

Answer 1

Slick Directory

を使って何をすべきかわかりません

マゼントのベストプラクティスごとに、このスライダフォルダをskinディレクトリに入れる必要があります。ただし、これをlibフォルダに入れることもまた大丈夫で機能します。しかし、skinディレクトリをお勧めします。

だからCSS JSファイルをskin\frontend\[package]\[theme]\slick_slider\*

に入れる

それらのJSとCSSをモジュールに適用する方法

次のステップは、モジュール内のレイアウトアップデートXMLファイルを定義することです。このためにこのスニペットをモジュールのconfig.xmlファイル内に追加します。

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

.

このファイルを使用してスライダ固有のファイル（CSSとJS）をヘッドセクションに追加する

ファイル：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>

.

モジュールのテンプレートファイルのいずれかのテンプレートファイルにスライダのHTMLとスクリプトを固有のものにします。

を助けたい

Answer 2

JSを追加

に追加する

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

.

CSSの場合はファイルを

に追加します。

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

.

module layoutファイルにファイルを登録するためのファイルを追加します。そのようなCSSファイルとJSファイルを追加できます。

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

.