Maestro Documentation

version 1.0

Getting Started

Welcome

Maestro - A Complete E-Commerce App Infrastructure
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 preview app in you browser
      $ ionic serve -l
      
      //To deply the Ionic app on specified platform emulator. 
      $ ionic cordova emulate ios
      
      // To run your app on deveice follow the command below.
      $ ionic cordova 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 '_custom.scss' file inside 'scss' directory. View templates and modals are in templates directory inside www. 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 view templates have class name specific to their view title. i.e. Onboarding view has a class name onboarding. All customisation in onboarding view has been done inside .onboarding in _custom.scss.

          
      //onboarding
      .onboarding {
          .image-slider-holder {
              width: 100%;
              height: 60vh;
              margin: 0 auto;
              overflow: hidden;
              padding-top: 0px;
              img {
                  height: 60vh;
              }
          }
          //truncated for preview
      }
      

Following are the color variables used along with the default built in ionic color variables.

          
        //colors variable
        $warm-grey: #878787;
        $grapefruit: #ff5252;
        $black: #000000;
        $light: #ebebeb;
          
Javascript
  • Data in view is rendered from javascript object in controller.js file in www/js directory.
  • All modals opening and closing functions are handled in AppCtrl in 'controller.js' file. For example
            // Create the profile modal that we will use later
          $ionicModal.fromTemplateUrl('templates/modal/profile.html', {
            scope: $scope
          }).then(function(modal) {
            $scope.profileModal = modal;
          });
          $scope.closeProfileModal = function() {
            $scope.profileModal.hide();
          };
    
          $scope.openProfileModal = function() {
            $scope.profileModal.show();
          };
                 
  • All other functionalities, i.e. action on button click is in the specific controller of the view, well-commented and selft explanatory function.
           //go to main page clearing history
          $scope.goToMain = function(){
             $ionicHistory.nextViewOptions({
              disableBack: true
            });
    
            $state.go('app.editorial');
          } 
                
Animation

Animation has been implemented using Animate.css classes 'animated animationName', i.e. 'animated fadeInLeft'. You can find out more about animate.css here. Animation on product listing in Editorial, Category, Search and Wishlist has been implmented using global css from _custom.css as below.

         
       //animation variable
      $animation-keyframe: fadeInUp 0.75s linear;
      //animation
      .product-list,
      .cart-list {
          .list-item,
          ion-item {
              animation: $animation-keyframe;
              -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
          }
      }

      .editorial-list {
          animation: $animation-keyframe;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
      }
      

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