JS Hooks

Modify the data model or add custom filters

Include the following tag, followed by your extension, before the app loads.

<script>
!function(a){a.initCallbacks=a.initCallbacks||[],a.onInit=function(b){a.initCallbacks.push(b)}}(window.esc_navindexer__app||(window.esc_navindexer__app={}));
</script>

<script>
window.esc_navindexer__app.onInit(function(DataModel, Vue) {
   // Add custom data to model
    DataModel.developer = { name: 'Eastside Co', website: 'http://eastsideco.com' };

    // Create custom filter
    Vue.filter('uppercase', function(value) {
         return value.toUpperCase();
    });
});
</script>

Example: adding manufacturer images to products

<script>
window.esc_navindexer__app.onInit(function(DataModel, Vue) {

   // Add custom data to data model
   DataModel.manufacturers = [];
    $.get('.../manufacturers.json', function(data) {
       $(data).each(function() {
         DataModel.manufacturers.push({
           name: data.title,
           image: data.image.src
         });
    });

    // Add custom function to data model
    DataModel.getManufacturer = function(product) {
        for (var i = 0; i < DataModel.manufacturers.length; i++) {
            var man = DataModel.manufacturers[i];
            if (man.name == product.vendor) {
               return man;
            }
        }
        return {
            name: product.vendor,
            image: ''
        };
    };
});
</script>

In your templates:

// product.vue
<span>{{ product.title }}</span>
<img :src="getManufacturer(product).image"/>