Tips to build magento2 mobile app using ionic framework

These days, the ways of developing an app have changed, as a result, it provides useful and user-centric apps to businesses and organizations for improving their business presence through a mobile app. These all changes are possible due to the presence of various cutting-edge tools, platforms, and frameworks. These all things have brought ease and convenience for developers and designers to create incredibly potential mobile apps.
The Ionic framework is one of the new entrances in the mobile app development platform. It has a front-end SDK built on AngularJS which is a top popular JavaScript library. Using this popular library Ionic application provides developers and companies a benefit of single development code across multiple mobile platforms. It has many other benefits like:

  1. It provides very beautiful UI. It has many default JS and CSS components which are clean, simple and functional.
  2. It focuses on native apps by running inside PhoneGap or Cordova to deploy an app natively.
  3. It has a most powerful CLI which helps developers to create, built, test and deploy apps onto any platform with just one command.

A few days back we get a chance to develop an app with the ionic framework and the most interesting part was to use Magento2 REST API to retrieve data from the server. Developing an app with the ionic framework and Magento2 Rest API was new to us but yes, it was an amazing thing to learn. We developed the app and it was a great experience to integrate the two amazing platforms in a mobile app. This article will help to learn how to build a Magento2 mobile app using the ionic framework.

Here are some important points to be noticed before starting the development on the front-end.

Magento2 Rest API Configurations: Test accessibility of the mobile API

This is the step which is followed by both the sides i.e. client side as well as server side. On the server side, we need to give permission for webservices and it is done by enabling Web API Security. For more information for server-side implementation please refer the link .

On the client side, you can make a direct call to some of the default Magento API like- product list, product details, product category etc. but for a customer-specific call like- customer authentication, cart, wishlist, checkout etc. needs to be called by passing authentication token in the header. To learn more about authentication token refer the blog.

Magento2 Server-side Configurations(CORS handling):  Setting of Headers in the .htaccess file.

This the most important step while making the call from javascript to Magento rest API.

CORS (Cross-Origin Resource Sharing) is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests. For CORS you need to add following headers at your server side .htaccess file:

      Access-Control-Allow-Methods: POST, GET, OPTIONS, HEAD...and more
      Header always set Access-Control-Allow-Headers:DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type

Now, here is the detail explanation for developing a Magento2 mobile app using ionic framework

Steps to build Magento2 mobile app using ionic framework

1. Build Iconic project.

Now get ready to start your ionic app. Below are the steps to build an ionic app:

  1. The Ionic framework uses node.js as its utility, so to start first install the node.js utility:
     $ npm install -g ionic
  2.  Then, install the latest Cordova and Ionic command-line tools
    npm install -g cordova ionic
  3. Start a project by:
    ionic start <your app name> blank

Here starter blank means a project with no UI. It will create a blank project. Some of the other named templates starters

  • tabs (Default)
  • side menu
  • maps
  • salesforce
  • complex-list

The above command will create an ionic project with various files including www folder. This folder is the actual folder where your app further implementation resides. The index.html is your app file which runs your app and contains all the js and CSS file declaration.

For more details about ionic framework read its doc.

Now, rest things are to be done for front-end. Below a sample is described to show how to build a Magento2 mobile app using the ionic framework. In this sample, we will have the following functionality:

  1. User signup
  2. User Login
  3. Product Listing from Magento2 website.

Step 2. Create your UI

Create an .html file for Login e.g. login.html in your template folder. Define your view in this layout as your requirement. For more details about defining a layout, you can refer here. TEMPLATES is where your view files go. Your project does have a main index.html file in the WWW directory, but your app likely contains many template views that are added dynamically. Unlike your CSS and JS files, TEMPLATE files do not need to be mentioned in your index.html file.

Step 3. Update the app.js file for app’s states

