0

I need to change the generated html (twig) of the search API module ( https://www.drupal.org/project/search_api ). The Module generates a form having 2 divs with input tag in each of them. I need it to be a form with one div having an input tag and an anchor tag!


What the module generates (in short)

<form>
 <div>
  <input>
 </div>
 <div>
  <input "submit-btn">
 </div> 
</form>

What I want it to be

<form>
 <div>
  <input>
  <a "submit-btn"><img></a>
 </div> 
</form>

So basically, I need to be able to change the submit button to an image so I can place by "position:absolute" at the end of the first input field.

The search API module doesn't have the templates folder or any .twig files than I can overwrite. AND if I do overwrite the base theme form twig files that are used by the module, I cannot do it so that it changes only for this module and it doesn't change all other forms.

I am using drupal 8 btw.

  • It uses the core form API so you can override core form field templates as required. Also you can't submit a form with an anchor (without javascript), you might have meant an html image input instead I guess – Clive Sep 14 '17 at 10:10
  • Can I overwrite the core form API without affecting any other forms on the website? -- What do you mean by an HTML image input? -- Also, how can I overwrite without affecting the functionalities of the form? – Bassem Mohamed Sep 14 '17 at 10:48
0

I finally got around to do this using the MYTHEME.THEME file, I used this function:

function nestle_theme_suggestions_input_alter(&$suggestions, array $variables) {
  $element = $variables['element'];
  if ($element['#id'] == 'edit-submit-search-content') {
    $suggestions[] = 'input__' . $element['#type'] . '__' . 'mainsearch';
  }
}  

Basically, it gets the element by its ID then changes its twig suggestion to kinda force twig to ditch the normal method of choosing the twig template based on naming conventions, Instead, it gives it a twig template to use!

| improve this answer | |
  • I had a similar issue earlier in the year and wrote about it here as to how to have some flexibility with granular overrides without affecting entire form elements kevinquillen.com/drupal/2017/01/28/… – Kevin Sep 14 '17 at 11:45
  • This is the article actually which I followed, but for some reason, the second function wasn't working for me ( Always end up with unexpected error ) even if it was empty! What I did was passing the attributes directly to the first function Anyway, thanks very much for the article!! – Bassem Mohamed Sep 14 '17 at 11:52
  • Did you include the use statement for FormStateInterface at the top of the theme file? You have to do that in order to refer to a class directly without using its full namespace. – Kevin Sep 14 '17 at 11:53
  • No, i didn't use any includes, I will give this a try, Thanks alot! – Bassem Mohamed Sep 14 '17 at 12:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.