How to modify Inputfield Markup?

[bernhard]

Every Inputfield consists of this markup:

<li class="Inputfield">
  <label class="InputfieldHeader"></label>
  <div class="InputfieldContent ..."></div>
</li>

I want to inject some code either at the top or at the bottom:

Hooking Inputfield::render does only let me modify the inner markup of InputfieldContent.

Am I missing any hooks or other magic? ? 

 

[Robin S]

1 hour ago, bernhard said:

Every Inputfield consists of this markup:

<li class="Inputfield">
  <label class="InputfieldHeader"></label>
  <div class="InputfieldContent ..."></div>
</li>

This markup actually belongs to InputfieldWrapper rather than individual inputfield renders.

There is the InputfieldWrapper::setMarkup method that you can use to customise the markup that is rendered by InputfieldWrapper. See the defaultMarkup property as a starting point for what can be customised:

/**
 * Markup used during the render() method - customize with InputfieldWrapper::setMarkup($array)
 *
 */
static protected $defaultMarkup = array(
	'list' => "<ul {attrs}>{out}</ul>",
	'item' => "<li {attrs}>{out}</li>", 
	'item_label' => "<label class='InputfieldHeader ui-widget-header{class}' for='{for}'>{out}</label>",
	'item_label_hidden' => "<label class='InputfieldHeader InputfieldHeaderHidden ui-widget-header{class}'><span>{out}</span></label>",
	'item_content' => "<div class='InputfieldContent ui-widget-content{class}'>{out}</div>", 
	'item_error' => "<p class='InputfieldError ui-state-error'><i class='fa fa-fw fa-flash'></i><span>{out}</span></p>",
	'item_description' => "<p class='description'>{out}</p>", 
	'item_head' => "<h2>{out}</h2>", 
	'item_notes' => "<p class='notes'>{out}</p>",
	'item_detail' => "<p class='detail'>{out}</p>", 
	'item_icon' => "<i class='fa fa-fw fa-{name}'></i> ",
	'item_toggle' => "<i class='toggle-icon fa fa-fw fa-angle-down' data-to='fa-angle-down fa-angle-right'></i>", 
	// ALSO: 
	// InputfieldAnything => array( any of the properties above to override on a per-Inputifeld basis)
	);

But this applies to the whole InputfieldWrapper. In terms of making it more targeted you can set markup for individual inputfield types by using the inputfield class name as a key:

$wrapper->setMarkup([
	'InputfieldText' => [
		'item' => '<li {attrs}><p>Markup before</p>{out}<p>Markup after</p></li>',
	],
]);

But you can't target individual inputfields by name or something like that.

LoginRegisterPro has a similar setMarkup() method but has the added feature of letting you use "name=some_inputfield_name" as a key: https://processwire.com/store/login-register-pro/docs/#customizing-markup-and-or-class-attributes-html

It would be cool if a feature like that was added to the core InputfieldWrapper::setMarkup method.

[PWaddict]

I'm using this hook to customize markup and classes on a form but it affects all forms in ProcessWire. How can I apply this to specific template only???

$wire->addHookBefore('InputfieldWrapper::render', function($event) {

    if($this->wire('page')->template != "checkout") return; // EDIT: Added solution

    $wrapper = $event->object;

    $defaultMarkup = array(
      'list' => "<div {attrs}>{out}</div>",
      // etc...
    );

    $defaultClasses = array(
      'form' => 'uk-form',
  	  // etc...
    );

    $wrapper->setMarkup($defaultMarkup);
    $wrapper->setClasses($defaultClasses);

});

EDIT: Sorry, I forgot that I can use $this->wire('page').