Hey,
I am currently creating a new site. I want to integrate a contactform that is availiable on all pages. For that I created new plugin with the intention to make it as versatile as possible (e.g supporting oAuth is currently a bit of a pain…).
However I created a plugin with the help of the docs but when I visit the Panel my site is always renderd as a complete site and not as a “sub” of the panel itself… What am I doing wrong?
I run npm run dev in the site/plugins/kirby-contactform folder and restart the dev server in the root directory of the project php -S localhost:8000 kirby/router.php.
The name of the plugin is kirby-contactform - The Code below is a mix from the doc examples (since I wanted a MVP Version to get an idea what I need todo)
plugins/kirby-contactform/index.php
<?php
@include_once __DIR__ . '/vendor/autoload.php';
@include_once __DIR__ . '/src/ContactController.php';
use j54j6\contactForm\ContactFormController;
Kirby::plugin('j54j6/contactform', [
'options' => [
'recipient' => 'physio.gerdes@web.de',
'subject' => 'Neue Terminanfrage',
'sender' => 'physio.gerdes@web.de',
'copy_to_inquirer' => true
],
'api' => [
'routes' => [
[
'pattern' => 'contact/submit',
'method' => 'POST',
'action' => function () {
$controller = new ContactController();
return $controller->handle();
},
'auth' => false,
]
]
],
'snippets' => [
'contactform' => __DIR__ . '/snippets/contactform.php'
],
'translations' => [
'de' => [
'j54j6.contact-form.title' => 'Kontaktformular'
],
'en' => [
'j54j6.contact-form.title' => 'Contact Form'
]
],
'areas' => [
'settings' => function ($kirby) {
return [
'label' => [
'de' => "Kontaktformular",
'en' => "Contact Form"
],
'icon' => 'email',
'menu' => true,
'link' => 'contactform_settings',
'views' => [
[
'pattern' => 'contactform_settings',
'action' => function () {
$apikey = 'your API key';
return [
// the Vue component can be defined in the
// `index.js` of your plugin
'component' => 'contactform',
// the document title for the current view
'title' => 'contact form',
// props are directly available in the Vue components
// play around with setting the props to something else, e.g. use cardlets instead of cards etc.
'props' => [
'reviews' => $apikey,
'size' => 'small',
'layout' => 'cards',
],
];
}
]
]
];
}
]
]);
plugins/kirby-contactform/src/index.js
import ContactForm from "./components/contactform_settings.vue";
panel.plugin("j54j6/contactform", {
components: {
contactform: ContactForm,
},
});
plugins/kirby-contactform/src/components/contactform_settings.vue
<template>
<k-inside>
<k-view class="k-contactform-view">
<k-header>Contact Form</k-header>
</k-view>
</k-inside>
</template>
<script>
export default {
props: {
layout: String,
reviews: String,
size: String,
},
};
</script>
The attached photo is the result I get. But I want it to be shown inside the panel as a “part of it” just like the system or users page is part of the panel.
Oh and as a side: I can set the Menu Item Name language based but not the Tab name. If I add an array to the “title” of the view, it seems like the array is passed as the tab name… Don’t know if that is per design…
Can someone tell me what I need todo that the settingspage is embedded like all the other areas (e.g the users, system or lab area)?
Thanks a lot 
