Notice of closure for Vietnamese National Day Holiday 2025

0
No products in the cart.

KidXtore App Documentation

Table of Contents

 

– WooCommerce

– Bzotech App API

2. Generating API keys


2.1 Get purchase code information

You need to use purchase code to activate the app and genterate the API keys.

You can find your license code (purchase code) in the download section at ‘Download’. Click ‘License certificate & purchase code’ (available as PDF or text file).

How to find your Envato purchase code

blank

2.2 Activate app and generate API keys

After have purchase code information, in WordPress site Admin, go to Bzotech App API Plugin > License > enter purchase code > activate.

blank

Go to Bzotech App API > Settings > REST API => Add Item. Use of the REST API with the generated keys will confirm to that user’s WordPress roles and capabilities.

Choose the level of access for this REST API key to READ/WRITE permission. Then click the “Generate API Key” button and WooCommerce will generate REST API keys for the selected user.

blank

You also need to enter ‘Woocommerce consumer key’ and ‘Woocommerce consumer secret’ keys. To create these keys, go to WooCommerce > Settings > Advanced => REST API> Keys/Apps.

Click the “Add Key” button. In the next screen, add a description and select the WordPress user you would like to generate the key for. Use of the REST API with the generated keys will confirm to that user’s WordPress roles and capabilities.

blank

blank

3. General Website Configuration


Before we start, make sure you have installed WordPress and Woocommerce and your website is up and running. If you have not installed WordPress yet, start from here: https://wordpress.org

If you’re using non-pretty permalinks in Woocommerce, the REST API will not work. Configure pretty permalinks in Settings > Permalinks so that the custom endpoints are supported.

blank

3.1 Shop Settings

This section contains settings for Shop page.

blank

Number Of New Product Days: Display ‘New’ label for products created within this day value. For example, products created within 3000 days will show ‘New’ label.

Number Product: Number of product to show. Leave empty to show all products

Set category: Config which product categories to display. Enter slug categories. The values separated by “,”. Example cat-1,cat-2. Default will show all categories

Order by: Order products by: None (default), ID, Author, Title, Name, Date, Last Modified Date, Parent, Post views.

Order: “DESC” (descending) sorts from the highest to the lowest; “ASC” (ascending) sorts data from the lowest value to the highest.

Product Type: Select product type to display: Default, Featured Products, Best Sellers, On Sale (product has sale price), Top rate, Most view, Flash sale(simple product AND has end sale date).

3.2 Shop Filter

This section allows to show or hide filter criteria in shop page.

blank

Number Of New Product Days: Display ‘New’ label for products created within this day value. For example, products created within 3000 days will show ‘New’ label.

Number Product: Number of product to show. Leave empty to show all products

Set category: Config which product categories to display. Enter slug categories. The values separated by “,”. Example cat-1,cat-2. Default will show all categories

Order by: Order products by: None (default), ID, Author, Title, Name, Date, Last Modified Date, Parent, Post views.

Order: “DESC” (descending) sorts from the highest to the lowest; “ASC” (ascending) sorts data from the lowest value to the highest.

Product Type: Select product type to display: Default, Featured Products, Best Sellers, On Sale (product has sale price), Top rate, Most view, Flash sale(simple product AND has end sale date).

This section contains settings for footer menu bar.

blank blank

Show Home: Show Home menu or not

Title Home: Set title for menu Home

Show Favs: Show favourite (wishlist) items or not

Title Home: Set title for menu favourite

Show Cart: Show Cart menu or not

Title Cart: Set title for menu Cart

Show Menu: Select menu to display

Title Menu: Set title for selected menu

Style Menu: Set style for menu Menu

Menu Profile: Show User profile menu or not

Title Profile: Set title for menu Profile

Show Menu Profile: Select menu to display

3.4 Blog page setting

This section contains settings for blog listing page.

blank blank

Add Item: Add new Article list blocks to display

In each Item, there are settings:

Title: Set title for the article block

