JS / CSSをフッターページに追加する方法はありますか?


回答:


17

このfooterブロックは、headのようにjsを直接サポートしていません。

しかしbefore_body_end、テンプレートまたはテキストブロックで必要なすべてを追加できる名前のブロックがあります。

私はあなた自身のテンプレートとブロックタイプについて考えますMage_Page_Block_Html_Head、そしてあなたは@Dexterが推奨するものを使うことができます。

いいえ、次のようなものが必要です。参照するpage / html_headブロックもありません。

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

そして、あなたのテンプレートの中に、あなたは必要です:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

@fabian blechschmidtの応答に感謝します。私はこのようなものを追加しましたが、運も例外もありませんでした。<default> <reference name = "before_body_end"> <action method = "addItem"> <type> skin_js </ type> <name> js / test.js </ name> <params /> </ action> </ reference> > </ default>
マーク

答えを更新しました、あなたはブロックが必要です!
Fabian Blechschmidt 2014

あなたは男です!!!称賛..答えをたくさんありがとう..しかし、コードについて少し説明してもらえれば幸いです。理解を深めるために..
マーク

いくつかのコメントを追加しました。さらに質問がある場合は、質問してください-具体的な質問:-)
Fabian Blechschmidt 14

1
ブロックの正しい名前は次のとおりです。<reference name = "before_body_ends">ではなく<reference name = "before_body_end">
Tomas Dermisek 2014年

3

ヘッダーおよびフッター部分は、magentoのPageモジュールによってレンダリングされます。ヘッダーとフッターのテンプレートを表示するには、

app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml

ページフォルダ内の他のファイルも見てください。header.phtml各ページのどのレンダーヘッダーセクションを確認できます。head.phtmlmagentoのすべてのページに適用できるjsおよびcssファイルを追加するために使用します。

ページフォルダ内のファイルも参照してください。これらのファイルは、特定のページのレイアウト仕様に従って、ページごとにレンダリングされます。

このモジュールについて真剣に検討してください。それはあなたを大いに助けます。

編集する

あなたはcs。とjsをpage.xmlを通して追加できます。それはあなたの問題を解決すると思います。に行く

app / design / frontend/ <your_package> /<your_theme> / layout / page.xml

このコードスニペットをdefeault handle。に追加します(このハンドルに追加された多くのjsおよびcssファイルを確認できます。これらのコードの下にこのコードを追加するだけです)。

 //this will add your js
 <action method="addItem">
     <type>skin_js</type>
     <name>js/yourjsfile.js</name>
 </action>  
 //this will add your css file
 <action method="addItem">
     <type>skin_css</type>
     <name>js/yourcssfile.css</name>
 </action>

それでおしまい。カスタムjsおよびcssファイルが場所にあることを確認してください

  skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
  skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css

あなたの仕事に頑張ってください。


page.xmlを使用していません。私のlocal.xmlには、xmlメソッドの使用を含める必要があります。あなたの編集された投稿は、xmlファイルにJS / CSSを追加する方法を提案するだけです(これは問題ではありません)。
マーク

@Mark:qnでは、作業にlocal.xmlファイルを使用するためのヒントはありません。qnはjsおよびcssをフッターに追加する必要があることを要求します。私の更新はその仕事を完全に行います。なぜこの目的のためにlocal.xmlファイルが必要なのですか?
Rajeev K Tomy 14

標準を維持するMage開発者であるのに、なぜ誰もがpage.xmlを使用するのですか あなたのコード<action method="addItem"> <type>skin_js</type> <name>js/yourjsfile.js</name> </action>はフッターではなく<head>にJSを追加します!!!
マーク14

2

XMLを使用してください。Jをフッターに追加するには、フッター参照を呼び出します。コードは次のようになります

<reference name="footer">
   <action method="addJs"><script>js/file.js</script></action>
</reference>

JSをスキンフォルダーに追加するには、次のコードを使用できます

    <reference name="footer">
    <action method="addItem"><type>skin_js</type><name>js/test.js</name></action>
</reference>

CSSを追加するには、次のXMLコードを使用できます

<reference name="footer">
    <action method="addCss"><stylesheet>css/layout.css</stylesheet></action>
</reference>

またはあなたも使うことができます

<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
  </reference>

無効なメソッドMage_Page_Block_Html_Footer :: addJs
マーク

@Mark:これは、フッタークラスに「addJs」という名前のメソッドがないために発生します。:詳細については、これを見ていmagento.stackexchange.com/questions/15904/...
pablofiumara

2

javascriptの場合、onloadまたはjqueryの$(document).ready()を使用することを検討しましたか?

これにより、通常の設定のようにコードをヘッダーに配置できますが、jsが参照しているコンテンツが読み込まれるまで実行できません。

js filename.jsコードは次のようになります。

$(document).ready( function(){
   your custom js here
});

レイアウトのコードは次のようになります(設定したとおり、適切なディレクトリを追加する必要があることは明らかです)。

<reference name="head">
   <action method="addItem"><type>js</type><name>js/jquery/jquery.js</name></action>
   <action method="addItem"><type>js</type><name>js/filename.js</name></action>
</reference>

1

はい、1つの方法がありますが、以下のようなコードを介して追加する必要があります。このコードは、1column.phtmlファイルの最後の<body>タグの直前に追加します。

<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>

あなたのコードをすべてのテンプレートにコピーしたくないので、悪いアドバイスです。
Fabian Blechschmidt 2014

xmlを介してフッターにjsを追加できないため、このフローを使用します。
Keyul Shah 14

1
私の答えを見てください。フローは問題を解決しますが、すべてのルートテンプレートにコードをコピーする必要があります。
Fabian Blechschmidt 2014

1

JavaScript(およびCSS)を最適化し、Google PageSpeed Insightのランキングを向上させるために、mediarox pagespeedモジュールを強くお勧めします。

Magentoによるhtml出力を解析し、コードに対してカットアンドペーストアクションを実行して、JavaScriptをHTMLコードの下部に移動することで機能します。プロセスは高速ですが、HTMLの変更をキャッシュするフルページキャッシュと組み合わせて使用​​するのが最適です。

このモジュールがどのように機能するか、およびここでページ速度ランクを向上させるのに役立つ詳細情報:

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.