web-dev-qa-db-fra.com

Personnaliser le bloc de recherche par défaut

Dans le fichier .theme de mon thème personnalisé Drupal 8, comment puis-je personnaliser le bloc de recherche par défaut afin que je puisse ajouter des classes personnalisées et également modifier l'étiquette d'entrée pour supprimer le mot "recherche" mais au lieu d'avoir une icône de recherche de fontawesome?

À peu près, j'aimerais que le code de sortie final ressemble à ceci:

<div class="infoBar-search">
  <form action="#!" class="searchForm">
    <input type="search" name="sitesearch" placeholder="Search...">
    <input type="submit" class="searchForm-submit fa" value="&#xf002;">
  </form>
</div>

L'approche .theme serait-elle la meilleure façon de procéder? J'ai essayé de modifier quelques fichiers de modèle, mais j'ai remarqué que cela affecterait également les autres formulaires du site.

8blockstheming
3
ACanadianCoder

Je suis sûr que cela peut être fait de manière plus élégante, mais j'ai pu le faire avec une #icon_variable du formulaire [] pour changer la suggestion d'entrée. Je viens d'ajouter le côté que je veux l'icône sur le bouton et une option supplémentaire pour ...- icon-class.html.twig etc.

1) Ajoutez une suggestion à l'entrée

function MODULE_theme_suggestions_input_alter(array &$suggestions, array $variables, $hook) {

   if (isset($variables['element']['#icon']) || isset($variables['element']['#icon-left']) || isset($variables['element']['#icon-right'])) {
         $suggestions[] = 'input__submit_icon';
         if (isset($variables['element']['#icon'])) {
           $suggestions[] = 'input__submit_icon_' . $variables['element']['#icon'];
         }
      }
   }

Ensuite, je peux ajouter/modifier cela sur le formulaire:

   $form['actions']['submit']['#icon-left'] = 'icon-class';

Avec un modèle comme input__submit_icon.html.twig:

<button {{ attributes }} >
    {% if element['#icon-left'] %}
        <i class="{{ element['#icon-left'] }}"></i>
    {% endif %}
    {{ attributes.value }}
    {% if element['#icon-right'] %}
        <i class="{{ element['#icon-right'] }}"></i>
    {% endif %}
</button>
2
Dylan

Utilisez d'abord le bloc de recherche de drupal 8, puis remplacez le formulaire de recherche par la fonction hook_form_alter. Puis rendez enfin ce bloc dans le fichier modèle.

Remplacez d'abord ce fichier twig dans votre modèle de thème personnalisé. Block - search-form-block.html.twig div class="infoBar-search"> {{ title_prefix }} {% if label %} {{ label }} {% endif %} {{ title_suffix }} {% block content %} {{ content }} {% endblock %} /div>

Corrigez la balise div. Ensuite, utilisez hook_form_alter dans le fichier .theme pour modifier ce que vous voulez modifier.

function hook_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) { if ($form_id == 'search_block_form') { $form['#attributes']['class'][] = 'searchForm'; $form['keys']['#attributes']['placeholder'] = t('Search...'); $form['actions']['submit']['#attributes']['class'][] = '"searchForm-submit fa'; }

1
Deepak modi