Magento Ionic App? Filtering categories and pages


#1

Good day all,

I have few questions, I bought a magento ionic app that sync my magento ecommerce site with the app. However, I have some issues with the customization. The app is very basic.

Question 1: I have created a nested tab with 3 nav (Home, wishlist, Login) but I am having issues link each tab to the template file. They all have their files in the www folder. How can I acheive this?

Here is the code for the home page:

<ion-view view-title="Quickkbuy">
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Home
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-heart"></i>
        Wishlist
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Login
      </a>
    </div>
  </div>
   <ion-content>

        <ion-slide-box delegate-handle="image-viewer" auto-play="true" does-continue="true">
          <ion-slide  style="line-height: 0px" ng-repeat="item in banners.home_banners.item">
             <img style="width: 100%" src="{{item.image.__text}}">
          </ion-slide>
         </ion-slide-box>

   <ion-list>
      <ion-item class="item-royal" ng-if="categories.category.items">
         <strong>Categories</strong>
      </ion-item>
      <ion-item ng-repeat="item in categories.category.items.item" ng-click="maincategory(item.entity_id)">
         {{ item.label }}
      </ion-item>
   </ion-list>

   </ion-content>
</ion-view>

Question 2: I would like to put static images in the home page, and I would like them to link to a separate categories. Here is the app.js file.

// Ionic App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'main.controllers'])

.run(function($ionicPlatform, $rootScope, $http, $ionicLoading) {

    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);

        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }

    });

   $rootScope.$on('loading:show', function() {
        $ionicLoading.show({
           template: '<ion-spinner icon="spiral" class="spinner-calm"/>'
        })
    });

    $rootScope.$on('loading:hide', function() {
        $ionicLoading.hide()
    });

})
.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
  .state('login', {
    url: '/',
    templateUrl: 'templates/login.html'
  });
 
  $urlRouterProvider.otherwise("/");
 
})
// App Service Show alert, Ionic Loading etc
.service('appService', ['$ionicPopup', '$ionicLoading', '$timeout', '$http', function($ionicPopup, $ionicLoading, $timeout, $http) {

    this.url = "http://www.quickkbuy.com"; // Change url as your website url http://your-web-url.com
    this.appCode = "homand1"; // Change App Code as your app code. find app code in magento backend

    this.category_id = 0;
    this.product = {};
    this.productGallery = {};

    this.getCat = function() {

        $http.get(this.url + '/xmlconnect/catalog/category/').
            then(function(response) {

                var x2js = new X2JS();
                this.categories = x2js.xml_str2json(response.data);

            }, function(response) {

        });

            return this.categories;
        
    };

    // An alert dialog
    this.showAlert = function(status, message, time) {

        time = typeof time !== 'undefined' ? time : 2000;
        status = angular.uppercase(status);

        var alertPopup = $ionicPopup.alert({
            title: status,
            template: message
        });
        $timeout(function() {
            alertPopup.close(); //close the popup after 3 seconds
        }, time);

    };

    //Toast meassage
    this.toast = function(message) {
        $ionicLoading.show({
            template: message,
            noBackdrop: true,
            duration: 800
        });
    };

    return this;
}])

.factory('$localstorage', ['$window', function($window) {
  return {
    set: function(key, value) {
      $window.localStorage[key] = value;
    },
    get: function(key, defaultValue) {
      return $window.localStorage[key] || defaultValue;
    },
    setObject: function(key, value) {
      $window.localStorage[key] = JSON.stringify(value);
    },
    getObject: function(key) {
      return JSON.parse($window.localStorage[key] || '{}');
    }
  }
}])

//State Provider
.config(function($stateProvider, $urlRouterProvider, $httpProvider) {

    $httpProvider.interceptors.push(function($rootScope) {
        return {
            request: function(config) {
                $rootScope.$broadcast('loading:show')
                return config
            },
            response: function(response) {
                $rootScope.$broadcast('loading:hide')
                return response
            }
        }
    })

    $stateProvider

        .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html',
        controller: 'AppCtrl'
    })

    .state('app.search', {
        cache: false,
        url: '/search',
        views: {
            'menuContent': {
                templateUrl: 'templates/search.html'
            }
        }
    })

    .state('app.address', {
        cache: false,
        url: '/address',
        views: {
            'menuContent': {
                templateUrl: 'templates/address.html',
                controller: 'AddressCtrl'
            }
        }
    })

    .state('app.orders', {
        cache: false,
        url: '/orders',
        views: {
            'menuContent': {
                templateUrl: 'templates/orders.html',
                controller: 'OrderCtrl'
            }
        }
    })

    .state('app.details', {
        cache: false,
        url: '/orders/details',
        views: {
            'menuContent': {
                templateUrl: 'templates/orderdetails.html',
                controller: 'OrderdetailsCtrl'
            }
        }
    })

    .state('app.categories', {
        url: '/categories',
        views: {
            'menuContent': {
                templateUrl: 'templates/categories.html',
                controller: 'CategoriesCtrl'
            }
        }
    })

    .state('app.products', {
        url: '/products',
        views: {
            'menuContent': {
                templateUrl: 'templates/products.html',
                controller: 'ProductsCtrl'
            }
        }
    })

    .state('app.productview', {
        url: '/productview',
        views: {
            'menuContent': {
                templateUrl: 'templates/productview.html',
                controller: 'ProductviewCtrl'
            }
        }
    })

    .state('app.home', {
        url: '/home',
        views: {
            'menuContent': {
                templateUrl: 'templates/home.html',
                controller: 'HomeCtrl'
            }
        }
    })

    .state('app.wishlist', {
        cache: false,
        url: '/wishlist',
        views: {
            'menuContent': {
                templateUrl: 'templates/wishlist.html',
                controller: 'WishlistCtrl'
            }
        }
    })

    .state('app.cart', {
        cache: false,
        url: '/cart',
        views: {
            'menuContent': {
                templateUrl: 'templates/cart.html',
                controller: 'CartCtrl'
            }
        }
    })

    .state('app.checkout', {
        cache: false,
        url: '/checkout',
        views: {
            'menuContent': {
                templateUrl: 'templates/checkout.html',
                controller: 'CheckoutCtrl'
            }
        }
    })

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/home');

});

Please I am new to ionic. Please if you require to file the whole ionic app files, I will send it across. Please help me. It is very urgent.

Thanks


#2

@mhartington please assist


#3

Could you please provide a codepen?

Not really sure what the issue could be off the top of my head.


#4

use mainCategory(5), the “5” is the category id you will be linking the cateogory to the image.