A simple product lister with infinite scroll in Ionic

Hey Welcome back 🙂

Here we will create the basic structure of the Ionic app and create two factory methods. These will serve to retrieve products and list them using collection repeat with infinite scroll pagination and to show the product detail page. Like outlined in this post, we use the Woocommerce end points to produce a product listing that is paginated as well as a product detail with images.

We will bind these methods into the controller thru Angular Services. At this point all we have to do is create the appropriate Scope variables, bind them to the view and then populate them. We shall also add on the infinite scroll behaviour . All the code that is shown here is derived from working code, though copy pasting it may not work.

angular.module('app.services', [])

      .factory('myshop', [ '$http', 'baseUrl', function($http, baseUrl) {
       .....................
myshop.products = function (offset) {
    var url = baseUrl + "/wc-api/v3/products?filter[limit]=25&filter[offset]="+offset; return $http({url: url, method: 'GET' }).success( function(data, status, headers, config) { return data; }). error( function(err) { return []; } ); };

In the controller .

 

$scope.getProducts = function(offset) {

//check the internet connection
    if (window.Connection) {

        if (navigator.connection.type == Connection.NONE) {


            $rootScope.toggle('No Internet Connection', 4000);
        } else {
            myshop.products(offset).then(function (response) {
                    setTimeout(function () {
                        $scope.products = [];

                        angular.forEach(response.data.products, function(obj){
                            $scope.products.push(obj);
                        });


                        if (!$scope.$$phase) $scope.$apply();

                    }, 100);

                },
                function (error) {
                    $rootScope.toggle('No Internet Connection', 4000);
                }
            );

        }
    }
}

now for the infinite loading bit.

$scope.loadMoreProducts= function() {

    if (window.Connection) {

        if (navigator.connection.type == Connection.NONE) {

            $scope.moreProductData = false;
        } else {
            myshop.topShows($scope.numberOfProductsToDisplay +25).then(function (response) {
                    setTimeout(function () {
                        var prodcnt = 0;

                        angular.forEach(response.data.products, function (obj) {
                            $scope.products.push(obj);
                            prodcnt ++;
                        });

                        if (prodcnt == 0)     $scope.moreProductData = false;

                        if (!$scope.$$phase) $scope.$apply();
                        $scope.numberOfProductsToDisplay +=25;
                        $scope.$broadcast('scroll.infiniteScrollComplete');

                    }, 100);

                },
                function (error) {
                    $scope.moreProductData = false;
                }
            );

        }
    }
};

 

the template. we have made a rather simplistic product lister. In reality we would need product categories at least. We can get fancier with related products, etc etc. But  I hope that this provides some assistance if you are starting out developing on Ionic and Angular . In a future post I will show how to transition to Ionic 2 and TypeScript.

<ion-view id="page4">
    <ion-nav-title">
    <img class = "toplogo" src= "img/toplogo.png">Shop Vegan
    <button class="button button-icon topbutton ion-android-search"></button>

    </ion-nav-title>

    <ion-content  padding="false" >

        <ion-list  id=“product-list1">

            <ion-spinner ng-show="!loaded" icon="android"></ion-spinner>

            <ion-item class="item-text-wrap" ng-if="loaded && products.length == 0 ">No products found</ion-item>

            <ion-item
                    collection-repeat="file in products | orderBy:'name' "
                    item-width="100%"
                    item-height="file.height"
                    class="item-thumbnail-left dark item-text-wrap no-padding " id="myshopMyproducts-list-item1"
                    ui-sref='tabsController.product’ nav-direction="forward" nav-transition='android'
                    ng-click=“productDetail(file)" >

                    <img ion-img-cache ng-src="{{file.img}}"  width="40px">
                    <h2>{{file.name}} ({{file.type}})</h2>
                    <p>Price : {{file.price}} </p>
                    <br>Category: <h2>{{file.cat}}</h2>

            </ion-item>

        </ion-list>

        <ion-infinite-scroll ng-if="moreProductData" on-infinite="loadMoreProducts()" distance="1" >

        </ion-infinite-scroll>





    </ion-content>



</ion-view>