Adding external JavaScript file to Magento
How to add external JavaSc开发者_StackOverflow社区ript file to Magento, so it's code would be included on every frontend page?
To add an external JS without any problem use this:
<reference name="head">
<block type="core/text" name="google.cdn.jquery">
<action method="setText">
<text>
<![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
</text>
</action>
</block>
</reference>
Put the JS file somewhere into the "js" folder, and in the XML layout you can include it with:
<reference name="head">
<action method="addJs"><script>folder/file.js</script></action>
</reference>
Hope that helps.
Edit: You can also do it in your block:
protected function _prepareLayout()
{
$this->getLayout()->getBlock('head')->addJs('path/from/js/folder/to/your/file.js');
return parent::_prepareLayout();
}
You can use Inchoo_Xternal extension. So you can do something like this:
<layout version="0.1.0">
<default>
<reference name="head">
<action method="addItem"><type>external_css</type><name>http://developer.yahoo.com/yui/build/reset/reset.css</name><params/></action>
<action method="addItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js</name><params/></action>
<action method="addExternalItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/imageloader/imageloader-min.js</name><params/></action>
<action method="addExternalItem"><type>external_css</type><name>http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css</name><params/></action>
</reference>
</default>
<catalog_product_view>
<reference name="head">
<action method="removeItem"><type>external_css</type><name>http://developer.yahoo.com/yui/build/reset/reset.css</name><params/></action>
<action method="removeItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js</name><params/></action>
<action method="removeExternalItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/imageloader/imageloader-min.js</name><params/></action>
<action method="removeExternalItem"><type>external_css</type><name>http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css</name><params/></action>
</reference>
</catalog_product_view>
</layout>
Here you can find more info about this.
<block type="core/text" name="jquery">
<action method="setText">
<text>
<![CDATA[<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js?ver=3.9.2"></script>]]>
</text>
</action>
</block>
Create/edit the following:
app/design/frontend/PATH/TO/YOURTHEME/layout/local.xml
Make it look like so--should be self explanatory...
<!-- Add an EXTERNAL stylesheets -->
<action method="addLinkRel"><rel>stylesheet</rel><href>https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400,300,700|Open+Sans:300italic,400,300</href></action>
<!-- Add an EXTERNAL javascript -->
<action method="addLinkRel"><rel>text/javascript</rel><href>https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js</href></action>
<!-- Add stylesheets from your local theme directory located in skin/frontend/ -->
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<!-- Add javascript from your local theme directory located in skin/frontend/ -->
<action method="addJs"><script>bootstrap.min.js</script></action>
Work fine with 2.1.7
app/design/frontend/PATH/TO/YOURTHEME/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/bootstrap.min.css" />
<css src="css/YOUR.css" order="99" />
<link src="js/jquery.js" />
<link src="js/bootstrap.js" />
<link src="js/YOUR.js" />
</head>
</page>
Method "addItem" and type "link_rel" to add external css file from page.xml
<action method="addItem"><type>link_rel</type> <name>//vjs.zencdn.net/4.12/video-js.css</name><params>rel="stylesheet"</params></action>
None of the methods above worked for me because the script was not hosted on the same domain as the website and had to be controlled using a config variable.
This was my solution:
/** @var Mage_Core_Model_Layout $layout */
$layout = Mage::getSingleton('core/layout');
/** @var Mage_Core_Block_Text $block */
$block = $layout->createBlock('Mage_Core_Block_Text', $name);
$block->setText('<script type="text/javascript" src="'.$url.'"></script>');
/** @var Mage_Page_Block_Html_Head $head */
$head = $layout->getBlock('head');
$head->append($block);
I did this in an observer observing controller_action_layout_generate_blocks_after
精彩评论