Build Shopping Cart App with React Native and Woo-Commerce – Part 1

Get complete finished shopping cart code here

Today we are starting a new series of tutorial, how to Build Shopping Cart App with React Native and Woo-Commerce. Some of the package we will use in this tutorial like redux-logger and redux-thunk has already been discussed in previous tutorials. Lets check how our package.json looks, for this part of tutorial :

{
  "name": "RNShop",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "crypto": "0.0.3",
    "oauth-1.0a": "^1.0.1",
    "react": "15.4.2",
    "react-native": "0.42.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "21.0.2",
    "babel-preset-react-native": "3.0.2",
    "jest": "21.0.2",
    "react-test-renderer": "15.4.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

In the dependencies we have added 2 new package, oauth-1.0a and crypto, which will help us to make api calls.

Now, to get started we need a Word Press Website with Woo-commerce installed in it. Also, we need to go to admin panel  WooCommerce>>Settings>>API, check ‘Enable the REST API’ option and click save. Next, click on Keys/Apps and add a new key. Copy  ConsumeKey and ConsumerSecret, so that we can later use it in our app.

Get WooCommerce api sdk and add it to your react native project. Now, open Config.js in the sdk and add your WordPress website url, ConsumeKey and ConsumerSecret as URL and keys value.

Now, we need to set a react-redux boilerplate just as we did in our previous tutorial here . Only difference will be that there we were making a dummy api call using settimeout function, but here we will be making real api call.  So, our shop.js file will look somethinglike this :

import WooCommerce from "../WooCommerce/Api"



const TIMEOUT = 100

export default {
  getProducts: (cb1, cb2,  search, id) => {

  let par = { per_page: 10, page: 1 }

  if(search != "")
    par['search'] = search

  if(id != "")
    par['category'] = id

  WooCommerce.get('products/categories')
    .then(function (result) {
        console.log(result)
        cb1(result)

  });


  WooCommerce.get('products', par)
  .then(function (result) {
      console.log(result)
      cb2(result)
  });

  },
  buyProducts: (payload, cb, timeout) => setTimeout(() => cb(), timeout || TIMEOUT)
}

In the above getProducts function we are making two api calls one for categories  and another one for products. Also in the products api call we need to pass products per page and no of products as parameter. ( Some of the code not being discussed are not needed in this part of tutorial. )

Our ActionTypes.js looks like this :

export const ADD_TO_CART = 'ADD_TO_CART'
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART'
export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'
export const RECEIVE_CATEGORIES = 'RECEIVE_CATEGORIES'
export const REQUEST = 'REQUEST'
export const RESPONSE = 'RESPONSE'

In this part of tutorial we will just be using REQUEST, RESPONSE, RECEIVE_CATEGORIES and RECEIVE_PRODUCTS.

Our action>>index.js file looks like this :

import shop from '../api/shop'
import * as types from '../constants/ActionTypes'

const request = () => ({
  type: types.REQUEST
})
/*
const response = () => ({
  type: types.RESPONSE
})
*/
const receiveProducts = products => ({
  type: types.RECEIVE_PRODUCTS,
  products: products
})
const receiveCategories = categories => ({
  type: types.RECEIVE_CATEGORIES,
  categories: categories
})
export const getAllProducts = (text="",id="") => dispatch => {
dispatch(request())
  shop.getProducts(categories => {
    dispatch(receiveCategories(categories))
  }, products => {
    dispatch(receiveProducts(products))

  },text,id)
}

and, our reducers>>index.js is like this :

export default (state = {}, action) => {
  switch (action.type) {
    case 'REQUEST':
      return {
        ...state,
        isLoading: true
      }
    case RECEIVE_CATEGORIES:
       return {
         ...state,
         ...action.categories.reduce((obj, category) => {
         obj[category.id] = category
         return obj
        }, {})
    }
    case 'RECEIVE_PRODUCTS':
    
    return {
      ...state,
      isLoading: false,
      ...action.products.reduce((obj, product) => {
        obj[product.id] = product
        return obj
      }, {})
    }

    default:
    return {}

  }
}

In the above getAllProducts function first we make a dispatch of request action which sets isLoading value to true. This lets our app know that we are about to make a api request and their will be a small delay so we can show a ActivityIndicator letting the user know that product data is being fetched. Next, we are making api calls and in api call clouser we are making dispatch of RECEIVE_CATEGORIES, RECEIVE_PRODUCTS. Also in RECEIVE_PRODUCTS dispatch we are seating isLoading back to false.

Conclusion

So, in this part of tutorial we set up a Woo-commerce backend with api services enabled. We connected our React Native App with Woo-commerce back-end using Woo-commerce SDK. And we fetched the categories and products of our Woo-commerce store. For better clarification and code in action please check the video below :