How to get Magento baseUrl via Javascript and then use it in jquery.hello-lightbox.min?

Question

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

Here is what I have in the 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 that does not work. It actually seems like I can't even pass the php $ baseUrl variable to var baseUrl in head.phtml

Do you have any ideas?

Answer 1

There is syntax errors in your main code. I think you want to define a function that returns the base URL as follows:

 <?php $baseUrl = $this->getBaseUrl() ; ?> <script type="text/javascript"> function getBaseUrl() { return '<?php echo $baseUrl; ?>'; } </script> 

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

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

Answer 2

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

Open your topic page / html / head.phtml and add the following code to the HEAD tag in the last line:

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

Now you can use the BASE_URL variable in every javascript code in files so that you get the magento base url in javascript.

Answer 3

Try putting quotes around JS var, which you configure with php echo:

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

Answer 4

If you do not want to use the built-in Javascript, you can always just add it as a div attribute or something in that direction.

For example, I often add an html element, for example:

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

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

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

This is convenient for AJAX calls, where you want to launch a call at the correct store URL.

Answer 5

EDIT:

Javascript will not pass variables between such files. In this case, you do not need to use PHP, just do the following:

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

Answer 6

Magento: get base url, design URL, media url, js address, store address and current url:

• Get the base Url :Mage::getBaseUrl();
• Get skin url :Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN);
  • Unsecure Skin Url :$this->getSkinUrl('images/imagename.jpg');
  • Protected shell URL :$this->getSkinUrl('images/imagename.gif', array('_secure'=>true));
• Get media address :Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);
• Get Js Url :Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);
• Get the store address :Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);
• Get the current URL :Mage::helper('core/url')->getCurrentUrl();

Get URL in cms pages or static blocks:

• Get Base Url :{{store url=""}}
• Get the :{{skin url='images/imagename.jpg'}}
• Get Media Address: {{media url = '/imagename.jpg'}}
• Get store address :{{store url='mypage.html'}}