18

I've done the following to include jQuery from Google CDN in Magento:

<default>
    <reference name="head">
        <block type="core/text" name="google.cdn.jquery">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
                </text>
            </action>
        </block>
    </reference>
</default>

However when I want to implement it with a local fallback, which works quite well, I wind up adding it to my .phtml as such:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
if (!window.jQuery) {
    document.write('<script src="/path/to/your/jquery"><\/script>');
}
</script>
  • Is there a more elegant way of doing this in local.xml than to shove the fallback into the <text> node as I'm doing with jQuery.noConflict?

Edit:

To draw attention to the other part of the question - are there community modules that include jQuery for you? If they have a local jQuery, that's fine - if they use Google CDN - even better. If this isn't out there, I would love to create one.

  • Are there any go-to extensions that handle this without me having to bootstrap it myself?
  • 1
    One very simple community module to include JQuery (semi-self-link): github.com/netz98/N98_BaseJQuery - it only includes a local JQuery. The idea via CDN is nice, feel free to improve via Pull Requests :-) – Alex May 9 '13 at 21:18
  • Out of curiosity: Is the CDN unreliable or why is the fallback needed? What kind of practical experience do you have there? – Alex May 9 '13 at 21:18
  • 2
    Some countries (Iran, Syria, et al) may, at times, block Google and Google CDN. This is my personal experience. I've also seen things like response timeouts that this mitigates. – philwinkle May 9 '13 at 21:22
  • Understand. So it would be cool if you can contribute a solution to the module. – Alex May 9 '13 at 21:24
  • Great find - I didn't see the N98 module when looking for something suitable. I think I'll contribute over there. Thanks! However it may have to be with the <text> method as described above... not sure if that's an acceptable solution. The n98 module uses a separate js include file for calling noConflict, though, I suppose... – philwinkle May 9 '13 at 21:31
18

At the end of the day, doing this via Layout XML is preferable. I have found that the local fallback option is best implemented in a single-line statement minified with the Google Closure Compiler.

<default>
    <reference name="head">
        <block type="core/text" name="google.cdn.jquery">
            <action method="setText">
                <text><![CDATA[<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script>window.jQuery||document.write('<script src="/path/to/your/jquery.js">\x3c/script>');</script><script>jQuery.noConflict();</script>]]></text>
            </action>
        </block>
    </reference>
</default>
  • this doesn't work – fmsthird Nov 4 at 9:41
2

I looked for a long time through the code of the head.phtml files and the files and blocks around but there is no way without changing the templates to inject code into the <head>.

I'm an idiot, you wrote everything already and I oversaw a few times the <?php echo $this->getChildHtml() ?> in the head.phtml :-/

So I would just use a core/template block and a template for this. It is easy to read, easy to understand and easy to manage.

  • The problem I'm trying to overcome is the ability to add/remove this block from certain page types and layouts at-will without having to forcefully include the phtml every time. Right now a static block suffices, but only because it's available from most everywhere... – philwinkle May 9 '13 at 21:23
  • I don't see the problem here. You add it to <default> and remove it, everywhere where you don't want to have it, like every other block. You can think about adding a core/text_list and adding there all the stuff you want (if it is more than one file) to easier remove it on other pages. – Fabian Blechschmidt May 10 '13 at 6:14

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.