#37308: made improvement backwards compatible with merchants that have overwritten messages.phtml template

Author: erfanimani

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

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

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']
         },
@@ -29,11 +30,15 @@ define([
         initialize: function () {
             this._super().observe(
                 [
-                    'cookieMessages'
+                    'cookieMessagesObservable'
                 ]
             );
 
-            this.cookieMessages(_.unique($.cookieStorage.get('mage-messages'), 'text'));
+            // 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'