Source Code Setup

Estimated reading time: 2 min

Now we have set up the Ionic-React environment.

For install Ionic-React environment use this link

You should have to install node modules in application first. For this purpose, apply following command

npm install

After node modules installation, if you find following error

Apply following command for successful compilation

npm rebuild node-sass

For configuration of your application

We need to connect our app with woocommerce website. Open the folder name (App Source Code)inside the downloaded packages.

Inside the folder, you will find all the Ionic-React application code.

Now open project folder/src/providers/WooComAPI/woo-com-api.ts file and change the following.

  • http://your-site-url (it will be the URL of your domain)
  • consumer key
  • consumer secret

It will load woocommerce products data into your application.

For application configurations:

  • Theme mode(light/dark)
    By default you can get light theme mode. If you want to change application theme mode to dark, you can replace light with dark.

 

  • Language(en/ar)

 

The app has english language as default.the app has 2 languages(English, Arabic) preinstalled. You can switch the language to arabic.

To change the default language of the app. Please open the file app/src/providers/WooComAPI/woo-comp-api.js at the top of the page you can find below code.

localStorage.languageCode =”en”

This is your language two letter code change it to arabic we have to put the arabic country code here. which is “ar“.

localStorage.languageDirection = “ltr”

Every language has its own direction. So if you change the application language then you also has to define its direction(ltr, rtl). For left to right use “ltr” and for right to left use “rtl”. In case of arabic we have to change this to =”rtl”.

Now we have to remove the cache of the browser to see the changes we have made.

Add new language

App has only two languages. But you can add more languages.to add new language. Please open the app/src/provider/i18n/GlobalLanguageJson.js. This folder has one file GlobolLanguageJson.js. This file contains all the app labels.

For example we want to add french language we copy the “a2” object from GolabLanguageJson.js file and add a new object a3{}

Then we open the file in editor and replace the translation of all the labels on right side of the labels. like

we have Close: “Close” in english, we replace it with french like this. Close: “Fermer”

After translating all the labels save the file and then change the language code and direction. To make it default.

// For Example

//a3:{

//}

 

  • Currency(USD/EUR)

 

Default currency is “USD”. You can replace this with “EUR” to change currency.

 

  • Navigation(Tabs/Side Menu)

 

Default navigation is “side”. You can replace this with “tabs” to change applicaiton navigation.

For tabs, you have to replace false with true for tabs Navigation

You can need following file
folder/src/providers/WooComAPI/woo-com-api.ts

 

Was this article helpful?
Dislike 0
Views: 11

Continue reading

Next: Plugin Installation