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.

2
  • 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
    Commented Sep 14, 2017 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? Commented Sep 14, 2017 at 10:48

1 Answer 1

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!

4
  • 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
    Commented Sep 14, 2017 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!! Commented Sep 14, 2017 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
    Commented Sep 14, 2017 at 11:53
  • No, i didn't use any includes, I will give this a try, Thanks alot! Commented Sep 14, 2017 at 12:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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