См. основной материал для введения.
В имплементации блока требуется сформировать набор переменных и передать его в шаблон.
Шаблон был ранее объявлен в основном файле модуля, исходя из макета.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * Implements hook_theme(). */ function custom_blocks_theme($existing, $type, $theme, $path) { return [ 'search_form_for_goods' => [ 'variables' => [ 'title' => NULL, 'subtitle' => NULL, 'product_search_form' => NULL], ], ]; } |
В макете присутствуют две надписи (title и subtitle), а также форма. Форму я создал на базе Drupal\Core\Form\FormBase.
/src/Plugin/Block/SearchGoodsBlock.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?php namespace Drupal\custom_blocks\Plugin\Block; use Drupal\Core\Access\AccessResult; use Drupal\Core\Block\BlockBase; use Drupal\Core\Session\AccountInterface; /** * Provides a block : Search Goods Form. * * @Block( * id = "search_goods_block", * admin_label = @Translation("Search Goods Form Block"), * category = @Translation("Custom blocks"), * ) */ class SearchGoodsBlock extends BlockBase { /** * {@block} */ public function build() { $config = $this->getConfiguration(); // вызов билдрера формы $form = \Drupal::formBuilder() ->getForm('Drupal\custom_blocks\Form\ProductSearch'); // вернем шаблон и его переменные return [ '#theme' => 'search_form_for_goods', '#title' => $config['title'], '#subtitle' => $config['subtitle'], '#parent_categ' => $config['parent_categ'], '#product_search_form' => $form, ]; } /** * {@block} */ protected function blockAccess(AccountInterface $account) { return AccessResult::allowedIfHasPermission($account, 'access content'); } } |
Для общей картины приведу и код шаблона.
Здесь вы увидите подключение библиотеки, которую я объявлял ранее в модуле.
/templates/search-form-for-goods.html.twig
|
1 2 3 4 5 6 7 8 9 10 |
{{ attach_library('custom_blocks/product-search-autocomplete') }} <div class="block__search-products"> <div class="text-wrapper"> <span>{{ title|t }}</span><br /> {{ subtitle|t }} </div> <div class="search-wrapper"> {{ product_search_form }} </div> </div> |
Код JS библиотеки.
/libs/product-search-autocomplete.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/** * @file * Attach autocomplete action. */ (function ($, Drupal) { Drupal.behaviors.product_search_autocomplete = { attach: function (context, settings) { $('.block__search-products input[type="text"]:not(.processed)').each( (_, elem) => { $(elem).addClass('processed').on('autocompleteselect', (e, ui) => { setTimeout(() => { $(e.target).val(ui.item.label); window.location.href = ui.item.value;}, 0) return false; }); } ); } }; })(jQuery, Drupal); |