Maestro - Ionic 3 Template Documentation

version 1.0

Getting Started

Welcome

Maestro - A Complete E-Commerce App Template for Ionic 3.4
This template provides a complete user journey for an e-commerce app- from product listing, offer showcase to login, signup, payment and user profile.

Installation

To use and run this app, your system must have NodeJS, Ionic & Cordova installed. You can follow the link to download latest NodeJS for your system. Once NodeJS is installed on your system, you can install Ionic and Cordova using following commands in your terminal.

      
      $ npm install -g cordova ionic
      

Once ionic installed on your system, you can run/preview the app running following commands inside app directory.

      
      //To install necessary node_modules
      $ npm install

      //To preview app in you browser
      $ ionic serve -l
      
      //To deply the Ionic app on specified platform emulator. 
      $ ionic emulate ios
      
      // To run your app on deveice follow the command below.
      $ ionic run ios 
      
Features
  • Onboarding/ Walkthrough slider
  • Full login flow including sign in, signup, password reset
  • Side Menu Navigation, that is hidden and only comes when you need it
  • Category page with filtering and multiple layout selector
  • Product page with slider, multiple colour and size selectors
  • Shopping Cart
  • Full payment flow including Personal details, Card details and sucess page
  • Wishlist/ Favourites with edit option
  • Search page with working example
  • Settings - with password change and profile edit
License

This original work with exclusive rights to Pinro and Envato for distribution. By purchasing the item, you acquire the right to use that item; not to re-destribute the item.


Customization

Folder Structure

All stylings and customization has been done in scss files. All common styles are in 'app.scss' file inside 'src/app' directory. Page specific component, templates and styles are in respective directories by their names inside src/pages directory. Once you have download the package you will see the following folder structure.

SASS

Sass is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions. Maestro supports Sass and is pure built on top of Sass

All common elements have common styles specific the element. i.e. Product List has a class name product-list. All customisation specific to the common class has been done inside .product-list in src/app/app.scss.

          
      /*****************************
            Product List
      *****************************/
        .product-list {
          &.list-view {
            .list-item {
                width: calc(100% - 30px);
                margin: 15px;
                position: relative;
                .product-image {
                    height: 250px;
                }
                .price {
                    font-size: 13px;
                }
            }
          }
            //truncated for preview
        }
      

Following are the color variables used, available inside src/theme/variable.scss.

          
      //colors variables
        $colors: (
          primary:    #387ef5,
          secondary:  #33cd5f,
          danger:     #ef473a,
          light:      #fff,
          dark:       #222,
          light-grey: #ebebeb,
          warm-grey: #878787,
          grapefruit: #ff5252,
          lighter: #ebebeb
        );
          
Javascript
  • App the configured in src/app/app.module.ts and src/app/app.component.ts is the main app component.
  • Page specific component, template and styles are inside the specific page directory in src/pages directory.
Animation

Animation has been implemented using Animate.css classes 'animated animationName', i.e. 'animated fadeInLeft', in template files specific to the view/pages. You can find out more about animate.css here.


Support

In order to modify the app you need to have knowledge in web technologies such as javascript, html5 and css3. You also need to be able to install Ionic and its dependencies on your machine.

We recommend you to use the Ionic official installation guide and ask on the Ionic forum for support. We then will be happy to answer all the app related questions/issues via email ( hello@pinrotech.com ) or themeforest comments.

You can build this app with phonegap build, however, we don’t provide support on how to build the app using phonegap build.

Credits

UI is heavily inspired by Mono iOS UI kit