Number Post: Set number of post to display. Leave empty to display all.

Set Category: Config which article categories to display. Enter slug categories. The values separated by {,}. Example cat-1,cat-2. Default will show all categories.

Order By: Order post by: None (default), ID, Author, Title, Name, Date, Last Modified Date, Parent, Post views.

Order: “DESC” (descending) sorts from the highest to the lowest; “ASC” (ascending) sorts data from the lowest value to the highest.

Delete Item: Select menu to display

3.5 Header settings

This section contains header logo setting.

blank

Logo: Select header logo

4. Website HomePage Configuration

This section contains settings for homepage.

4.1 Module service

blank blank

Show Service: Show or hide Service box

Add Item: Add new service item

Service List:

Url by Api: Enter Url EX: products?product_cat={slug}

Title: Enter title

Icon Svg: Enter code svg

Delete Item: Delete service item

4.2 Module categories

blank blank

Show Categories: Show or hide Service box

Add Item: Add new Category item

Title: Enter title for category

Title More: Enter title for button view more item

Categories Slider:

Url by Api: Enter Url EX: products?product_cat={slug}

Title: Enter title

Image Slider: Select category image slider

Delete Item: Delete category item

4.3 Module banner

blank blank

Show Banner: Show or hide Banner box

Add Item: Add new Banner item

Banner Slider:

Url by Api: Enter Url EX: products?product_cat={slug}

Title1, Title 2, Title 3: Enter banner title text

Title Button: Enter banner’s button text

Image Slider: Select banner image

Delete Item: Delete banner item

4.4 Module recently viewed

blank blank

Show Recently Viewed: Show or hide recently viewed products box

Enter Title: Add title for this box

4.5 Module also like

blank blank

Show You Might Also Like: Show or hide You Might Also Like box

Enter Title: Enter title for this box

Number Product: Enter the number of product to display

Set Category: Config which categories to display. Enter slug categories. The values separated by {,}. Example cat-1,cat-2. Default will show all categories.

Order By: Order post by: None (default), ID, Author, Title, Name, Date, Last Modified Date, Parent, Post views.

Order: “DESC” (descending) sorts from the highest to the lowest; “ASC” (ascending) sorts data from the lowest value to the highest.

Show by IDs: Enter products by product’s ID

Product Type: Select product type: Default, Featured Products, Best Sellers, On Sale, Top rate, Most view, Flash sale

blank blank

Show Featured Collections: Show or hide Featured Collections box

Title: Enter title for this box

Title More: Enter title for read more link

Add Item: Add new Banner item

Categories slider:

Url by Api: Enter Url EX: products?product_cat={slug}

Title: Enter banner title text

Description: Enter collection short description

Image Slider: Select banner image

Delete Item: Delete banner item

4.7 Module picked for you

blank blank

Show Picked For You: Show or hide Picked For You box

Enter Title: Enter title for this box

Number Product: Enter the number of product to display

Set Category: Config which categories to display. Enter slug categories. The values
separated by {,}. Example cat-1,cat-2. Default will show all categories.

Order By: Order post by: None (default), ID, Author, Title, Name, Date, Last Modified Date,
Parent, Post views.

Order: “DESC” (descending) sorts from the highest to the lowest; “ASC” (ascending) sorts data
from the lowest value to the highest.

Show by IDs: Enter products by product’s ID

Product Type: Select product type: Default, Featured Products, Best Sellers, On Sale, Top rate,
Most view, Flash sale

4.8 Module more to explore

blank blank

Show More To Explore: Show or hide More To Explore box

Enter Title: Enter title for this box

Number Product: Enter the number of product to display

Set Category: Config which categories to display. Enter slug categories. The values
separated by {,}. Example cat-1,cat-2. Default will show all categories.

Order By: Order post by: None (default), ID, Author, Title, Name, Date, Last Modified Date,
Parent, Post views.

Order: “DESC” (descending) sorts from the highest to the lowest; “ASC” (ascending) sorts data
from the lowest value to the highest.

