Best Way Of Getting Base URL Inside KnockoutJS .html File

Question

How can I get the base URL inside a KnockoutJS HTML file? See file below:

app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/web/template/<Filename>.html

Answer 1

There are three parts to this, I will use the checkout authentication as an example but this should work in any KO/JS file that has mage/url as a dependency.

vendor/magento/module-checkout/view/frontend/web/js/view/authentication.js
vendor/magento/module-checkout/view/frontend/web/template/authentication.html

Setting up the URL in the JS file

Add mage/url to the list of dependencies.

Add the following function to the JS file:

getBaseUrl: function() {
    return url.build('testing');
},

Use Knockout to set the href

<a data-bind="attr: { href: getBaseUrl() }">Link here 2</a>

Result

I had to clear Varnish and browser cache.

<a href="http://localhost:3000/testing" data-bind="attr: { href: getBaseUrl() }">Link here 2</a>

Answer 2

I managed to do this in app/design/frontend/<Vendor>/<Theme>/Magento_OfflinePayments/web/template/<Filename>.html, but the solution should work in the Magento_Checkout as well.

When you inspect the window variable in the dev-console of your browser, you will see that the checkout and checkoutConfig objects are available on checkout-pages.

Here are the relevant parts:

checkout.baseUrl
checkout.checkoutUrl
checkout.customerLoginUrl
checkout.removeItemUrl
checkout.shoppingCartUrl
checkout.updateItemQtyUrl

checkoutConfig.cartUrl
checkoutConfig.checkoutUrl
checkoutConfig.defaultSuccessPageUrl
checkoutConfig.forgotPasswordUrl
checkoutConfig.pageNotFoundUrl
checkoutConfig.registerUrl
checkoutConfig.staticBaseUrl

In my case, I wanted to display an image; here's the code:

<img data-bind="attr: {'src':checkoutConfig.staticBaseUrl + 'frontend/<Vendor>/<Theme>/<Locale>/images/logo.png'}" alt="" />

Answer 3

Using checkout and checkoutConfig global variable, I couldn't able to get the baseUrl. What I did was,

1. I just added new global variable for baseUrl in my custom module overriding \Magento\Checkout\Model\ConfigProviderInterface getConfig().

It will look like,

$config['getBaseUrl'] = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_WEB);

2. Now at checkout page, you should be able to get it like, window.checkoutConfig.getBaseUrl.

In my case, I wanted to load it from .html file. The way I got the variable was,

<a data-bind="attr: {'href': checkoutConfig.getBaseUrl}" target="_blank">Link</a>

Answer 4

Just for information. From the answer of @simonthesorcerer,

checkout.baseUrl => {www.example.com}/

checkout.checkoutUrl => {www.example.com}/checkout/

checkout.customerLoginUrl => {www.example.com}/customer/account/login/

checkout.removeItemUrl => {www.example.com}/checkout/sidebar/removeItem/

checkout.shoppingCartUrl => {www.example.com}/checkout/cart/

checkout.updateItemQtyUrl => {www.example.com}/checkout/sidebar/updateItemQty/

checkoutConfig.cartUrl => {www.example.com}/checkout/cart/

checkoutConfig.checkoutUrl => {www.example.com}/checkout/

checkoutConfig.defaultSuccessPageUrl => {www.example.com}/checkout/onepage/success/

checkoutConfig.forgotPasswordUrl => {www.example.com}/customer/account/forgotpassword/

checkoutConfig.pageNotFoundUrl => {www.example.com}/checkout/noroute/

checkoutConfig.registerUrl => {www.example.com}/customer/account/create/

checkoutConfig.staticBaseUrl => {www.example.com}/pub/static/