Develo Design

Develo Design Menu

Ionic App Portfolio: Magento E-Commerce

This mobile app which can be repurposed for any site running Magento allows for a user to log in with the same account as on the e-commerce site, then view products through the categories or by searching for them. A user can also add those products to the cart, go through the entire checkout process and place an order, all without leaving the app. A user can also search for products by scanning a barcode using the device’s camera.

Browsing products

A user can browse through a list of categories and sub-categories to browse through the entire catalog of products, and then add them to the cart without opening any external webpage. The list of products can even be filtered even further if more sub-categories exist. This is all being done using the Magento REST API, which allows for all of the data on the magento site to be accessed so it can be used to display all these products. Because of all the data being pulled from the Magento API, if there are any updates to the catalog on the website, these updates will instantly be reflected in the data on the app.

An item can be added to the cart, as well as being able to specify the quantity, and incrementing the quantity if the product already exists in the cart.

Searching Products

The entire list of products can be searched through by either inputting the partial name, or the SKU of the product. This will instantly filter the list after each character inputted, so there’s no need to press a search button and wait for results to load.

The list of products can also be searched through by scanning a barcode using the barcode scanner, and if the product that was scanned exists, the list will be filtered with the result shown.

Cart/Checkout

From the cart page, a user can go through the full checkout process, including specifying shipping/billing address and specify payment details using Stripe.

The cart displays the item, the price, and the quantity. Once continuing through the checkout process, the app will ask you to select from your saved addresses, or allow you to add an address.

Share

Loading Disqus Comments ...
Loading Facebook Comments ...

Post Comment

Your email address will not be published. Required fields are marked *

Discuss My Project

We want to hear about your project! Provide us with a few details and we’ll get back to you for a chat.