CSSとJSインクルードをフッターに追加するMagento

MagentoサイトのYslow最適化をいくつか行っており、CSSとJsをサイトのフッターに追加しようとしています。

現時点では、レイアウトXMLでヘッド参照タグを使用し、すべてのファイルを含めるためにaddJsおよびaddCssアクションを使用しています。フッターへのヘッド参照を交換しようとしましたが、サイトを表示しようとしたときにエラーが発生しました。これを行う方法はありlocal.xml ますか、フッターテンプレートファイル自体にハードコーディングする必要がありますか？

これはあなたの質問への答えではなく、それでもあなたが考慮したいことがあることを知っています。

Magentoは、特に製品の詳細ページで、かなり多くのインラインjavascriptを使用します。そのjavascriptはヘッダーにロードされた外部スクリプトに依存するため、すべてのインラインスクリプトも外部ファイルに移動し、フッターに追加する必要があります。

Magentoに組み込まれているツールを使用してCSSとJSを圧縮し、gzip圧縮とfar expirationヘッダーを使用してそれらを高速化することで、より速く、より良い結果を得ることができます。そうすれば、デフォルトのMagentoおよびサードパーティの拡張レイアウトを変更することなく、javascriptとCSSによって引き起こされる「遅れ」を最小限に抑えることができます。このように、Magentoまたは拡張機能をアップグレードするときに、すべての作業をやり直す必要はありません。

HTML5ボイラープレートプロジェクトが提供する.htaccessは、このgzip圧縮と遠い有効期限のヘッダーを提供します。http：//inchoo.net/ecommerce/magento/magento-boilerplate/を確認してください。

最初のステップは、「foot」と呼ばれるブロックを作成することです。これは、本質的に「head」と同じですが、別の場所に出力します。これを以下に追加できますpage.xml：

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

これで、XMLファイルで次のコマンドを使用して、JS / CSSを追加できます（フッターのCSSは推奨されません）。

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

内部page/html/foot.phtml：

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

ページテンプレートファイル（などpage/1column.phtml）で、bodyの終了タグの前にこのブロックを出力する必要があります。

    <?php echo $this->getChildHtml('foot') ?>

デフォルトのMagentoテンプレートを使用している場合、JSエラーが発生します。たとえば、ミニ検索フォーム（catalogsearch/form.mini.phtml）を使用します。次のインラインスクリプトがあります。

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

これは、ドキュメント準備ハンドラーにはないため、ロードされるとすぐに呼び出されます。Varienはフッターにあるためまだ存在しないため、エラーが発生します。これを修正するには、ドキュメントレディハンドラーを追加するか、この種のすべてのインラインJSをフッターにも読み込まれる外部ファイルに移動します。このような問題は、サイト全体、特にチェックアウトおよび構成可能な製品ページで発生します。

あなたが遭遇するかもしれない他の問題は、noConflictモードでPrototypeとともにjQueryを使用している場合です。競合が発生しないように、jQueryがPrototypeの前にロードされるようにする必要があります。

Magento v1.6 +の場合（古いバージョンでテストする必要があります）。

1- page/html/footer/extras.phtmlこのコンテンツでテンプレートファイルを作成します。

<?php echo $this->getCssJsHtml() ?>

2-このhtmlノードをレイアウトxmlに追加します。

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3-それだけです！