We believe that you have successfully started an instance of i2CSMobile app by following installation guide. The project structure is as follows,
The app folder contains the actual modules of the app. Each module has its own folder and consist of several
jsfiles. We tried to keep modules as much independent as possible, thus removing or adding a new module affects minimum code change. The product comes with few default modules,
Normally each module which interacts directly with end user has following structure. We have 4 different
js files to initialize the angular module, which we believe very easy to maintain a clean source code.
| |__ item_list.html
| |__ layout.html
is the name of the module. We use the naming convention as
MODULE_NAME.module.js .etc to define the
js files of the module.
Go to 02 Creating a Module for a detailed explanation about modules.
Common folder is the place for
widgets which are common for the entire application. There are few core
widgets provided by default.
- app.service.js This has service calls related to customer registration, login and logout
- analytics.service.js Google analytics service. Captures page views.
- data.service.js Calls the http API endpoints and resolves the response. The dataService is responsible for providing a promise object containing the requested data. On a success response it returns the data from the server, and on an error the promise rejects with the HTTP server response. i.e, HTTP server response object contains,
- notification.service.js Initializes the notification service. This will register the device for push notifications. Subscribes the device for a scheduled notification with random greeting message notified in 86400000 seconds from now
- update.service.js Initializes the update service. This will check for available app updates on start and once in a 5 minutes. If an update is available, checks for network connection. If the device is connected to a WIFI connection, download the update and install, otherwise popup informing the update will be downloaded when device is connected to a WIFI
Shop is the default landing module of the app. It has all the functionality related to the product catalog of the shopping cart application.
Shop home view
- Promotional banners
- Categories view
- Featured items
- Latest items
- Infinite scroll
- Image slide show
- Product options (checkbox, radio, select, text, textarea, date, datetime, .etc)
- Share with friends
Product search view
- Search for keywords
- Infinite scroll
Product category view
- Latest products of selected category
- Infinite scroll
Cart module consists of the functionality of the Cart tab of the mobile app. It communicates with the API to add items to cart, checkout and place new orders.
Cart home view
- Load current shopping cart
- Remove items from shopping cart
Cart checkout view
- Fill user data
- Select shipping method
- Select payment method
- Place the order
- Start online payment procedure
Info section contains everything related to the customer self care.
Info home view
- About us
- Contact us
- UI Language switch
- Show order list
- Select order and see invoice
Offers tab shows image feed from a banner and special priced items.
Offers home view
- Offer banner feed
- Special priced products
This contains main layout entry points of the app. Out-of-the-box product comes with two different templates for menu styles, tab navigation and side menu navigation.
Default is the tabs UI.
tabs.html contains the icons which should be added to each tab in the UI.
Enables a left side menu to navigate.
1.7. PAYMENT MODULES
Payment modules are to communicate with customizable payment gateways. A payment module exactly follows the same pattern as any other module. When placing an order with a payment method with additional steps involved, for example a credit card method, the app will search in
payment_modules directory for a module with that payment code. The system will route to the
home state of the payment module, so that user can enter additional data and proceed with the checkout.
is the main entry point of the application. Whenever you create or delete a module, you will have to update the angular main module initialization and register or unregister the module.
var starter = angular.module('starter', ['ionic', 'sample.module')
Apart from that, the
app.js file contains configurations. This file has the main route entry of the app. You can switch the main layout (tabs or side menu) by toggling following lines. The app is bootstrapped from an abstract state called
app. Then it branches into two abstract states,
app.main. All the states which inherit
app.menu state will have either tabs or side menu, whereas
app.main will have a clean layout without tabs or side menus.
This file contains two mandatory controllers,
This is the place you have to edit in order to change some of the configurable values of the app. Most important configuration is the
BASE_API_URL. Set it to your OpenCart/WooCommerce instance once you are successfully installed the OpenCart/WooCommerce module or plugin for i2CSMobile app.