Panel Plugin: Text with Livepreview field

Kirby 3 Solved ✅
1

Dear fellows :nerd_face: I need help with a (hopefully) simple live preview field in the panel.
What i want is you can see on my mockup i designed below.

I have already started something, but i have no clue how to make it work. Im more a html/css guy and not much into js.

Any help would be much appreciated :innocent:

panelplugin
panelplugin1517×685 78.1 KB

Here is my current setup.

Folder is “/site/plugins/livepreview/”

index.php

Kirby::plugin('slg/livepreview', [
    'fields' => [
        'livepreview' => [
        ]
    ],
    'js' => [
        'index.js'
    ],
    'styles' => [
        'index.css'
    ]
]);

index.js

panel.plugin("slg/livepreview", {
  fields: {
    livepreview: {
      computed: {
        previewValue() {
          return this.$parent.value;
        },
      },
      template: `<div class="k-text">Live Preview: {{ previewValue }}</div>`,
    },
  },
});

index.css

.k-text {
  background-color: #ffd4d4;
  padding:10px;
}

blueprint

fields:
  text1:
    label: Text 1
    type: text
  preview1:
    type: livepreview
    value: "{{ page.feld1 }}"
2

I think it would help if you first studied how to pass option/props to fields, for example with this recipe: My first Panel field | Kirby CMS

This is superflous

Then the next step would be to look into how to get values from the $store, from where you get the values that haven’t been saved yet.

3

When I tell you I don’t even have npm installed you will laugh :wink: Im a oldschool dev from the good old days. When the build things (and for my feeling complex setups nowadays) in webdev started i was out. haha.

But anyway, thanks for the tip :slight_smile:
I got it working with this:

panel.plugin("slg/livepreview", {
  fields: {
    livepreview: {
      computed: {
        previewValue() {
          return this.$store.getters["content/values"]().text1;
        },
      },
      template: `<div class="k-text">Live Preview: {{ previewValue }}</div>`,
    },
  },
});
4

Well, life is an endless learning path in every respect.

1 Like
5

Any tip how to get a value from site here in the panel plugin without api? :slight_smile:

6

Do you mean in a page context? No, I don’t think so, not without an API call.

7

hmm okay, i have setup my api route in config and panel plugin , then i get a 403 auth feedback. did not find in the docs something to setup an auth request for a panel plugin. is there maybe something like an api key i can define? is nothing secure i want to call from here. just 2 variables from site.

another idea would be to bring the site value into the page context via a hidden field and then get it via the props. maybe this is easier? but did not find a solution for it :frowning:

8

It would help if you post your code, an api call from a panel plugin doesn’t need authentication, other context but see api call in this preview: Block factory: Creating your own blocks collection | Kirby CMS

It also helps if you post your code

If you just need the site title or so, you could even pass it via your field props, instead of a hidden field.

9

its so hard to understand the context of how to do make something work in the plugins - e.g. get values from site in page context in the plugin.

i have some sort of settings and different texts in the the site defined. so in my site.txt are two fields where i need the value from in my panel plugin. is it possible to get the “site” page via the /api/pages/ ?

10

No, api/site, not api/page, site is not a page: Site | Kirby CMS

11

Thanks for your patience Sonja :slight_smile:

But no luck, console is still throwing a 403. This is my current script:

panel.plugin("slg/livepreview", {
  fields: {
    livepreview: {
      data() {
        return {
          myDescription: "",
        };
      },
      computed: {
        myPreview() {
          return this.$store.getters["content/values"]().text1;
        },
      },
      mounted() {
        fetch("/api/site")
          .then((response) => response.json())
          .then((data) => {
            this.myDescription = data.content["meta_description"];
          })
          .catch((error) => {
            console.error("Fehler:", error);
          });
      },

      template: `
        <div> {{ myPreview }} x {{ myDescription }} </div>
      `,
    },
  },
});
12 
  mounted() {
        this.$api.get('site').then(site => {
          console.log(site);
        })
          .catch((error) => {
            console.error("Fehler:", error);
          });
      },
1 Like
13

FINALLY i got it working. and only with your help :slight_smile:
thx in advance (again). where is the “buy you a coffee” button? :wink:

14

I’m a member of the Kirby team, providing official support in this forum.

1 Like
15

okay, where is the “buy the team a few coffees” button? :wink:

16

Nowhere, but we sell licenses!

17

I already have two, and more to come :slight_smile:
And the team should consider something like a coffee button :wink:

18

@slgdev If you need more than a preview for a single text field, you can try the new Kirby Live Preview plugin that let’s you preview the whole page (with unsaved changes!) right in the Panel: Live Preview – Kirby Tools