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. 🎉

I just tried to add a page template, but still got it not working with the approaches above. I am using the latest build.

Tried adding the setting method (which is not in the tutorial) as suggested by @raymond. The slug / name trick by @samsour also didn't work.

In the console I get the error TypeError: theComponent.default.options is undefined from main.js line 1767.
Here's the relevant code part:

const getTemplateFields = async (tpl) => {
    const theComponent = await tpl.component();
    const { default: { options: { templateSettings }, }, } = theComponent;
    return templateSettings ? templateSettings() : [];
};

Am I causing this error or is that a bug?

Did you reference the docs? The template settings API was changed a few versions ago.

Yeah, i checked the these pages

• https://factor.dev/docs/page-templates
• https://factor.dev/docs/template-settings

I also checked existing code here

• https://github.com/fiction-com/factor/blob/development/%40themes/theme-ultra/src/index.ts
• https://github.com/fiction-com/factor/blob/development/%40themes/theme-ultra/src/page-template-default.vue

I actually just copied from these resources, but somehow Factor still can't find the component as the error states.

Ya i'm a little confused about what you're trying to accomplish. You're trying to pull the settings out of a component for use somewhere?

No, my problem is, when I add a page template in the index.ts with addPageTemplate the defined settings do not show up (just "No settings available for selected template.") when editing a page and selecting the added page template via the dashboard

When I check the console, the mentioned error is listed, which refers to https://github.com/fiction-com/factor/blob/development/%40factor/templates/index.ts#L25

Did this problem get fixed with the pull request that was added?

Yes, with the pull request, the settings do show up.