Create components to create small pieces of content in different locations of your site.
To determine where to create the content of a widget, the admin panel has a components section to publish the widget at specific locations defined by the theme. Extensions and themes can come with components with no difference in development.
You can define any number of widget locations in your theme's index.php
.
'positions' => [
'sidebar' => 'Sidebar',
'footer' => 'Footer',
],
To create anything published in a component location, you can use the view creator instance in your theme's views/template.php
file.
<?php if ($view->position()->exists('sidebar')) : ?>
<?= $view->position('sidebar') ?>
<?php endif; ?>
To register a new component type, you can use the widgets
feature in your index.php
file.
'widgets' => [
'widgets/hellowidget.php'
],
widgets/hellowidget.php
:
Internally, the component in Greencheap is a module. Therefore, a module is defined by its definition: A PHP array with a specific set of properties.
widgets/hellowidget.php
:
<?php
return [
'name' => 'hello/hellowidget',
'label' => 'Hello Widget',
'events' => [
'view.scripts' => function ($event, $scripts) use ($app) {
$scripts->register('widget-hellowidget', 'hello:js/widget.js', ['~widgets']);
}
],
'render' => function ($widget) use ($app) {
// ...
return $app->view('hello/widget.php');
}
];
For this example, create the component on the front end of the following two files, requires a JavaScript file and a PHP file.
Js / widget.js
:
module.exports = {
section: {
label: 'Settings'
},
props: ['widget', 'config', 'form'],
inject: ['$components'],
replace: false,
created(){
_.extend(this.$options.components, this.$components);
}
}
window.Widgets.components['hello-hellowidget.settings'] = module.exports
views/widget.php
:
<p> Hello component output. </p>
Note A good example for a complete component, Greencheap is located in the app/system/modules/user/widgets/login.php
location in the grasshopper.
We'll let you know about new announcements, publications and everything else on our social media accounts.
Contact us directly at support@greencheap.net
♥ GreenCheap is developed with love and caffeine.