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
