Creating Widget for Frontend

  • Hi,


    at the moment i'm trying to create an frontend widget for my extension. For doing so i tried to use the official pagekit docs.

    I must say that the part for widget creating is very very basic stuff. With this informations it's not possible to create a own widget.


    Pagekit Docs


    At the moment i have some Problems to create a customized setup screen for my new widget. I figured out that i have to create a vue-file and register it in the events section of the widget definition as they do it in the user login widget:


    Code
    1. 'events' => [
    2. 'view.scripts' => function ($event, $scripts) use ($app) {
    3. $scripts->register('widget-login2', 'system/user:app/bundle/widget-login.js', ['~widgets', 'input-link']);
    4. }
    5. ],


    I think, the widget-login.vue is responsible for creating the configuration form, right? BUT: I can put all content i want in this file, but it will not appear in the backend widget settings screen. I will always only get an Title field:




    Can somebody explain what to do for setting up an own setup screen?


    Thanks a lot!

  • No unfortunately it's not in Github, but i can send you my code:


    mypackage/index.php



    mypackage/widgets/testwidget.php



    mypackage/app/components/widget-test.vue

  • webpack.config.js



    package.json

  • Ähhhm it's very very basic... xD


  • Hi,


    I had the same problem than LRMiloef with only the Title displayed on the settings window.


    So I downloaded the above Widget.zip file and installed the extension in my website.

    This worked : the Title was replaced by TEST.


    So I have copied the extension in my "vendor" folder : packages/f1evm and I changed 'lrmedien' by 'f1evm' in all files.

    I have then recompiled the vue file with webpack.

    And then it is always the Title wich is displayed ! ;(


    What appened ? Could it be a problem with my installation of webpack ? The files of the two extension seems to be equivalent !


    Thanks if you can help me :)


    TestWidget.zip