Show by IDs: Enter products by product’s ID

Product Type: Select product type: Default, Featured Products, Best Sellers, On Sale, Top rate,
Most view, Flash sale

4.9 Module blog

blank blank

Show Blog: Show or hide Blog box

Enter Title: Enter title for this box

Number Post: Enter the number of post to display

Set Category: Config which article categories to display. Enter slug categories. The values separated by “,”. Example cat-1,cat-2. Default will show all categories

Order By: Order post by: None (default), ID, Author, Title, Name, Date, Last Modified Date,
Parent, Post views.

Order: “DESC” (descending) sorts from the highest to the lowest; “ASC” (ascending) sorts data
from the lowest value to the highest.

Show by IDs: Enter products by product’s ID

5. Setting up and Config


5.1 General preparation

Check if the app code is running OK

Use yarn:

yarn start
yarn android
cd iOS
pod install
cd ..
yarn ios

Use npm:

npm start
npm run android
cd iOS
pod install
cd ..
npm run ios

Change App ID (Android) and Bundle ID (iOS)

npx react-native-rename "Vegestable App” -b "com.bzotech.vegestableapp" --skipGitStatusCheck

"Vegestable App”: [new app name]
"com.bzotech.vegestableapp":[new appId com.companyname.newappname]

5.2 Update version

Go to package.json"version"

Android: android/app/build.gradleversionCode and versionName

IOS: ios/YourAppName.xcodeproj/project.pbxproj or in Xcode → General → Version & Build

6. Android App


6.1 Create release .aab

Google Play requires .aab (Android App Bundle), no more .apk.

Create key signing (once time creation)

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias \
-keyalg RSA -keysize 2048 -validity 10000

Save file my-release-key.keystore to android/app/

Configure key in android/gradle.properties

MYAPP_UPLOAD_STORE_FILE=my-release-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=your-store-password
MYAPP_UPLOAD_KEY_PASSWORD=your-key-password

Add signing config in android/app/build.gradle

android {
	signingConfigs {
		release {
			storeFile file(MYAPP_UPLOAD_STORE_FILE)
			storePassword MYAPP_UPLOAD_STORE_PASSWORD
			keyAlias MYAPP_UPLOAD_KEY_ALIAS
			keyPassword MYAPP_UPLOAD_KEY_PASSWORD
		}
	}
	buildTypes {
		release {
			signingConfig signingConfigs.release
			shrinkResources true
			minifyEnabled true
			proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
			}
		}
}

Build release

cd android
./gradlew bundleRelease

You can find .aab file in android/app/build/outputs/bundle/release/app-release.aab.

6.2 Publishing to Google Play Store

Check out here to make your app publishing ready for Google Play Store
https://facebook.github.io/react-native/docs/signed-apk-android.

7. IOS


7.1 App running

Requirements:

  • Mac device
  • Xcode
  • Apple Developer account

Open IOS project

cd ios
pod install
open YourAppName.xcworkspace

In Xcode, select scheme Release

Set up Team & Bundle ID

Go to Xcode → Target → Signing & Capabilities

blank

Select Team.

Set Bundle Identifier (it should be unique, for example:com.company.app) to match the name you just changed.

Create archive

Go to Xcode menu → Product → Archive

blank blank blank blank

Recheck the information in the dialog then click Next.

Wait it running until finishing. If it returns a warning as below, skip the warning, → click Done

blank

After validating, click Distribute.

blank

Choose App Store ConnectDistribute.

blank

It will automatically upload to the web store. Refresh the website several times to see if it has been uploaded.

7.2 Publishing to Apple Store

To make your app ready to publish to Apple App Store follow tutorials in this video
https://facebook.github.io/react-native/docs/running-on-device#building-your-app-for-production.

8. Reference


API specification

WordPress REST API https://developer.wordpress.org/rest-api/

WooCommerce REST API https://woocommerce.github.io/woocommerce-rest-api-docs/#introduction

Related Post