Store custom checkout pane data to order

Question

I've created a custom checkout pane according to documentation. When I submit my Order and go to admin page, where all my orders are listed, I can't see this custom pane field there. I've already tried to add $this->order->save(); at the end of submitPaneForm function but that seems to make no difference. I've already created field with machine name "field_test_me" in my Order type and also have added this field to enabled fields on "Manage display" tab, but the field seems to be empty.

Is there anything I'm missing to get my custom pane fields to be displayed on the "Order detail" page, please?

This is how my buildPaneForm function looks like:

public function buildPaneForm(array $pane_form, FormStateInterface $form_state, array &$complete_form)
{
$pane_form['billing_info'] = [
  '#type' => 'fieldset',
  '#title' => $this->t('@title', ['@title' => $this->configuration['title']]),
];

$pane_form['billing_info']['field_test_me'] = [
  '#type' => 'textfield',
  '#title' => 'Test me',
  '#wrapper_attributes' => [
    'class' => ['col-md-6']
  ],
  '#default_value' => 'MY CUSTOM STRING'
];
return $pane_form;

}

And this is how my submitPaneForm function looks like:

public function submitPaneForm(array &$pane_form, FormStateInterface $form_state, array &$complete_form)
{
    $values = $form_state->getValue($pane_form['#parents']);
    $this->order->setData('field_test_me', $values['billing_info']['field_test_me']);
}

I'm using other functions for displaying value on "Review" page, but those are not part of my issue.

Answer 1

I found a solution. With my custom field called "Test me" and machine name "field_test_me" created in my Order Type entity I could save the data from Custom Checkout Pane with $this->order->set() function instead of $this->order->setData(). Of course I needed to change $this->order->getData() to $this->order->get() everywhere where used.

I don't understand what's the difference between set() and setData(), but it seems to store my Custom Checkout Pane values to my custom fields created in my Order type entity.

Answer 2

I'm doing it this way:

public function submitPaneForm(array &$pane_form, FormStateInterface $form_state, &$complete_form) {
     // save the data
    $values = $form_state->getValue($pane_form['#parents']);
    $this->order->setData('send_gift_to_recipient', $values['send_gift_recipient']);
    $this->order->setData('gift_recipient_address', $values['gift_recipient_address']);
    $this->order->save();
}

Then I copied the twig file: commerce-order--admin.html.twig from /modules/contrib/commerce/modules/order/templates into my custom module templates directory (uslhs_checkout_pane/templates).

In my checkout pane module file: uslhs_checkout_pane.module I've added this code to override the Commerce Orders twig file and use mine instead:

/**
 * Implements hook_theme().
 */
function uslhs_checkout_pane_theme($existing, $type, $theme, $path) {
  return [
    'commerce_order__admin' => [
      'base hook' => 'commerce_order',
      'render element' => 'elements',
    ],
  ];
}


function uslhs_checkout_pane_preprocess_commerce_order(array &$variables) {
  $order = $variables['elements']['#commerce_order'];
  $variables['send_gift_to_recipient'] = ($order->getData('send_gift_to_recipient') == 1) ? 'Yes':'No';
  $variables['gift_recipient_address'] = $order->getData('gift_recipient_address');
}

Clear the cache to have it read the new twig file. I had to use Drush to clear it, when I used the Drupal UI my template still wasn't taking effect. But doing a Drush cr did the trick.

And then finally in my twig file I've added these lines:

<div class="gift_details">
    <div><span class="field__label">{{ 'Send gift to recipient'|t}}:</span> <span class="field__item">{{ send_gift_to_recipient }}</span></div>
    <div><span class="field__label">{{ 'Gift recipient address'|t}}:</span> <span class="field__item">{{ gift_recipient_address }}</span></div>
  </div>