Build A Progressive Web App On WooCommerce

6 Steps To Build A Progressive Web App On WooCommerce

Spread the love

Online store owners must know how to build a progressive web app on WooCommerce platform. Creating such an application will improve the experience of shoppers and boost the conversion rate of the outlet. Many people feel that using responsive design techniques while creating or converting site to WordPress gives them the same benefits.

However, a PWA gives users the best of both the worlds. They get to enjoy the advantages of a responsive interface as well as a mobile app. PWAs can have seamless transitions and animations besides the features of push notifications and offline work. Users do not need to download and install these apps on their devices. They can use them by opening them in their gadget’s browsers. In this tutorial, we are presenting a method to build PWAs based on the popular WordPress e-commerce plugin, WooCommerce.

1. Identify A Framework To Build The PWA

There are various JavaScript frameworks which can be used for building PWAs. AngularJS and React are two of the most widely-used frameworks that are used for the purpose. VueJS is another platform that has found acceptance among the community of coders. React is an easy to understand framework with an efficient boilerplate. The platform is intuitive and has the create-react-app which supports PWAs. In our tutorial, we will use this framework to make our e-commerce application.

2. Use The WooCommerce REST API

You will require an API to access the data of the WooCommerce plugin. REST API enables programmers to link WordPress with other platforms. We will be using the API from the e-commerce plugin in this guide. There is an NPM package in the WooCommerce plugin which can be used for calling APIs. However, consumer key and consumer secret are necessary for authenticating requests when this package is used for API calls. Now when keys are generated from the WooCoommerce dashboard, permissions cannot be specified at route level. A proxy needs to be created so that access is granted to a specified API endpoints’ set.

pwa-woocommerce-1

Take a look at the code presented above. The REST API PHP wrapper of the e-commerce plugin is used as a base. The consumer key and consumer secret are used for initializing WooCommerce client. We also create a custom route titled “products” and map it to the “products/categories” endpoint. This will enable view access to categories and products and allow write access to orders.

3. Build A New React App

We will now build our React application. Install NodeJS and NPM globally along with the “create-react-app” boilerplate. Use the following command to install the boilerplate:

npm install create-react-app -g

 As mentioned earlier, the create-react-app supports PWAs by default. You can create a new react application by using the command given below:

create-react-app my-app

Users can start the newly-created app by using this command:

cd my-app & npm start

A new application will be created which will look like the following image:

pwa-woocommerce-2

4. Using ReactJS To Render Categories

In this next step to build a progressive web app on WooCommerce, we will make product categories visible in our application. Take a look at the React component shown in this image:

pwa-woocommerce-3

This component is reading a set of product categories from the API. An empty categories list is initializing this component’s state. React will automatically call the “componentWillMount” method before render. We have included a request to call the categories in this method and add them to state.  When the categories will be received, React will re-render the component. This saves users the hassle of calling the render method again. A custom component called “CategoriesList” which is receiving the category data will be rendered by the method. It will resemble the following image:

pwa-woocommerce-4

This component receives the categories list as a prop. It calls “CategoryCard” which is another custom component and renders a single category element.

5. Modifying The Global App State

There is always going to be some information which needs to be handled at the top application level. For instance, the final product list of a customer’s shopping cart. You will need to display the complete list on the checkout page and the number of items in the cart icon, in the header. In case all this data is added to the parent app component, then it can become unmanageable. The problem can be resolved by using a library called Redux. This will help in retaining information at the application level. Even when you use Redux, you can still use props and state at the component level.

pwa-woocommerce-5

We will wrap the chief app component into a global store in order to connect with the library. The above image shows how a list of categories is merged with a list of products using the “combineReducers” method.

Users will have to define Redux actions which will return objects containing a type property. Two actions will be needed for indicating the sending of a request and the receiving of a response. In the image which follows, a function called “fetchProducts” has been added. This will send the “request products” action. It will then call the API for retrieving the items. Finally, when a result will be received, it will send the “receiveProducts” action.

pwa-woocommerce-6

Now use a Redux reducer to modify the global app state. Reducers are functions which read actions to alter the global state.

pwa-woocommerce-7

In the above image, reducer will return a list of products when it registers the receive products action. Let’s use the reducer and the action in a new component called “Products”.

pwa-woocommerce-8

It is wrapped in the “connect” method and will dispatch “fetchProducts” in the “componentWillMount” method. Its product list component is linked to the global app state and does not receive product data directly.  This means it will be receiving the information from the app store. It will use the “ProductCard” component after iterating the product list and render a single product element.

pwa-woocommerce-9

You have now created a basic PWA on top of the WooCommerce platform.

6. Linking The PWA With WordPress

In the final step, you need to decide how the app will be linked to WordPress. A basic theme with an index.php file which contains the JavaScript/CSS file can be created. The production files can be accessed by using the commands in the “create-react-app” boilerplate.

You can also choose to host the new application on a subdomain and allow it to connect with the API.  

Conclusion

This is an easy method to build progressive web apps on WooCommerce platform. PWAs can help e-commerce operators generate more footfalls and increase their revenue by improving visitors’ engagement.

About Author

Jacob Graves is a Sr. WordPress Developer at HireWPGeeks Ltd, a company that Converts your PSD website to WordPress  in a convenient manner. He is a passionate writer and loves to share WordPress and SEO related tutorials.


Spread the love