Widgets

Create widgets to render small chunks of content in different positions of your site.

To determine where a widget's content will be rendered, the admin panel has a Widgets section to publish widgets in specific positions that are defined by the theme. Extensions and themes can both come with widgets, with no difference in development.

Define widget positions

You can define any number of widget positions in your theme's index.php.

  1. 'positions' => [
  2.  
  3.     'sidebar' => 'Sidebar',
  4.     'footer' => 'Footer',
  5.  
  6. ],

Render Widgets

To render anything published inside a widget position, you can use the View renderer instance available from your theme's views/template.php file.

  1. <?php if ($view->position()->exists('sidebar')) : ?>
  2.     <?= $view->position('sidebar') ?>
  3. <?php endif; ?>

Register a new widget type

To register a new widget type, you can make use of the widgets property in your index.php file.

  1. 'widgets' => [
  2.  
  3.     'widgets/hellowidget.php'
  4.  
  5. ],

Define a new widget type

Internally, a widget in Pagekit is a module. It is therefore defined by a module definition: A PHP array with a certain set of properties.

widgets/hellowidget.php:

  1. <?php
  2.  
  3. return [
  4.  
  5.     'name' => 'hello/hellowidget',
  6.  
  7.     'label' => 'Hello Widget',
  8.  
  9.     'events' => [
  10.  
  11.         'view.scripts' => function ($event, $scripts) use ($app) {
  12.             $scripts->register('widget-hellowidget', 'hello:js/widget.js', ['~widgets']);
  13.         }
  14.  
  15.     ],
  16.  
  17.     'render' => function ($widget) use ($app) {
  18.  
  19.         // ...
  20.  
  21.         return $app->view('hello/widget.php');
  22.     }
  23.  
  24. ];

This example requires the following two files to render the widget in the frontend, a JavaScript file and a PHP file.

js/widget.js:

  1. window.Widgets.components['system-login:settings'] = {
  2.  
  3.     section: {
  4.         label: 'Settings'
  5.     },
  6.  
  7.     template: '<div>Your form markup here</div>',
  8.  
  9.     props: ['widget', 'config', 'form']
  10.  
  11. };

views/widget.php:

  1. <p>Hello Widget output.</p>

Note A good example of a full Widget is located at app/system/modules/user/widgets/login.php in the Pagekit core.