Skip to main content

Custom Templates

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

What is a custom template?​

Custom templates are vue templates that can we use in your theme if any of the available system pages do not meet your requirements. These pages are mounted at /c/page-name routes. An instance of application SDK is available in case the template needs any data that it wants to display in the UI.

Creating a custom template​

Inside your theme/custom-templates folder create a new vue file for example notifications.vue. Now create an index.js in theme/custom-templates folder. Import the notification component inside this file. You need to now default export an object with the list of all components. Use the below snippet as a reference

import Notification from './notification.vue';

export default {
  // mount at /c/notication
  notification: {
    component: Notification,
    meta: {
      header: false,
      footer: false,
    }
  }
}

The meta object has two keys header & footer. You can set them as true or false to show header & footer in your custom page. We have set both as false as we do not want to show the header and footer in our custom template. While serving you can view this page at http://localdev.fynd.com:5000/c/notification. The notification in the route comes from the key in the default exported object.

Nested custom templates​

You can have nested custom templates as well. Let’s say we are building a custom settings page where users can view the notifications & display languages. The UI skeleton looks something similar as shown below

QG11


We have nested routes inside settings to show notifications and languages. This can be implemented by creating three pages called settings.vue, notifications.vue & languages.vue

The settings.vue component will have router-view component to show the child components. Example code snippet 

<div class="settings-container"`>`
    <router-view></router-view>
</div>

Then you can code your notification & language components as per your UI. Now add the index.js as below

export default {
  "settings": {
    component: Settings,
    meta: {
      header: false,
      footer: false,
    },
    children: {
      notifications: {
        component: Notification,
        meta: {
          header: false,
          footer: false
        }
      },
      languages: {
        component: Language,
        meta: {
          header: false,
          footer: false
        }
      }
    }
  }
}