Four years ago we built the checkout system in #2689549: Implement the initial checkout structure. At that time moving everything into templates was seen as a usability improvement and gave greater flexibility for controlling output. So we did not make the checkout completion message customizable – end-users could put the template into their theme and control the output as needed. This bypassed the lack of Token availability as well.

We should add the ability to make the message customizable through the interface and embedded in the pane template.

We can roughly add it this way.

    $pane_form['message'] = [
      '#theme' => 'commerce_checkout_completion_message',
      '#order_entity' => $this->order,
      '#message' => $this->configuration['message'],
    ];

<div class="checkout-complete">
  {{ message }}

  {% if payment_instructions %}
    <div class="checkout-complete__payment-instructions">
      <h2>{{ 'Payment instructions'|t }}</h2>
      {{ payment_instructions }}
    </div>
  {% endif %}
</div>

We'll need to update the default configuration to maintain the following:

  {{ 'Your order number is @number.'|t({'@number': order_entity.getOrderNumber}) }} <br>
  {{ 'You can view your order on your account page when logged in.'|t }} <br>

That means we'll need to figure out token support upfront. We should also support text filters.

CommentFileSizeAuthor
#21 order_complete_result.JPG21 KBcanardesign
#21 complete_message-edit_form.JPG61.22 KBcanardesign
#14 3155132-13.patch9.95 KBmglaman
#11 Completation message.png156.03 KBsumi
#9 3155132-9.patch8.56 KBmglaman
#7 3155132-7.patch7.67 KBmglaman
#5 allow_customizing_th-3155132-5.patch5.32 KBmglaman
#5 Screen Shot 2020-06-26 at 11.20.48 AM.png57.28 KBmglaman
#4 Screen Shot 2020-06-26 at 10.50.08 AM.png37.69 KBmglaman

Issue fork commerce-3155132

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mglaman created an issue. See original summary.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

There's a problem with this. We don't allow translating checkout flow configuration, so making this a configuration form value prevents it from being translatable.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

Okay, I forgot that all configuration is translatable. However, this means sites which did not extend the template might lose translations if we moved it from Twig to the configurable message. So this backward compatibility problem needs to be reviewed.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
StatusFileSize
new Screen Shot 2020-06-26 at 10.50.08 AM.png37.69 KB

When translating checkout flows you can only translate the label, none of the pane configurations.

We'll probably have to copy what bojanz did for product attributes:

function commerce_product_config_translation_info_alter(&$info) {
  $info['commerce_product_attribute']['class'] = '\Drupal\commerce_product\ConfigTranslation\ProductAttributeMapper';
}

Where \Drupal\commerce_product\ConfigTranslation\ProductAttributeMapper provides the overridden config edit forms.

Digging into it more, the schema gets built into a form by \Drupal\config_translation\FormElement\ListElement::getTranslationBuild.

We could also get the following schema to return an instance of \Drupal\Core\TypedData\TraversableTypedDataInterface and expose all translatable config in a details element.

    configuration:
      type: commerce_checkout.commerce_checkout_flow.plugin.[%parent.plugin]

EDIT: I'm wrong, I think it will show up. We just need to define the config schema.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Status: Active » Needs review
Issue tags: +Needs tests
StatusFileSize
new Screen Shot 2020-06-26 at 11.20.48 AM.png57.28 KB
new allow_customizing_th-3155132-5.patch5.32 KB

🥳 translation works, posting a patch for regression testing.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

I began to write this but realize there is no way to alter the message to link to the order for the customer.

This feature is cool, but kind of useless without #3156489: Provide an `admin-url` token for orders.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Issue tags: -Needs tests
StatusFileSize
new 3155132-7.patch7.67 KB

Here is at least a test. It is going to at least fail as it assumes [commerce_order:url] is the customer URL.

Status: Needs review » Needs work

The last submitted patch, 7: 3155132-7.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Status: Needs work » Needs review
StatusFileSize
new 3155132-9.patch8.56 KB

🤦‍♂️ It's definitely failing and was definitely passing earlier because I forgot to patch the template change.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

Fixed the phpcs error: https://git.drupalcode.org/issue/commerce-3155132/-/commit/e9b8a359ac738...

sumi’s picture

sumi commented
Status: Needs review » Needs work
StatusFileSize
new Completation message.png156.03 KB

Tested and on backend it works as expected. All available text formats on the site are available on the field, text entered into the field is translatable through configuration translation.

When using any text format that supports html, html tags are printed as text on the frontend. In my example I just put part of the text into H2 and rest of it was in p tag.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Assigned: Unassigned » mglaman
Issue tags: +Needs tests

Good find, @Sumi! We should test that the filter format is respected and HTML is allowed.

mglaman opened merge request !2

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Assigned: mglaman » Unassigned
Status: Needs work » Needs review
Issue tags: -Needs tests
StatusFileSize
new 3155132-13.patch9.95 KB

The problem was that I passed the message value directly to Twig, which autoescaped the value 🤦‍♂️. Fixed: https://git.drupalcode.org/issue/commerce-3155132/-/commit/18c329b4c653e...

Using the processed_text element in a a render array has fixed the HTML rendering. I updated the test to reflect it as well.

sumi’s picture

sumi commented
Status: Needs review » Reviewed & tested by the community

Tested and it is working as expected.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

Thanks @Sumi for testing!

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Status: Reviewed & tested by the community » Fixed

Committed, 🥳

  • mglaman committed e49a82e on 8.x-2.x 
    Issue #3155132 by mglaman, Sumi: Allow customizing the checkout...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

canardesign’s picture

canardesign commented

Hi ! sorry to reopen, but it is not working for me.
I edited the completion message through UI
But on /checkout/[order_id]/complete page I get the default message, even after clearing caches.
What am I missing ?

canardesign’s picture

canardesign commented
StatusFileSize
new complete_message-edit_form.JPG61.22 KB
new order_complete_result.JPG21 KB
4kant’s picture

4kant commented

same as #21 here.
commerce 8.x-2.30 (no dev)

sakonn’s picture

sakonn commented

I am also facing the issue to translate it through admin interface.
When I copy the configuration manually into yml files and import it the complete message is translated.

sketman’s picture

sketman commented

The same problem here. I alter the checkout completion message in UI but nothing gets changed on the site.
Am I missing something? Some guidance would be highly appreciated...

My apologies, the issue is solved by copying the template file into my theme´s folder