Adding custom fields
The choice fields are filterable with the filter mkl_pc_choice_default_settings.
Here’s an example:
/**
* Filters the choice settings (fields)
*
* @param array $fields
* @return array
*/
function myprefix_add_choice_custom_fields( $fields ) {
// Add a field to the general section
if ( isset( $fields['_general'] ) ) {
$fields['_general']['fields']['my_new_field_id'] = array(
'label' => __( 'A new text field', 'mydomain' ),
'type' => 'text',
'priority' => 130,
'attributes' => array(
'placeholder' => __('A placeholder', 'mydomain'),
),
);
}
// Add fields to a new section
$fields['_my_section'] = array(
'id' => 'my_section',
'label' => __( 'My new fields section' ),
'priority' => 40,
'fields' => [
'my_new_text_field_id' => array(
'label' => __( 'A new text field', 'mydomain' ),
'type' => 'text',
'priority' => 10,
'attributes' => array(
'placeholder' => __('A placeholder', 'mydomain'),
),
),
'my_other_new_text_field_id' => array(
'label' => __( 'An other new text field', 'mydomain' ),
'type' => 'text',
'priority' => 20,
'attributes' => array(
'placeholder' => __('A placeholder', 'mydomain'),
),
)
]
);
$fields['_my_section']['fields']['my_new_number_field_id'] = array(
'label' => __( 'A new number field', 'mydomain' ),
'type' => 'number',
'priority' => 20,
'attributes' => array(
'placeholder' => __('A placeholder', 'mydomain'),
),
);
return $fields;
}
add_filter( 'mkl_pc_choice_default_settings', 'myprefix_add_choice_custom_fields', 30 );
Which will output:
Conditional display
You can display fields conditionally, using the condition parameter.
E.g. 'condition' => '"simple" == data.layer_type':
$fields['_general']['fields']['my_new_field_id'] = array(
'label' => __( 'A new text field', 'mydomain' ),
'type' => 'text',
'priority' => 130,
'attributes' => array(
'placeholder' => __('A placeholder', 'mydomain'),
),
'condition' => '"simple" == data.layer_type', // Only show this on simple layers
);Available field types
- text
- number
- textarea
- checkbox
- select
- html
Options for a select are defined in the parameter choices, by an array with value/label pairs:
array(
'label' => __( 'Extra Price type', 'mkl-pc-extra-price' ),
'type' => 'select',
'priority' => 31,
'choices' => [
[
'value' => 'amount',
'label' => __( 'Fixed amount', 'mkl-pc-extra-price' ),
],
[
'value' => 'percentage',
'label' => __( "Percentage of the product's price", 'mkl-pc-extra-price' ),
],
],
);Using custom fields in the front end
The custom data will be available in the choice models, so you will be able to use it in the templates.
As an example, let’s add a delivery information field:
add_filter( 'mkl_pc_choice_default_settings', 'myprefix_add_choice_custom_fields', 30 );
/**
* Filters the choice settings (fields)
*
* @param array $fields
* @return array
*/
function myprefix_add_choice_custom_fields( $fields ) {
// Add a field to the general section
if ( isset( $fields['_general'] ) ) {
$fields['_general']['fields']['delivery_info'] = array(
'label' => __( 'Delivery information', 'mydomain' ),
'type' => 'text',
'priority' => 130,
);
}
return $fields;
}Let’s add a value to a choice:
Next, we need to display this information in the choice on the frontend:
function myprefix_add_delievery_info_to_choices() { ?>
<# if ( data.delivery_info ) { #>
<span class="delivery-info">{{data.delivery_info}}</span>
<# } #>
<?php }
add_action( 'tmpl-pc-configurator-choice-item--after', 'myprefix_add_delievery_info_to_choices' );
Which will give this:
Note that in this example, we are using the hook tmpl-pc-configurator-choice-item--after, which outputs the text after the button. So adequate styling will be required in order to have a decent display.
If we change the display mode to dropdown and add a bit of CSS:
