i'm trying to get Magento BaseUrl through javascript in head.phtml file, and then use it in jquery.hello-lightbox.min file, where i need the baseUrl to get some images.

Here's what i have in head.phtml file:

<?php $baseUrl = $this->getBaseUrl() ; ?>

<script type="text/javascript">

var baseUrl = <?php echo $baseUrl ; ?>

function getBaseUrl(baseUrl)

</script>

Then in /js/jquery.hello-lightbox.min i have:

(function($){

function getBaseUrl(baseurl)
{
var domain = baseurl
}

var urrl = 'http://'+domain+'/skin/frontend/default/customtheme/images/lightbox/';

  $.fn.lightBox=function(settings)settings=jQuery.extend({overlayBgColor:'#000',overlayOpacity:0.8,fixedNavigation:false,imageLoading: urrl+'lightbox-ico-loading.gif',imageBtnPrev:urrl+'lightbox-btn-prev.gif', . . . . . . . . . . 

But this doesn't work. In fact it seems like i can't even pass the php variable $baseUrl to var baseUrl in head.phtml

Do you have any ideas?

i'm trying to get Magento BaseUrl through javascript in head.phtml file, and then use it in jquery.hello-lightbox.min file, where i need the baseUrl to get some images.

Here's what i have in head.phtml file:

<?php $baseUrl = $this->getBaseUrl() ; ?>

<script type="text/javascript">

var baseUrl = <?php echo $baseUrl ; ?>

function getBaseUrl(baseUrl)

</script>

Then in /js/jquery.hello-lightbox.min i have:

(function($){

function getBaseUrl(baseurl)
{
var domain = baseurl
}

var urrl = 'http://'+domain+'/skin/frontend/default/customtheme/images/lightbox/';

  $.fn.lightBox=function(settings)settings=jQuery.extend({overlayBgColor:'#000',overlayOpacity:0.8,fixedNavigation:false,imageLoading: urrl+'lightbox-ico-loading.gif',imageBtnPrev:urrl+'lightbox-btn-prev.gif', . . . . . . . . . . 

But this doesn't work. In fact it seems like i can't even pass the php variable $baseUrl to var baseUrl in head.phtml

Do you have any ideas?

• javascript
• magento
• base-url

6 Answers 6

There are syntax errors in your main code. I think what you want is to define a function that returns the base URL like so:

<?php $baseUrl = $this->getBaseUrl() ; ?>

<script type="text/javascript">

function getBaseUrl() { return '<?php echo $baseUrl; ?>'; } 

</script>

then use it in JavaScript: (get rid of the function getBaseUrl(baseurl) ... stuff there)

var urrl = 'http://'+getBaseUrl()+'/skin/frontend/default/customtheme/images/lightbox/';

Try to put quotes around the JS var you're setting via the php echo:

var baseUrl = '<?php echo $baseUrl ; ?>'

You can call base url via these simple steps throughout the store in every javascript / php file.

Open your theme's page/html/head.phtml and add following code in the HEAD tag in the last line:

<script type="text/javascript">
   var BASE_URL = '<?php echo  Mage::getBaseUrl(); ?>';
</script>

Now you can use BASE_URL variable in every javascript code in your theme files to get magento base url in javascript.

If you don't want to use inline Javascript, you can always just add it as an attribute to a div or something along those lines.

For example, I'll often add a html element like this:

<div class="my-class" data-storeurl="<?php echo  Mage::getBaseUrl(); ?>">
....
</div>

And then in my Javascript (jQuery in this case), I'll just add something like:

var current_store = $('.store-redirect').attr('data-storeurl');

It's handy for AJAX calls where you want to run the call on the correct store's url.

EDIT:

Javascript won't pass variables between files like that. You don't need to use PHP in this case, just do this:

var urrl = 'http://'+window.location.host+'/skin/frontend/default/customtheme/images/lightbox/';

Magento : Get Base Url , Skin Url , Media Url , Js Url , Store Url and Current Url:

1. Get Base Url :Mage::getBaseUrl();
2. Get Skin Url :Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN);
   1. Unsecure Skin Url :$this->getSkinUrl('images/imagename.jpg');
   2. Secure Skin Url :$this->getSkinUrl('images/imagename.gif', array('_secure'=>true));
3. Get Media Url :Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);
4. Get Js Url :Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);
5. Get Store Url :Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);
6. Get Current Url :Mage::helper('core/url')->getCurrentUrl();

Get Url in cms pages or static blocks:

1. Get Base Url :{{store url=""}}
2. Get Skin Url :{{skin url='images/imagename.jpg'}}
3. Get Media Url `:{{media url='/imagename.jpg'}}
4. Get Store Url :{{store url='mypage.html'}}