How to set custom page template settings?

Hi everyone!

I was wondering how to get custom page template settings working.

In the index.js a custom template is added:
(markdown code now works fine)

import { addPageTemplate } from "@factor/templates"

addPageTemplate({
  name: "My Landing Page",
  slug: "landing",
  component: () => import("./templates/tpl-landingpage.vue")
})

Script part of templates/tpl-landingpage.vue:

import { stored } from "@factor/api";
import Vue from "vue";
export default Vue.extend({
  computed: {
    post() {
      return stored("post") || {};
    },
    settings() {
      return this.post.settings || {};
    }
  },
  templateSettings() {
    return [
      {
        input: "text",
        label: "Heading",
        description: "Primary page heading",
        _id: "pageHeading",
        default: "Landing Page Template"
      },
      {
        _id: "boxes",
        input: "sortable",
        label: "Feature Boxes",
        description: "Some feature boxes",
        default: [{ __title: "Box 1" }, { __title: "Box 2" }],
        settings: [
          {
            input: "text",
            label: "Heading",
            _id: "heading",
            default: "Box"
          },
          {
            input: "image-upload",
            label: "Icon",
            _id: "icon"
          }
        ]
      }
    ];
  }
});

If I now try to create a new page I can choose the template but no settings are visible:

Am I missing something?

Hi @samsour, I think you're missing the 'setting' method from the Factor API

import { setting, stored } from "@factor/api"

then under methods:

methods: { setting }

Like this:

export default Vue.extend({
  computed: {
    post() {
      return stored("post") || {}
    },
    settings(this: any) {
      return this.post.settings || {}
    }
  },
  templateSettings() {
    return [
      {
        input: "text",
        label: "Heading",
        description: "Primary page heading",
        _id: "pageHeading",
        default: "Landing Page Template"
      },
      {
        _id: "boxes",
        input: "sortable",
        label: "Feature Boxes",
        description: "Some feature boxes",
        default: [{ __title: "Box 1" }, { __title: "Box 2" }],
        settings: [
          {
            input: "text",
            label: "Heading",
            _id: "heading",
            default: "Box"
          },
          {
            input: "image-upload",
            label: "Icon",
            _id: "icon"
          }
        ]
      }
    ]
  },
  methods: { setting }
})

Worked on page templates a bit tonight, found a few bugs.

I'll publish changes in the morning after I finish testing.

Perhaps a dependency is missing in my package.json. Just startet this quick demo with only @factor/core installed. I added @factor/plugin-notify to get notifications.
But according to npm the core package @factor/templates is included in the core.

I think I found the issue.

addPageTemplate({
  name: "Landingpage",
  slug: "landing-page",
  component: () => import("./templates/tpl-landingpage.vue")
})

This adds a page template with the slug "slug". This template can be selected in a page by the name "Name". But in the code the template loader searches for a template with the slug "name", can't find anything and uses the default template.

I changed the slug to match the name in kebab-case. Landing Page -> landing-page.
This works. 🎉