Retrieve Magento store's base url in javascript

Question

What is the best way to determine a Magento store's base url from inside javascript?

I'm working on a reusable extension that needs to know the store's base url in javascript in order to do some Ajax calls. One would think a property like

Mage.baseUrl

would be available, but I can't find it.

An alternative would be to add the base url as a bit of inline javascript, but I can't find any information on how to add inline javascript programmatically (only external js files), without altering the template.

score 5 · Accepted Answer · answered Jan 20 '12 at 04:09

5

By default this information isn't (reliably, stably) exposed via Javascript. You're going to need to expose it yourself via a custom block added to the layout. The easiest way to do this will be

Adding the block via your theme's local.xml file
Adding a template to your theme for the above block

To add the block to the layout via your local.xml file, something like this should suffice

<default>
    <reference name="root">
        <block name="my_custom_js_block">
            <action method="setTemplate">
                <template>my_custom_js_block/extra-js.phtml</template>
            </action>
        </block>
    </reference>
</default>

Then add the following folder and file to your theme

app/design/frontend/default/your_theme/template/my_custom_js_block/
app/design/frontend/default/your_theme/template/my_custom_js_block/extra-js.phtml

At this point you have a phtml template file that will be rendered on every page. You can add whatever javascript variables you want. I'm fond of a pattern something like

#File: app/design/frontend/default/your_theme/template/my_custom_js_block/extra-js.phtml
<?php
    $h = Mage::helper('core');
    $info = new stdClass();
    $info->base_dir = Mage::getBaseDir();
?>
<script type="text/javascript">
    var my_custom_js_block_info = <?php echo $h->jsonEncode($info); ?>;
</script>

(untested, top-of-my-head code, but should work)

answered Jan 20 '12 at 04:09

Alana Storm

164,128
91
395
599

Thanks for the detailed answer. How could I add this block from my module's config.xml file, rather than local.xml? I'm making a reusable module and can't rely on the user modifying local.xml. – Nick Daugherty Jan 20 '12 at 04:40
Google around for adding a custom layout XML file in your module's config.xml. Just like Mage_Catalog adds catalog.xml, you can have your module include a custom XML file. – Alana Storm Jan 20 '12 at 08:29
1

After a few hours of searching and trying the _many_ contradicting and different methods to accomplish this, I have failed. Is there a way to know if my custom xml file is even being included at run time? – Nick Daugherty Jan 23 '12 at 04:10
Make sure you're in developer mode and then introduce and error into the XML file. If PHP chokes on including the file, you know it's being loaded. See also: http://magento-quickies.tumblr.com/post/16336482158/adding-additional-layout-xml-updates-via-modules – Alana Storm Jan 23 '12 at 05:31
Alright got it finally. The key is that your custom layout file has to be under `/app/design/frontend/[package]/[theme]/layout`, NOT your module's `etc` directory. So I put mine at `/app/design/frontend/base/default/layout/mymodule.xml` and got it working. – Nick Daugherty Jan 24 '12 at 02:56

Retrieve Magento store's base url in javascript

1 Answers1