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