Convert your eCommerce Store to Mobile Store and Mobile Application

If you read my earlier blog on eCommerce to mCommerce you will come to know about importance of having mobile commerce, in this blog I am going to explain you mobile commerce solution provided by my company. We have a solution to convert your online store to mobile website or mobile application. If you are using Magento, OpenCart, Big Commerce, Wordpress, Joomla, osCommerce, PrestaShop, osCommerce, Zen Cart, Tomato Cart or any other open source shopping cart, we can convert it to mobile web store or application.

When you need Mobile Website and When you need Mobile Application?

There is a difference between mobile website and mobile application. Mobile website is something which user can directly open in the browser and access data of the website.  Mobile application is something which user has to download from the stores and install it and then they can access it.

Following are some advantages of mobile website.

• Mobile website is instantly available.
• It can be viewed on almost all the mobile devices.
• One can find mobile website easily with search engines.
• Mobile website can be shared easily.
• Mobile website can act as mobile application as well.

Following are some advantages of mobile application.

• One can use mobile application offline.
• One can personalize application.
• When you need hardware support.

What we offer?

Our solution converts your online store (your eCommerce website) to mobile website/application by using the facilities and services of your existing eCommerce platform. We build a separate mobile website for your store. That means you can manage your website and mobile website with same admin panel offered by your eCommerce platform. All the changes in your store will be available on both the websites.

Why we give you separate mobile website?

As we know the some of the eCommerce platform gives you mobile or responsive theme. These themes are specially designed for mobile screens. But those themes are not 100% user friendly and touch friendly. Also it just gives good look to your mobile website, but in terms of server communication and data usage, it's not up to mark. As for each request your page is refreshed and it go to server and render new page again. This may be slow in some devices depending your network strength. Also it consumes more bandwidth which may not be good for some users. Sometimes it slow down performance in some of the devices as all the device browsers do not have enough computing power. So with responsive theme your site is not 100% user friendly on mobile devices.

What we offer is site built with JavaScript framework. It's a HTML 5 based framework with advanced layout engines. It has a controls with rich user interface. Site build with this framework works very well on the mobile devices at it has on demand rendering. It will crate layout only when it's required, that improves the performance. Once this site is loaded, it will communicate with server only for data. There is no page refresh. Everything works with Ajax based services and only when it's required. Using this approach your data usage will be reduced and site navigation will be much faster. Application built with this framework has look and feel like native application. This is one more benefit, as normally user likes native designs much. Also with this framework you get offline storage was well your website can work offline as well. Also this website can be converted to mobile application easily and with minimum efforts. So it's very cost effective solution. With one mobile website, you also get mobile application.

How does backend works on your existing store?

For back end we use web services and those web services uses your existing platform data. So whatever your platform is web services fetch data from it and send data back to mobile website or application. Our solution is not like predefined and fully developed product as we understand that each customer have their unique requirements and needs. So what we have is basic product developed and we customize it according to your need. Some of the current eCommerce platform offers mobile website and applications they have predefined products, you can not make much changes in it and you just have to use what they offer. In stead of this we offer you customized solution for your need.

Everything from mobile websites to web services are customized as per your requirements. Designs of mobile websites are built according to your requirements as we know that you want keep your branding as it is in mobile websites.

So with our solution you get mobile website on your existing eCommerce platform as per your requirements and your needs. You can manage both your site from your existing admin panel of eCommerce Platform. Our mobile website is designed to work all the mobile devices. With our solution, you can reach to more customers and increase your business.

Contact me if you need such solution.

Email : hdave10@gmail.com
Skype: hiren.dave
Phone: +91-9327452580

eCommerce to mCommerce - Reach to maximum number of customers and grow your business

What is mCommerce?

According to Wikipedia, The phrase mobile commerce was originally coined in 1997 by Kevin Duffey to mean "the delivery of electronic commerce capabilities directly into the consumer’s hand, anywhere, via wireless technology." Current definition is, mobile commerce is the process to buying or selling products and services through wireless handheld devices like mobiles, tablets, smart phones etc.

Few years back eCommerce revolutionized the process of buying and selling stuff. It gave you liberty to buy and sell stuffs on desktop computer from your home or offices. Now a days eCommerce seems to be hurdle in transacting online with advent of hand held devices having internet facilities. Now a days people are using more smart phones and tablets than desktops and notebooks. See the chart below, it grew up rapidly and expected to grow up in coming years.

Smart phones and tablets are used normally in day to day operations. Todays hand held devices are far more advanced. It lets you browse Internet, it gives you big storage, it gives you high computing and processing power. 

So what's the impact of mobile commerce on your business?

Mobile commerce can impact your business in number of ways. For example if you are running an online store, your customer may access your store from smart phone or tablets and it may be possible that your website does not look good on it and they may not buy the products. With the Google Play store and iTunes store, user can download number of applications on their mobile devices and can use those applications for their needs. So if you are offering some services and you don't have any mobile friendly website or application, you are loosing your customers or you are not reaching to enough customers. Because there are chances that customer search on mobile devices and they did not find you. Although you were able to provide service to your customer but just for the reason they can not find you, you loose the customers.

Why your current eCommerce web site is not good for mCommerce?

Mobile devices have limited screen width and height and your current website will not work properly. For example if you have fixed height and width in your website, on mobile device user have to frequently scroll left- right or up-down to see the content of the site. This is very awkward for users as they are not able to see content properly. Customer may be traveling or walking they have one hand occupied, then they may not be able to scroll or eventually they will close your site. Current navigation of your website may not be useful. For example you have navigation menu where user can hover mouse and the sub menu is displayed. This type of navigation will not work as on mobile devices user can not hover finger over menu. So in this case your customer will never know what are you offering and they may not buy anything on your site. Another example is of dynamic height and width. Let's you set a dynamic height and width on your website so it will adjust on mobile device automatically. In this case user will see small fonts, small images on your site and this is not very clear. So user have to zoom in and if they zoom in, again they have to scroll left and right. So this is not good user experience for any user. 

