Fix issue product name render wrong with special characters

update update update update up up up update up Update default.html fix getProductNameUnsanitizedHtml is not defined up
magento · Sep 15, 2020 · 9df9db2 · 9df9db2
1 parent b9c13fd
commit 9df9db2
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_sidebar_item_renderers.xml b/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_sidebar_item_renderers.xml
@@ -21,7 +21,7 @@
                             </item>
                             <item name="children" xsi:type="array">
                                 <item name="item.renderer" xsi:type="array">
-                                    <item name="component" xsi:type="string">uiComponent</item>
+                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/cart-item-renderer</item>
                                     <item name="config" xsi:type="array">
                                         <item name="displayArea" xsi:type="string">defaultRenderer</item>
                                         <item name="template" xsi:type="string">Magento_Checkout/minicart/item/default</item>

diff --git a/app/code/Magento/Checkout/view/frontend/web/js/view/cart-item-renderer.js b/app/code/Magento/Checkout/view/frontend/web/js/view/cart-item-renderer.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'uiComponent'
+], function (Component) {
+    'use strict';
+
+    return Component.extend({
+        /**
+         * Prepare the product name value to be rendered as HTML
+         *
+         * @param {String} productName
+         * @return {String}
+         */
+        getProductNameUnsanitizedHtml: function (productName) {
+            // product name has already escaped on backend
+            return productName;
+        },
+
+        /**
+         * Prepare the given option value to be rendered as HTML
+         *
+         * @param {String} optionValue
+         * @return {String}
+         */
+        getOptionValueUnsanitizedHtml: function (optionValue) {
+            // option value has already escaped on backend
+            return optionValue;
+        }
+    });
+});
diff --git a/app/code/Magento/Checkout/view/frontend/web/template/minicart/item/default.html b/app/code/Magento/Checkout/view/frontend/web/template/minicart/item/default.html
@@ -24,10 +24,10 @@
         <div class="product-item-details">
             <strong class="product-item-name">
                 <!-- ko if: product_has_url -->
-                <a data-bind="attr: {href: product_url}, html: product_name"></a>
+                <a data-bind="attr: {href: product_url}, html: $parent.getProductNameUnsanitizedHtml(product_name)"></a>
                 <!-- /ko -->
                 <!-- ko ifnot: product_has_url -->
-                    <!-- ko text: product_name --><!-- /ko -->
+                    <span data-bind="html: $parent.getProductNameUnsanitizedHtml(product_name)"></span>
                 <!-- /ko -->
             </strong>
 
@@ -42,10 +42,10 @@
                         <dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
                         <dd class="values">
                             <!-- ko if: Array.isArray(option.value) -->
-                                <span data-bind="html: option.value.join('<br>')"></span>
+                                <span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value.join('<br/>'))"></span>
                             <!-- /ko -->
                             <!-- ko if: (!Array.isArray(option.value) && ['file', 'html'].includes(option.option_type)) -->
-                                <span data-bind="html: option.value"></span>
+                                <span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value)"></span>
                             <!-- /ko -->
                             <!-- ko if: (!Array.isArray(option.value) && !['file', 'html'].includes(option.option_type)) -->
                             <span data-bind="text: option.value"></span>