Decode HTML Knockout JS - Minicart
I use HTML Code inside Custom Options. The Radio Option titles are for example
<p class="style1">Option1</p>
This way I can style my custom options in css, instead just plain text.
Minicart does not render the html, it just shows the html code above.
The code below comes from : U see Knockout js is parsing with html but it still returns text. I need the option.value to be decoded so it displays rendered html. I tried JavaScript solutions and it didn't work.
public_html/vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<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>
<!-- /ko -->
<!-- ko ifnot: Array.isArray(option.value) -->
<span data-bind="html: option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
magento2 magento-2.1 magento2.2 knockoutjs
edited yesterday
Abhishek Panchal
3,4133929
asked yesterday
FancymanFancyman
137313
add a comment |
I use HTML Code inside Custom Options. The Radio Option titles are for example
<p class="style1">Option1</p>
This way I can style my custom options in css, instead just plain text.
Minicart does not render the html, it just shows the html code above.
The code below comes from : U see Knockout js is parsing with html but it still returns text. I need the option.value to be decoded so it displays rendered html. I tried JavaScript solutions and it didn't work.
public_html/vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<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>
<!-- /ko -->
<!-- ko ifnot: Array.isArray(option.value) -->
<span data-bind="html: option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
magento2 magento-2.1 magento2.2 knockoutjs
edited yesterday
Abhishek Panchal
3,4133929
asked yesterday
FancymanFancyman
137313
add a comment |
I use HTML Code inside Custom Options. The Radio Option titles are for example
<p class="style1">Option1</p>
This way I can style my custom options in css, instead just plain text.
Minicart does not render the html, it just shows the html code above.
The code below comes from : U see Knockout js is parsing with html but it still returns text. I need the option.value to be decoded so it displays rendered html. I tried JavaScript solutions and it didn't work.
public_html/vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<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>
<!-- /ko -->
<!-- ko ifnot: Array.isArray(option.value) -->
<span data-bind="html: option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
magento2 magento-2.1 magento2.2 knockoutjs
edited yesterday
Abhishek Panchal
3,4133929
asked yesterday
FancymanFancyman
137313
I use HTML Code inside Custom Options. The Radio Option titles are for example
<p class="style1">Option1</p>
This way I can style my custom options in css, instead just plain text.
Minicart does not render the html, it just shows the html code above.
The code below comes from : U see Knockout js is parsing with html but it still returns text. I need the option.value to be decoded so it displays rendered html. I tried JavaScript solutions and it didn't work.
public_html/vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<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>
<!-- /ko -->
<!-- ko ifnot: Array.isArray(option.value) -->
<span data-bind="html: option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
magento2 magento-2.1 magento2.2 knockoutjs
magento2 magento-2.1 magento2.2 knockoutjs
edited yesterday
Abhishek Panchal
3,4133929
asked yesterday
FancymanFancyman
137313
edited yesterday
Abhishek Panchal
3,4133929
asked yesterday
FancymanFancyman
137313
edited yesterday
Abhishek Panchal
3,4133929
edited yesterday
Abhishek Panchal
3,4133929
edited yesterday
Abhishek Panchal
3,4133929
3,4133929
asked yesterday
FancymanFancyman
137313
asked yesterday
FancymanFancyman
137313
asked yesterday
FancymanFancyman
137313
137313
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f257001%2fdecode-html-knockout-js-minicart%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f257001%2fdecode-html-knockout-js-minicart%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
