Component by ukyo (@trk)

Module help you to create and use set of components to utilise in your ProcessWire page templates.

Component Module for ProcessWire CMS/CMF

Module will check :

  • site/modules/**/components/*/templates/template.php
  • site/templates/components/*/templates/template.php

directories for the components. If you want to use default params create a component.php file in Component root dir.

Template Components

└── site/templates/components
    └── name-of-component
        ├── component.php (not required)
        └── templates
            └── template.php (required)

Module Components

└── site/modules/name-of-module/components
    └── name-of-component
        ├── component.php (not required)
        └── templates
            └── template.php (required)

Requirements


  • ProcessWire 3.0 or newer
  • PHP 8.1 or newer

Installation


Install the module from the modules directory

Via Composer:

composer require trk/component

Via git clone:

cd your-processwire-project-folder/
cd site/modules/
git clone https://github.com/trk/Component.git

Create heading Component Config File not required

// site/templates/components/heading/component.php
<?php

namespace ProcessWire;

return [
    // Set default params
    'params' => [
        'content' => '',
        'tag' => 'h1',
        'size' => '',
        'decoration' => '',
        'transform' => '',
        'color' => '',
        'align' => ''
    ],
    // cache the output
    'cache' => function (array $component): array {
        $params = $component['params'];

        $name = null;
        $expire = null;

        if (isset($params['page']) && $params['page'] instanceof Page) {
            $name = $params['page']->id;
            $expire = $params['page'];
        }

        return [
            'name' => $page->id,
            'expire' => $expire
        ];
    },
    'transform' => function (array $params): array {
        // do something with params
        return $params;
    },
    // 'attrs' => [
    //     // add more attrs
    // ],
    'attrs' => function (array $attrs): array {
        // do something with attrs
        return $attrs;
    },
    'fn' => [
        // add hello method to TemplateFile and use it like $this->hello(); in template
        'hello' => function (HookEvent $e) {
            $e->return = 'Hello World';
        }
    ],
    // Check component has required parameters
    'render' => function(array $params): bool {
        return strlen($params['content']) ?: false;
    },
    // Do something with output
    // 'output' => function(string $output): bool {
    //     return str_replace('<alert />', component('alert', ['content' => 'Warning !']), $output);
    // }
];

Create heading Template File required

// site/templates/components/heading/templates/template.php
<?php

namespace ProcessWire;

/**
 * @var array $params
 * @var array $attrs
 */

if ($params['size']) {
    $attrs['class'][] = "uk-{$params['size']}";
}

if ($params['decoration']) {
    $attrs['class'][] = "uk-{$params['decoration']}";
}

if ($params['transform']) {
    $attrs['class'][] = "uk-text-{$params['transform']}";
}

if ($params['color']) {
    $attrs['class'][] = "uk-text-{$params['transform']}";
}

if ($params['align']) {
    $attrs['class'][] = "uk-text-{$params['align']}";
}

// $this->hello(); added dynamically as function
// $this->attrs(array $attrs); Accept array of attributes, return is string

echo "<{$params['tag']}{$this->attrs($attrs)}>{$params['content']}</{$params['tag']}>";

Print heading Component

echo component('heading', [
    'content' => 'Hello World !',
]);

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Latest news

  • ProcessWire Weekly #517
    In the 517th issue of ProcessWire Weekly we'll check out the latest core updates, introduce a new third party module called Reactions, and more. Read on!
    Weekly.pw / 6 April 2024
  • ProFields Table Field with Actions support
    This week we have some updates for the ProFields table field (FieldtypeTable). These updates are primarily focused on adding new tools for the editor to facilitate input and management of content in a table field.
    Blog / 12 April 2024
  • Subscribe to weekly ProcessWire news

“Yesterday I sent the client a short documentation for their ProcessWire-powered website. Today all features already used with no questions. #cmsdoneright—Marc Hinse, Web designer/developer