Merge remote-tracking branch '37309/fix-for-issue-37308' into comm_voted_v3

Author: engcom-Charlie

app/code/Magento/Theme/view/frontend/templates/messages.phtml

@@ -5,8 +5,10 @@
  */
 ?>
 <div data-bind="scope: 'messages'">
-    <!-- ko if: cookieMessages && cookieMessages.length > 0 -->
-    <div aria-atomic="true" role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
+    <!-- ko if: cookieMessagesObservable() && cookieMessagesObservable().length > 0 -->
+    <div aria-atomic="true" role="alert" class="messages" data-bind="foreach: {
+        data: cookieMessagesObservable(), as: 'message'
+    }">
         <div data-bind="attr: {
             class: 'message-' + message.type + ' ' + message.type + ' message',
             'data-ui-id': 'message-' + message.type

app/code/Magento/Theme/view/frontend/web/js/view/messages.js

@@ -19,6 +19,7 @@ define([
     return Component.extend({
         defaults: {
             cookieMessages: [],
+            cookieMessagesObservable: [],
             messages: [],
             allowedTags: ['div', 'span', 'b', 'strong', 'i', 'em', 'u', 'a']
         },
@@ -27,9 +28,18 @@ define([
          * Extends Component object by storage observable messages.
          */
         initialize: function () {
-            this._super();
+            this._super().observe(
+                [
+                    'cookieMessagesObservable'
+                ]
+            );
 
+            // The "cookieMessages" variable is not used anymore. It exists for backward compatibility; to support
+            // merchants who have overwritten "messages.phtml" which would still point to cookieMessages instead of the
+            // observable variant (also see https://github.com/magento/magento2/pull/37309).
             this.cookieMessages = _.unique($.cookieStorage.get('mage-messages'), 'text');
+            this.cookieMessagesObservable(this.cookieMessages);
+
             this.messages = customerData.get('messages').extend({
                 disposableCustomerData: 'messages'
             });