How do I display code on thank you page based on filled metafield?

[LittlePaddocks]

Hi all!

I have the following code added to my thank you page using the 'additional scripts' section in checkout settings.

<script>
   Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Delivery message (if applicable)</h2>',
     '<p>{{ order.metafields.custom.message_to_customer }}</p>'
    )
</script>

I wondered if anyone could please offer some advice on how to achieve the following... Display this code on the thankyou page when a metafield is filled. When it is blank, show nothing.

The metafield is a multi-line text type.

Thank you!

[SomeUsernameHe]

Try this: If not, I would have to give you some code to place directly into your theme files:

<script>
  // Check if the metafield has content
  var message = '{{ order.metafields.custom.message_to_customer }}';
  
  if (message.trim() !== '') {
    Shopify.Checkout.OrderStatus.addContentBox(
      '<h2>Delivery message (if applicable)</h2>',
      '<p>' + message + '</p>'
    );
  }
</script>

[LittlePaddocks]

@SomeUsernameHe Thank you for your fast response!

I have just tried that and it removes the section when blank. But doesn't seem to re-appear when content is added.

If you have any more suggestions that would be greatly appreciated.

Thanks

[SomeUsernameHe]

Of course, hopefully, I can be of some help!

Question, the original code worked correctly right? It displayed the message when the metafield was filled in, except when it is blank it still shows "

<h2>Delivery message (if applicable)</h2>

 Just want to make sure I understand your issue. 🙂

[LittlePaddocks]

@SomeUsernameHe it seems to be the other way round actually.

The code hides the section when blank but doesnt show it when it is filled in.