Why you need a mobile website or application? 

As we mentioned earlier, people with mobile devices will search for services from mobile devices so it's recommended that you need to have a mobile website or application. It increases your customers and business. No matter what your business is mobile website and application plays a big role here. It also increases productivity of your business. For example if you are an owner of eCommerce site, you need to be connected with your customers every time. You need to reply to their queries, you may want to check your stocks. So how about an application on your mobile which let you do all these stuff? If you are a doctor running a hospital, how about an application that let patients to book an appointment from mobile or check their reports on the go? There are number of such examples.

Today no matter what your business is you need something which supports mobile commerce.

And that's where we steps in. We have number of solutions for mobile commerce starting from mobile websites to mobile applications and mobile marketing. Use the mobile commerce and grow your business. Contact me if you need mobile commerce solution.

Email : hdave10@gmail.com
Skype: hiren.dave
Phone: +91-9327452580

How to use hasMany association in Sencha Touch Model

Hello,

In this blog I will explain how to use "hasMany" associations in Sencha Touch models. First lets see what are the associations in Sencha Touch.  Normally in RDBMS we have primary key and foreign keys and using which we can reference data from other tables. For example students and course. Here one course can have many students and a student belongs to specific course. This types of associations we can have in Sencha Touch. Sencha Touch data package supports associations along the models. For this blog lets take an example of Products and Merchants. Here a merchant can have many products and a product belongs to a marchant. In this case your models definition would look like following.

Ext.define('MyApp.model.Merchant', {

    extend: 'Ext.data.Model',

    config: {

        fields: [

            { name: 'id',                   type: "int"},

            { name: 'name',                 type: "string"}

        ],

        associations: [{ type: 'hasMany', associatedModel: 'MyApp.model. Product', name: 'products' }]

    }

});

Ext.define('MyApp.model.Product', {

    extend: 'Ext.data.Model',

    config: {

        fields: [

            { name: 'id',                   type: "int"},

            { name: 'title',                type: "string"},

            { name: 'description',          type: "string"},

            { name: 'cost',           type: "float"}

        ],

        idProperty: 'id',

        associations: [{ type: 'belongsTo', model: 'MyApp.model.Merchant', name: 'merchant' }]

    }

});

Above is the definition of product and merchant models. Here we have used associations config to define it. Merchant has specified the association as hasMany and product model specified it with belongsTo . You can specify more then one associations on single model. If you see the definition of association, we have specified three config here, type, model and name. Type is the type of association, associateModel specifies the other model and name defines the key of field.  You can use getter and setter with this name or use this name in list or dataview tpl. Please note here you have to specify both hasMany and belongsTo association to each model .If you skip either, it will not work.  Now let's say we have to set tpl in the list for the products and show the merchant name there. You tpl should like like this.

var goodTpl = new Ext.XTemplate(

    '<div>',

        '<div>{title}</div>',

         '<div class="goodmerchant">By {merchant.name}</div>',

    '</div>'

);

As you see above we have used merchant.name to display name of the merchant for the product. It will fetch merchant name from merchant store using the association.

Load JavaScript Dynamically

Recently in one of my project we have requirement to load JavaScript file dynamically and call a specific function after the script is loaded. Following is the function you can use for it.

function loadJavaScriptOnDemand(src, callback) {

    var script = document.createElement('script');

            script.src = src;

    document.getElementsByTagName('head')[0].appendChild(script);

    

    script.onreadystatechange = function() {

        if (script.readyState == 4 || script.readyState == "complete") {

            if (typeof callback == "function") {

                  callback();

            }

            callback = null;

        }

    }

}

Above function you can call as following.

loadJavaScriptOnDemand('path/to/your/javascript',function(){alert('JavaScript loaded')});

If you above function we have added onredaystatechnage events for the the script. Since this will be asynchronous loading we have to check the state for the progress and call the callback function once the script is loaded completely.

Hope this helps you.

Adjust Sencha Touch Carousel Indicators

Hello,

Recently we have a requirement in one of our project, to move carousel indicators outside the carousels. See the image below.

Now the issue was, main div container for the indicators is using the inline styling to position indicators based on user preferences. So we can override with class as we have to change the logic of the inline style. For that you have to override base class of Sencha Touch, name of the class is Ext.carousel.Indicator, you will find this class in src/carousel/indicator.js file in your sencha touch source code. Find the following function in the class.

updateDirection: function(newDirection, oldDirection) {
        var baseCls = this.getBaseCls();

        this.element.replaceCls(oldDirection, newDirection, baseCls);

        if (newDirection === 'horizontal') {
            this.setBottom(0);
            this.setRight(null);
        }
        else {
            this.setRight(0);
            this.setBottom(null);
        }
    }

Here you can see it's setting bottom property to zero. We have to override this function. Create an override.js file and attach it to your index.html file after sencha touch js file and add following code to it.

Ext.override(Ext.carousel.Indicator, {
    updateDirection: function(newDirection, oldDirection) {
        var baseCls = this.getBaseCls();

        this.element.replaceCls(oldDirection, newDirection, baseCls);

        if (newDirection === 'horizontal') {
            this.setBottom(-20);
            this.setRight(null);
        }
        else {
            this.setRight(0);
            this.setBottom(null);
        }
    }
});

As you see in the above code, we set bottom property to -20. You can use your own number here depending on your designs.

Hope this helps you.