Advanced Configuration

​Every e-commerce requires different configuration. Our Vue.Js components are prepared for that. In this article, you will learn how to change currency, localization, translations and how to add own events on custom buttons. We will take a look on how to purge cache and how to use static and dynamic configuration.

Currency Configuration

Currency can be changed with the following piece of code:

Apicart.configure({
  // ...
  vueComponentsTranslator: {
    currencyFormats: {
      en: {
        currency: {
          currency: 'USD'
        }
      }
    }
  }
  // ...
})

We use vue-i18n for translations. The detail configuration can be found in their official documentation.

Translations

We actually support 3 main languages:

  • English (default)
  • Czech
  • Slovak

All translations are placed in our Github repository in the localization directory.

If you want to change translation in our components you should follow the following steps.

Lets say, you want ot change the buy button text from Add to cart on Buy. Open the file with english translations. Find the buy button key buyButton and add the following piece of code into your page:

Apicart.configure({
  // ...
  vueComponentsTranslator: {
	// ...
    localization: {
      en: {
        buyButton: "Buy"
      }
    }
  }
  // ...
})

In case you want to change a nested translation, copy the section with the translation you want to change, remove translations you dont want to change and paste it into your existing code. Then, change translations.

The following example shows, how to change cart dropdown title:

Apicart.configure({
  // ...
  vueComponentsTranslator: {
	// ...
    localization: {
      cs: {
        cartDropdown: {
           toggleButton: "You cart"
        }
      }
    }
  }
  // ...
})

Static Configuration

static configuration must be set before any of our script is loaded. The main purpose of static configuration is, that some things can be set right away (like translations) and some of them must be set before any script is loaded.

One of the configuration that must be set before any script is loaded is cacheKey (such as cache key, When the cache key changes before any script is initialized, the Apicart will purge existing cache and will load new data.

var ApicartConfig = {
  // You can configure dev environment like this
  env: 'dev',
  storage: {
  // Random string, number or a date. 
  // When the cache key is different then the one in customer browser, Apicart will purge existing cache and will load new data
  // Cache key must be set before any of our script is loaded 
    cacheKey: 3 
  }
  // ...
}

Dynamic Configuration

Dynamic configuration is called with the Apicart.configure() function. It is usefull to configure something after the scripts are loaded. It also triggers apicart:configured event in the Event Dispatcher.

Apicart.configure({
  // ...
});

Apicart.Utils.EventDispatcher.addListener('custom-configuration-listener', 'apicart:configure', () => {
  alert('Apicart configured');
});

 

What next?

You can run your application for free using Github Pages. You don´t need any domain for it. Here is a simple tutorial on how to create Github Pages.

Our https://sandbox.apicart.net is also running on the Github Pages.

In case of any question don´t hesitate to contact us via e-mail support@apicart.net.

 

Create E-commerce in 5 minutes

Try it. It is for free.