Now define your app screens state in the app.js file. e.g:

     .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider,$provide) {

        .state('login', {
             url: "/login",
             templateUrl: "templates/login.html",

Step 4. Define a controller for the state:

controllers.js contains your Angular controllers for the states that require them. Define the logic here to control the state of your app. For example- In our sample, we defined LoginCtrl which defines the method which is to be called when user clicks on submit button.

.controller('LoginCtrl', function($scope, $state) {
   $scope.login = function(data) {
    // do what you want to do

Step 5. Define a service file:

services.js is not always included in the starters, but it contains the custom Angular services your app may use, such as the one that calls out to a 3rd party API to get the information your app uses. So, it the real file from where we call the API for authentication and product listing. For example:

.service('AuthService', function($q, $http) { // call your API here to get informations for the app uses. }

Step 6. update your index.html file

Now, this is the final step to play with your ionic files. Update your index.html file with all the js and CSS file you created in your app. For example:

      <!-- your app's js -->
      <script src="js/app.js"></script>
      <script src="js/controllers.js"></script>
      <script src="js/services.js"></script>

Sample Code

To get a complete code click here.


Above we described the steps to develop a Magento2 mobile app using ionic framework. The process is not only easy and interesting  but also make the  user interface attractive. The Ionic framework entrance in the market has proved to be very helpful for both the developer as well as for the customer because it is focused mainly on the look and feel, and UI interaction of your app. Above is the small sample to demonstrate the basic steps to build a Magento2 mobile app using ionic framework. For more information, you can contact us through our website. Enjoy Coding… 🙂


Ionic framework : Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

Magento2 REST API : Magento is an open-source e-commerce platform. Its REST API is used for building an e-commerce mobile apps.

Further Reading


How to add pagination on Magento2 custom collection?

In our recent project, we had a requirement to add pagination facility to custom module collection. It was displaying customer reward history on “My account” as a new tab “My rewards”. Normally Magento provides pagination in default collection like product collection. But here something different. To fulfil the requirement, we have gone through many approaches and found the best solution for pagination on Magento2 custom collection. Here we are going to explain the best approach please follow the steps.

Note: Assuming that You have created a basic module in Magento2. Here Ipragmatech is our package and Ipreward is our module. Please, change your class name accordingly.

Step 1: Create a controller named Myrewad, action Index (Myreward/Index.php)and add the following code to execute method

namespace IpragmatechIprewardControllerMyreward;
class Index extends MagentoFrameworkAppActionAction
   public function execute()

Step 2: Create a block (Assuming that you have already created a model for your table. Here  We have custom table and we have created the model as reward) name Reward.php and add the following code. In this code, we have added the pager in our custom collection.

 * Copyright © 2015 Ipragmatech . All rights reserved.
 * @author Manish Kumar
 * @Date Fri 1 sep
namespace IpragmatechIprewardBlockMyreward;

use IpragmatechIprewardBlockBaseBlock;

class Reward extends BaseBlock
     * @var IpragmatechIprewardModelReward
    protected $_rewardCollection;
     * Reward constructor.
     * @param MagentoFrameworkAppActionContext $context
     * @param IpragmatechIprewardModelReward $rewardCollection
    public function __construct(
        IpragmatechIprewardBlockContext $context,
        IpragmatechIprewardModelReward $rewardCollection,
        $this->_rewardCollection = $rewardCollection;

    protected function _prepareLayout()

        $this->pageConfig->getTitle()->set(__('My Reward History'));

        if ($this->getRewardHistory()) {
            $pager = $this->getLayout()->createBlock(
            $this->setChild('pager', $pager);
        return $this;

    public function getPagerHtml()
        return $this->getChildHtml('pager');
     * function to get rewards point transaction of customer
     * @return reward transaction collection
    Public function getRewardHistory()
        //get values of current page
        $page=($this->getRequest()->getParam('p'))? $this->getRequest()->getParam('p') : 1;
        //get values of current limit
        $pageSize=($this->getRequest()->getParam('limit'))? $this->getRequest
        ()->getParam('limit') : 5;

        $collection = $this->_rewardCollection->getCollection();
        $logger->info("Here reward collection: ".$collection->getSelect());
        $logger->info("Here reward collection: Page:".$page." Page size :"
        return $collection;


Step 3: Added/Modify the following code on layout file app/code/Ipragmatech/Ipreward/view/frontend/layout/ipreward_myreward_index.xml


<?xml version="1.0"?>
<page xmlns_xsi="" layout="2columns-left" xsi_noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
        <referenceContainer name="content">          
         <block class="IpragmatechIprewardBlockMyrewardReward" name="myreward_reward" template="myreward/reward.phtml">


Step 4: Add your phtml file as app/code/Ipragmatech/Ipreward/view/frontend/templates/myreward/reward.phtml and add the following code


and the output will be look like this


Sometimes we have faced some CSS issue in which page limit not displayed so use the following CSS if you have the same issue.

.custom-pager .limiter{
    display: block !important;

Hope this will help you a lot. Please let us know if you have any issue regarding Magento customization.

Tips to boost average order value on your eCommerce store

Average Order Value (AOV) is the measure of how much money your customers spend each time they place an order through your online store. It’s a simple calculation (revenue ÷ number of orders = AOV) that can reveal a lot about your customers and your business during a specific time period.
Getting customers to buy multiple items and spend more money on each order is a great way to increase sales and revenue. Thus, online retailers that are able to increase average order value(AOV) should also become more profitable.


This statistic provides information on the average order value of U.S. online shopping orders from the second quarter of 2012 to the first quarter of 2016. During the most recent quarter, online orders which were placed from a desktop device had an average value of 75.9 U.S. dollars.

Why Focus on Increasing AOV?

To increase revenue and cash flow. Improving AOV is a great way to get healthy cash flow back into your store without having to spend a lot of money. In fact, you don’t need to worry if your store gets less traffic, you will have higher revenues due to increased AOV.

Tips to increase average order value

1. Product Bundles: Product bundling makes buying multiple items at once easy. Bundles often group a primary product and its accessories (such as a Mobile Phone that can be matched with Mobile case and a headphone etc); or products that are used for a similar purpose (such as a jacket, scarf and gloves).

2. Up-Sell and Cross-Sell:

  • Up-Sell – Suggest a larger or more expensive version of a product a customer is viewing.up-sell
    For example, If the customer is looking at your shoes, suggest a similarly styled shoes at a higher price point.
  • Cross-Sell – Suggest additional items related to the one your customer is viewing. For example, If the customer is looking at a mobile phone, recommend a matching case or screen guard  of mobile phone.


3. Customer Rewards:

  • Promotions/Discounts – Offer discounts for spending more money or buying additional items.
    Or, offer valuable services such as free shipping when customers spend a certain amount.


  • Rewards Points – Rewarding customers with points for spending more money on your site is a great
    way to increase AOV while at the same time fostering customer loyalty. The more customers buy, the
    more points they earn. Points can later be redeemed for discounts, free gifts, and other incentives.

4. Implement a free shipping: How frequently have you seen offers such as “free shipping when you spend over $49.99” when shopping online? It’s like a game against the total for online shoppers. They will keep throwing products into their cart until they reach the point where they gain free shipping. A win for your customers, and for you!

5. Easy Returns: One of the biggest concerns customers have about shopping online is whether or not they can return the items they purchase. If a customer thinks that returning something will be costly or difficult, he/she will buy fewer items to minimize their return risk. However, research shows that the more items customers buy, the more they actually keep (meaning they don’t return more items when the process is easy, they just want to know that easy returns are an option).


The strategies outlined here are all very different in how they get customers to increase the amount they spend in every order. Implement these strategies to your online and start noticing an increase in the average order value of your store.Thus this is the way to make more revenue with less traffic.

How to create Magento2 system configuration with different fields?

Magento System configuration is a simple way to store single values required for application functionality. You have developed a Magento extension with multiple functionality. Now the extension is installed and excuting as well. Let us consider a scenerio you want to enable some of available functionality instead of all then what ? How do you configure that ? Here system configuration comes into picture. If you have added a setting for each funcionality than it work like a charm. In this article, we are going to explain how to create a Magento2 system configuration with the different type of fields, validation, resources etc. In Magento2 the global architecture of system configuration is changed but the vision is the same. Add global configuration by website store(group) or store view and use inside your code for enable disable or other choices.

How to add Magento2 system configuration file

So lets start with the Magento2 system configuration file structure. Create a file app/code/Companyname/Modulename/etc/adminhtml/system.xml

Lets us discuss some basic of Magento2 system configuration

Tab: The first thing we need to add a custom “Tab” to the System Configuration. Tabs are left navigation in admin section Stores -> Configuration. The default tabs are General, Catalog, Customers, Sales, Services, and Advanced.

Section: Each Tab has a number of sections. For example, the Advanced tab has (by default) an Admin, System, Advanced, and Developer section. If a Tab is configured with no sections, it won’t show up.

Group: Groups are used to group together different configuration options, and are displayed in the Magento admin with a pop-open widget. For example, in a stock install the Advanced section has a single group named “Disable modules output”.

Fields: Finally, we need individual configuration fields. Which is used for taking input data for our Magento2 system configuraion.

Lets create a new tab “Ipragmatech Extension”. Inside system.xml file code should be following.

<?xml version="1.0" encoding="UTF-8"?>

<config xmlns_xsi=""
      <tab id="pricenegotiator" translate="label" sortOrder="10">
         <label>Ipragmatech Extension</label>

Now lets create a section within this tab

<section id="pricenegotiatorsection" translate="label" type="text"
   sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
   <label>Price Negotiator</label>

We have done through tab and section now lets create a group in which we add individuals fields

<group id="general" translate="label" type="text" sortOrder="1"
   showInDefault="1" showInWebsite="1" showInStore="1">
   <field id="active" translate="label" type="select" sortOrder="1"
      showInDefault="1" showInWebsite="1" showInStore="1">

In the above code block I have shown the field, tags are self describing,type is select and we have added boolean option yes/no, which is defined in source tag. Here we are using magento in-built resource type. Customer resource will explained later.Till now we have gone through the basic building block now the next part is what are the different fields, how we add validation and how to add field dependency etc. Next field is a simple text field with validation

<field id="admin_no_reply" translate="label" type="text"
   sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1">
   <label>Admin No-response</label>
   <validate>validate-greater-than-zero required-entry</validate>
   <comment> <![CDATA[Query expire after admin not replied. (in hours)!]]></comment>

In the above code, we use two more thing validation and comment. Validation can be used under validation tag. One or more validation can be used with separated with single space. Comment can be used at the end with above-mentioned syntax.

Now if you want to create a field with type ‘select’ and want to add your custom resource. for example

<field id="new_product_qty" translate="label" type="select"
   sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1">
   <label>New Product Qty</label>
   <comment> <![CDATA[No of new product display.]]></comment>

For this, you have to define a custom resource. Create a directory structre as CompanynameModulenameModelConfigSource and add a file named Maxqty.php.

namespace CompanynameModulenameModelConfigSource;

use MagentoFrameworkOptionArrayInterface;

class Maxqty implements ArrayInterface

     * Option getter
     * @return array
    public function toOptionArray()
        $arr = $this->toArray();
        $ret = [];
        foreach ($arr as $key => $value) {
            $ret[] = [
                'value' => $key,
                'label' => $value
        return $ret;

     * Get options in "key-value" format
     * @return array
    public function toArray()
        $maxvalList = [
            '1' => 1,
            '2' => 2,
            '3' => 3,
            '4' => 4,
            '5' => 5
        return $maxvalList;

add the above code in that file. And one more thing is field dependency. Suppose you have a configuration field ‘Admin notify’ if you select yes then there is another field just below it will appear and ask for custom Email-id. If you select no then the field should be disappeared. let see the example:

<group id="negotiator_notification" translate="label" type="text"
   delault="1" sortOrder="3" showInDefault="1" showInWebsite="1"
   <field id="admin_notify" translate="label" type="select"
      sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
      <label>Admin Notificatin</label>
   <field id="admin_email" translate="label" type="text"
      sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1">
         <field id="admin_notify">1</field>
      <label>Admin Email</label>
      <validate>validate-email required-entry</validate>

Here under the <depend></depend> tag, we have specified the parent field in which this fields is depended on.


System Configuration is powerful parts of the Magento eCommerce System for the store admin. It should be user-friendly so that non-technical user can configure properly. As a developer, it will allow you to quickly and easily setup forms elements that allow your end-users to configure their Magento System and your custom modules. Hope this                article will help to create a proper Magento2 system configuration for your module. Feel free to comment  if there is any technical issue.


Alan Storm

Easy steps to install Magento2 with PHP7 on Amazon EC2 ?

If you are planning to run an online store for your products, the first choice you get from eCommerce experts would be Magento eCommerce store. Magento is vastly used eCommerce platform by online sellers. Once Magento platform has been chosen next challenge to select hosting where your store run smoothly. Amazon EC2 is most preferred hosting service and widely used by eCommerce store owners. But how can someone install Magento2 on amazon EC2 without any technical help? The answer is to use the Amazon Machine image(AMI) which has in built environment for Magento.

It has been a long time since Magento2 is being launched and now it is replacing Magento1.9.x with powerful features. It’s easier to use Magento2 with php5.6.x and apache2 but the problems occur when you want to install Magento2 latest third party plugins.

is there any issue to install Magento2 plugins or it’s a rumor by Magento2 critics ? Well, it’s not a rumor and we faced this issue while working on one of our clients. In this article, we are going to cover these issues for Magento2 server configuration and explore the available solutions.

How did it happen ?

We used scalable Magento2 stack AMI for an online store with the following configuration.

It works quite well for default Magento2 but things went nasty when we try to install the one of the latest plugins.



What were our key issues finding ?

1. PHP version : There is not standard binary for php7 for Amazon Machine at the time of writing and we faced following issues:

  • Should it would be compatible with currently running apache server. We tried to install php7-php module from remi but it’s not compatible with Apache 2.4
  • Are all required PHP extensions by Magento available ?

2. PHP extensions :
It is very easy to install PHP extension but consider when one of the extension have library dependencies.

  • How did we find the correct version of the library ?

There may be lots of available libraries, we only have the options to hit and try.
3. Setting Cron for Magento : This is also quite complex like permission fight, the issue with default php.ini path after installing PHP7 etc.

How do we solve these problems and install Magento2 on the Amazon Ec2 with Php 7?

1. Install PHP7.0.7 from Remi

Remove php if available

sudo yum remove php5*

Add the following repository:

sudo yum install remi-release-6.rpm

Edit the following file

/etc/yum.repos.d/epel.repo and set enabled=1

Execute the following command

sudo yum upgrade -y
sudo yum install php70

Install the following extension

sudo yum install php70-php-fpm
sudo yum install php70-php-xml
sudo yum install php70-php-pdo
sudo yum install php70-php-mysqlnd
sudo yum install php70-php-pdo
sudo yum install php70-php-imap
sudo yum install php70-php-intl
sudo yum install php70-php-zip
sudo yum install php70-php-pecl-apcu
sudo yum install php70-php-mbstring
sudo yum install php70-php-mcrypt
sudo yum install php70-php-opcache

To add php70-php-gd extension execute the following command

sudo rpm -ivh
sudo yum install php70-php-gd

Start the fpm daemon manually each time server rebooted

sudo /etc/init.d/php70-php-fpm start

or to auto start PHP on reboot use the following

sudo chkconfig php70-php-fpm on

Switch Apache from prefork to mpm event process (this is required because mod_php isn’t thread safe) in /etc/httpd/conf.modules.d/00-mpm.conf

LoadModule mpm_event_module modules/

and comment others.

Instruct apache to pass all php requests to php-fpm by adding the following lines in /etc/httpd/conf/httpd.conf

<FilesMatch .php$>
SetHandler "proxy:fcgi://"
DirectoryIndex /index.php index.php

Restart apache using sudo service httpd restart. If everything went ok you should be able to verify the installation by requesting a php file containing phpinfo().

If you have existing shell scripts that use php’s cli interpreter and thus start with #!/usr/bin/php, you have to set up a symlink to /usr/bin/php since the binary is now named /usr/bin/php70. You can do this as follows:

sudo ln -s /usr/bin/php70 /usr/bin/php

2. Install Magento2

Now download Magento and upload it to /var/www/html/ or you can install using composer.
Give appropriate permission of app/etc, cron.php and var/ directory.
create a cron tab for Magento user eg.

sudo crontab -u ec2-user -e

add following lines:

* * * * * sudo /usr/bin/php70 -c /etc/opt/remi/php70/php.ini /var/www/html/bin/magento cron:run >> /var/www/html/var/log/magento.cron.log
* * * * * sudo /usr/bin/php70 -c /etc/opt/remi/php70/php.ini /var/www/html/update/cron.php >> /var/www/html/var/log/update.cron.log
* * * * * sudo /usr/bin/php70 -c /etc/opt/remi/php70/php.ini /var/www/html/bin/magento setup:cron:run >> /var/www/html/var/log/setup.cron.log

now check:

sudo crontab -u ec2-user -l

restart cron service

sudo service crond restart

A Quick and Easy Solution : Magento2 stack AMI on AWS

If you are a non-technical person, want to setup your eCommerce website in few minutes ? Use Magento2 stack AMI and run your online store in few minutes on amazon cloud. It is ready to run, prebuilt environment setting for scalability, performance and high availability for your online store.
Following are the some vendor that provide Magento Stack AMI on AWS:
Magento2 stack AMI – by iPragmatech
Deploy Magento on Amazon Web Services by Bitnami


In this article, we have described the common issue of Magento2 server configuration which is quite a time taken as well. Though there may be more configuration issue which someone face and may take few hours to a day. We suggest using easy to go solution which saves time and effort instead of configuring everything by your own.


Magento Cron Setup
Install PHP 7 on EC2 t2.micro Instance running Amazon Linux Distro