Customizing the Store

In ES Front (Store), you can override partials and several other resources by putting them in your extensions directory.

The mobileapp directory, is an example directory that corresponds to the asset type named "mobileapp". The structure of the mobileapp directory, which is found in the <ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/ directory, is illustrated as follows: 

The mobileapp directory will maintain all the required Store customizations that will appear when the mobileapp is being viewed by a user. The mobileapp directory contains the pages and themes folders together with the asset.js file.

You can optionally have the following special files within the <ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/mobileapp/pages/ directory. If there are no special files the default files, which are found in the <ES_HOME>/repository/deployment/server/jaggeryapps/store/controllers/ directory will be used.

• asset.jag - will be used when a particular mobile app is being viewed.
• assets.jag - will be used when mobile apps are being viewed.
• process.jag - will be used when someone clicks on the Install button in the mobile app.

You can maintain a separate directory, with a desired theme name, within the themes directory, and add your overriding partials and resources in your theme directory. The following sections describe how the Store can be further customized:

Overriding defaults

If you wish to completely change the asset details page for mobileapps, create you own asset.jag file in the <ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/mobileapp/pages/ directory.

If you only want to change a certain section in the asset details page, you do not need to have your own asset.jag file in the <ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/mobileapp/pages/ directory; instead, override default partials as explained in the following steps:

• Make a copy of the asset.hbs file, which is found in the <ES_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/partials/ directory. The asset.hbs file is used to generate HTML for the detailed view in the Store.
• Add the copy of the asset.hbs file into the extensions directory.
• Update the the asset.hbs file as required.

If you want to completely change the asset details page for mobileapps, then you can create your own asset.jag page for this purpose; otherwise, simply overriding default partials would be sufficient.

You can update the files in the css and js folders too in the same manner the partials folder was updated by adding new files (i.e., asset.css and asset.js) in your extensions directory.

Customizing a button

You will have a Subscribe button by default with your mobileapps asset. However, if you need to customize the button (e.g., change it from Subscribe to Install), follow the instructions below:

1. Create a partial file named process-asset-text.hbs with the following content.
   {{t "Install"}}
2. Insert the process-asset-text.hbs file into the <ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/mobileapp/themes/store/partials/ directory.

Adding a new page

Follow the instructions below to add additional pages for your asset type:

1. Create the new page as .jag files (e.g., custom.jag).
2. Insert the .jag file in the <ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/mobileapp/pages/ directory.

3. Add the corresponding URL mappings in the asset.js file, which is found in the <ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/mobileapp/ directory.

   For example, if custom.jag is the page created, enter the following in the asset.js file:

   var assetLinks = function (user) {
       return {
           title: 'Mobile Apps',
           links: [
               {
                   title: 'Custom',
                   url: 'custom',
                   path: 'custom.jag'
               }
           ]};
   };

   If you wish to access a newly created page, you will have to use the following URL format where the last fragment depicts what you have mapped as the url property.
   https://localhost:9443/store/extensions/assets/<asset_type>/<URL>
   For example:
   https://localhost:9443/store/extensions/assets/mobileapp/custom 

Overriding asset manager

ES uses a generic asset manager to define the way that the assets are retrieved. You can define your own asset manager to customize your asset retrieval method (i.e., by defining other related assets to be called together with your asset). All the assets for the Store are retrieved using the Manager object in the asset.js file, which is in the <ES_HOME>/repository/deployment/server/jaggeryapps/store/modules/ directory. If you wish to override the generic asset manager, you can create your own asset.js file with your own implementation logic and save it in the <ES_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/mobileapp/ directory.
For example: 

var assetManager = function(manager) {
    var get = manager.get;
    manager.get = function(id) {
        return get.call(manager, id);
    };
    return manager;
};