How to add custom text block in onpage check-out The 2019 Stack Overflow Developer Survey Results Are InMagento 2 Add text in checkout page via XMLHow to check if in checkout if custom module installed?How to add a custom and dynamic block during onepage checkout?How to move Magento Coupon Block from the Cart page to the one page checkoutHow can you add a content block to magento onepage checkout?Add custom field in onepage check out,order,invoice,salesHow to add text block in magento 2 custom moduleHow to add custom content to block layout render by jslayoutHow add div after image block in Magento 2?Magento 2 : Change Comment of Onepage Checkout Email AddressMagento2 - Add Custom fields block after shipping method

How to type a long/em dash `—`

Is it ethical to upload a automatically generated paper to a non peer-reviewed site as part of a larger research?

If my opponent casts Ultimate Price on my Phantasmal Bear, can I save it by casting Snap or Curfew?

Can withdrawing asylum be illegal?

What could be the right powersource for 15 seconds lifespan disposable giant chainsaw?

How to translate "being like"?

Is it a good practice to use a static variable in a Test Class and use that in the actual class instead of Test.isRunningTest()?

Star Trek - X-shaped Item on Regula/Orbital Office Starbases

If a sorcerer casts the Banishment spell on a PC while in Avernus, does the PC return to their home plane?

Can a flute soloist sit?

Deal with toxic manager when you can't quit

Is it safe to harvest rainwater that fell on solar panels?

Why couldn't they take pictures of a closer black hole?

Button changing its text & action. Good or terrible?

Accepted by European university, rejected by all American ones I applied to? Possible reasons?

Why was M87 targeted for the Event Horizon Telescope instead of Sagittarius A*?

Mathematics of imaging the black hole

Keeping a retro style to sci-fi spaceships?

For what reasons would an animal species NOT cross a *horizontal* land bridge?

What is this business jet?

Why are there uneven bright areas in this photo of black hole?

How come people say “Would of”?

Did any laptop computers have a built-in 5 1/4 inch floppy drive?

Why doesn't shell automatically fix "useless use of cat"?



How to add custom text block in onpage check-out



The 2019 Stack Overflow Developer Survey Results Are InMagento 2 Add text in checkout page via XMLHow to check if in checkout if custom module installed?How to add a custom and dynamic block during onepage checkout?How to move Magento Coupon Block from the Cart page to the one page checkoutHow can you add a content block to magento onepage checkout?Add custom field in onepage check out,order,invoice,salesHow to add text block in magento 2 custom moduleHow to add custom content to block layout render by jslayoutHow add div after image block in Magento 2?Magento 2 : Change Comment of Onepage Checkout Email AddressMagento2 - Add Custom fields block after shipping method



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








2















I want to add custom text block in onepage checkout in #payment page. That block will use to remind the "discount code" to customer, it's like popup text.



Please check the sample image.



enter image description here










share|improve this question
























  • explain position via screenshot and what do you mean by popup text ?

    – Hassan Ali Shahzad
    yesterday











  • See this : magento.stackexchange.com/questions/208702/…

    – KernelPanic
    yesterday











  • yes @ Hassan....

    – mohana
    yesterday











  • Hi @kernel, I like to display like popup text

    – mohana
    yesterday











  • Please check my updated question.

    – mohana
    yesterday

















2















I want to add custom text block in onepage checkout in #payment page. That block will use to remind the "discount code" to customer, it's like popup text.



Please check the sample image.



enter image description here










share|improve this question
























  • explain position via screenshot and what do you mean by popup text ?

    – Hassan Ali Shahzad
    yesterday











  • See this : magento.stackexchange.com/questions/208702/…

    – KernelPanic
    yesterday











  • yes @ Hassan....

    – mohana
    yesterday











  • Hi @kernel, I like to display like popup text

    – mohana
    yesterday











  • Please check my updated question.

    – mohana
    yesterday













2












2








2








I want to add custom text block in onepage checkout in #payment page. That block will use to remind the "discount code" to customer, it's like popup text.



Please check the sample image.



enter image description here










share|improve this question
















I want to add custom text block in onepage checkout in #payment page. That block will use to remind the "discount code" to customer, it's like popup text.



Please check the sample image.



enter image description here







magento2 onepage-checkout






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited yesterday







mohana

















asked yesterday









mohanamohana

10210




10210












  • explain position via screenshot and what do you mean by popup text ?

    – Hassan Ali Shahzad
    yesterday











  • See this : magento.stackexchange.com/questions/208702/…

    – KernelPanic
    yesterday











  • yes @ Hassan....

    – mohana
    yesterday











  • Hi @kernel, I like to display like popup text

    – mohana
    yesterday











  • Please check my updated question.

    – mohana
    yesterday

















  • explain position via screenshot and what do you mean by popup text ?

    – Hassan Ali Shahzad
    yesterday











  • See this : magento.stackexchange.com/questions/208702/…

    – KernelPanic
    yesterday











  • yes @ Hassan....

    – mohana
    yesterday











  • Hi @kernel, I like to display like popup text

    – mohana
    yesterday











  • Please check my updated question.

    – mohana
    yesterday
















explain position via screenshot and what do you mean by popup text ?

– Hassan Ali Shahzad
yesterday





explain position via screenshot and what do you mean by popup text ?

– Hassan Ali Shahzad
yesterday













See this : magento.stackexchange.com/questions/208702/…

– KernelPanic
yesterday





See this : magento.stackexchange.com/questions/208702/…

– KernelPanic
yesterday













yes @ Hassan....

– mohana
yesterday





yes @ Hassan....

– mohana
yesterday













Hi @kernel, I like to display like popup text

– mohana
yesterday





Hi @kernel, I like to display like popup text

– mohana
yesterday













Please check my updated question.

– mohana
yesterday





Please check my updated question.

– mohana
yesterday










1 Answer
1






active

oldest

votes


















3














Try following way to use magento default popup modal:




app/code/SR/MagentoCommunity/view/frontend/layout/checkout_index_index.xml




<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="beforeMethods" xsi:type="array">
<item name="children" xsi:type="array">
<item name="custom_block" xsi:type="array">
<item name="component" xsi:type="string">SR_MagentoCommunity/js/view/custom-block</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>



app/code/SR/MagentoCommunity/view/frontend/web/js/view/custom-block.js




define([
'jquery',
'ko',
'uiComponent',
'Magento_Ui/js/modal/modal',
'Magento_Checkout/js/view/payment',
'mage/translate'
], function ($, ko, Component, modal, payment, $t)
'use strict';

return Component.extend(
defaults:
template: 'SR_MagentoCommunity/custom-block'
,
options:
popupModalContent: '#sr-discount-popup'
,
shouldShowMessage: ko.observable(false),
initialize: function ()
this._super();
var self = this;
var subscription = payment.prototype.isVisible.subscribe(function(value)
if (value)
var popupModalContent = self.options.popupModalContent;
var modalOption =
type: 'popup',
responsive: true,
title: 'Test Title',
buttons: [],
closed: function ()
self.shouldShowMessage(false);

;
self.shouldShowMessage(true);
$(popupModalContent).modal(modalOption);
$(popupModalContent).trigger('openModal');
subscription.dispose();

);
return this;
,
getMessage: function ()
return $t("Don't forget to use discount code");

);
);



app/code/SR/MagentoCommunity/view/frontend/web/template/custom-block.html




<div id="sr-discount-popup" data-bind="visible:shouldShowMessage">
<span data-bind="text: getMessage()"></span>
</div>





share|improve this answer























  • Thank you. @ Sohel

    – mohana
    yesterday











  • Please let me know, how to add image instead of text.

    – mohana
    yesterday






  • 1





    Pass image from php checkout config and added that image in html

    – Sohel Rana
    yesterday











  • Yeah got it thank you

    – mohana
    yesterday











  • @mohana do you manage that?

    – Sohel Rana
    yesterday











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
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f269457%2fhow-to-add-custom-text-block-in-onpage-check-out%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









3














Try following way to use magento default popup modal:




app/code/SR/MagentoCommunity/view/frontend/layout/checkout_index_index.xml




<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="beforeMethods" xsi:type="array">
<item name="children" xsi:type="array">
<item name="custom_block" xsi:type="array">
<item name="component" xsi:type="string">SR_MagentoCommunity/js/view/custom-block</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>



app/code/SR/MagentoCommunity/view/frontend/web/js/view/custom-block.js




define([
'jquery',
'ko',
'uiComponent',
'Magento_Ui/js/modal/modal',
'Magento_Checkout/js/view/payment',
'mage/translate'
], function ($, ko, Component, modal, payment, $t)
'use strict';

return Component.extend(
defaults:
template: 'SR_MagentoCommunity/custom-block'
,
options:
popupModalContent: '#sr-discount-popup'
,
shouldShowMessage: ko.observable(false),
initialize: function ()
this._super();
var self = this;
var subscription = payment.prototype.isVisible.subscribe(function(value)
if (value)
var popupModalContent = self.options.popupModalContent;
var modalOption =
type: 'popup',
responsive: true,
title: 'Test Title',
buttons: [],
closed: function ()
self.shouldShowMessage(false);

;
self.shouldShowMessage(true);
$(popupModalContent).modal(modalOption);
$(popupModalContent).trigger('openModal');
subscription.dispose();

);
return this;
,
getMessage: function ()
return $t("Don't forget to use discount code");

);
);



app/code/SR/MagentoCommunity/view/frontend/web/template/custom-block.html




<div id="sr-discount-popup" data-bind="visible:shouldShowMessage">
<span data-bind="text: getMessage()"></span>
</div>





share|improve this answer























  • Thank you. @ Sohel

    – mohana
    yesterday











  • Please let me know, how to add image instead of text.

    – mohana
    yesterday






  • 1





    Pass image from php checkout config and added that image in html

    – Sohel Rana
    yesterday











  • Yeah got it thank you

    – mohana
    yesterday











  • @mohana do you manage that?

    – Sohel Rana
    yesterday















3














Try following way to use magento default popup modal:




app/code/SR/MagentoCommunity/view/frontend/layout/checkout_index_index.xml




<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="beforeMethods" xsi:type="array">
<item name="children" xsi:type="array">
<item name="custom_block" xsi:type="array">
<item name="component" xsi:type="string">SR_MagentoCommunity/js/view/custom-block</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>



app/code/SR/MagentoCommunity/view/frontend/web/js/view/custom-block.js




define([
'jquery',
'ko',
'uiComponent',
'Magento_Ui/js/modal/modal',
'Magento_Checkout/js/view/payment',
'mage/translate'
], function ($, ko, Component, modal, payment, $t)
'use strict';

return Component.extend(
defaults:
template: 'SR_MagentoCommunity/custom-block'
,
options:
popupModalContent: '#sr-discount-popup'
,
shouldShowMessage: ko.observable(false),
initialize: function ()
this._super();
var self = this;
var subscription = payment.prototype.isVisible.subscribe(function(value)
if (value)
var popupModalContent = self.options.popupModalContent;
var modalOption =
type: 'popup',
responsive: true,
title: 'Test Title',
buttons: [],
closed: function ()
self.shouldShowMessage(false);

;
self.shouldShowMessage(true);
$(popupModalContent).modal(modalOption);
$(popupModalContent).trigger('openModal');
subscription.dispose();

);
return this;
,
getMessage: function ()
return $t("Don't forget to use discount code");

);
);



app/code/SR/MagentoCommunity/view/frontend/web/template/custom-block.html




<div id="sr-discount-popup" data-bind="visible:shouldShowMessage">
<span data-bind="text: getMessage()"></span>
</div>





share|improve this answer























  • Thank you. @ Sohel

    – mohana
    yesterday











  • Please let me know, how to add image instead of text.

    – mohana
    yesterday






  • 1





    Pass image from php checkout config and added that image in html

    – Sohel Rana
    yesterday











  • Yeah got it thank you

    – mohana
    yesterday











  • @mohana do you manage that?

    – Sohel Rana
    yesterday













3












3








3







Try following way to use magento default popup modal:




app/code/SR/MagentoCommunity/view/frontend/layout/checkout_index_index.xml




<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="beforeMethods" xsi:type="array">
<item name="children" xsi:type="array">
<item name="custom_block" xsi:type="array">
<item name="component" xsi:type="string">SR_MagentoCommunity/js/view/custom-block</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>



app/code/SR/MagentoCommunity/view/frontend/web/js/view/custom-block.js




define([
'jquery',
'ko',
'uiComponent',
'Magento_Ui/js/modal/modal',
'Magento_Checkout/js/view/payment',
'mage/translate'
], function ($, ko, Component, modal, payment, $t)
'use strict';

return Component.extend(
defaults:
template: 'SR_MagentoCommunity/custom-block'
,
options:
popupModalContent: '#sr-discount-popup'
,
shouldShowMessage: ko.observable(false),
initialize: function ()
this._super();
var self = this;
var subscription = payment.prototype.isVisible.subscribe(function(value)
if (value)
var popupModalContent = self.options.popupModalContent;
var modalOption =
type: 'popup',
responsive: true,
title: 'Test Title',
buttons: [],
closed: function ()
self.shouldShowMessage(false);

;
self.shouldShowMessage(true);
$(popupModalContent).modal(modalOption);
$(popupModalContent).trigger('openModal');
subscription.dispose();

);
return this;
,
getMessage: function ()
return $t("Don't forget to use discount code");

);
);



app/code/SR/MagentoCommunity/view/frontend/web/template/custom-block.html




<div id="sr-discount-popup" data-bind="visible:shouldShowMessage">
<span data-bind="text: getMessage()"></span>
</div>





share|improve this answer













Try following way to use magento default popup modal:




app/code/SR/MagentoCommunity/view/frontend/layout/checkout_index_index.xml




<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="beforeMethods" xsi:type="array">
<item name="children" xsi:type="array">
<item name="custom_block" xsi:type="array">
<item name="component" xsi:type="string">SR_MagentoCommunity/js/view/custom-block</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>



app/code/SR/MagentoCommunity/view/frontend/web/js/view/custom-block.js




define([
'jquery',
'ko',
'uiComponent',
'Magento_Ui/js/modal/modal',
'Magento_Checkout/js/view/payment',
'mage/translate'
], function ($, ko, Component, modal, payment, $t)
'use strict';

return Component.extend(
defaults:
template: 'SR_MagentoCommunity/custom-block'
,
options:
popupModalContent: '#sr-discount-popup'
,
shouldShowMessage: ko.observable(false),
initialize: function ()
this._super();
var self = this;
var subscription = payment.prototype.isVisible.subscribe(function(value)
if (value)
var popupModalContent = self.options.popupModalContent;
var modalOption =
type: 'popup',
responsive: true,
title: 'Test Title',
buttons: [],
closed: function ()
self.shouldShowMessage(false);

;
self.shouldShowMessage(true);
$(popupModalContent).modal(modalOption);
$(popupModalContent).trigger('openModal');
subscription.dispose();

);
return this;
,
getMessage: function ()
return $t("Don't forget to use discount code");

);
);



app/code/SR/MagentoCommunity/view/frontend/web/template/custom-block.html




<div id="sr-discount-popup" data-bind="visible:shouldShowMessage">
<span data-bind="text: getMessage()"></span>
</div>






share|improve this answer












share|improve this answer



share|improve this answer










answered yesterday









Sohel RanaSohel Rana

23.2k34461




23.2k34461












  • Thank you. @ Sohel

    – mohana
    yesterday











  • Please let me know, how to add image instead of text.

    – mohana
    yesterday






  • 1





    Pass image from php checkout config and added that image in html

    – Sohel Rana
    yesterday











  • Yeah got it thank you

    – mohana
    yesterday











  • @mohana do you manage that?

    – Sohel Rana
    yesterday

















  • Thank you. @ Sohel

    – mohana
    yesterday











  • Please let me know, how to add image instead of text.

    – mohana
    yesterday






  • 1





    Pass image from php checkout config and added that image in html

    – Sohel Rana
    yesterday











  • Yeah got it thank you

    – mohana
    yesterday











  • @mohana do you manage that?

    – Sohel Rana
    yesterday
















Thank you. @ Sohel

– mohana
yesterday





Thank you. @ Sohel

– mohana
yesterday













Please let me know, how to add image instead of text.

– mohana
yesterday





Please let me know, how to add image instead of text.

– mohana
yesterday




1




1





Pass image from php checkout config and added that image in html

– Sohel Rana
yesterday





Pass image from php checkout config and added that image in html

– Sohel Rana
yesterday













Yeah got it thank you

– mohana
yesterday





Yeah got it thank you

– mohana
yesterday













@mohana do you manage that?

– Sohel Rana
yesterday





@mohana do you manage that?

– Sohel Rana
yesterday

















draft saved

draft discarded
















































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.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f269457%2fhow-to-add-custom-text-block-in-onpage-check-out%23new-answer', 'question_page');

);

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







Popular posts from this blog

Category:9 (number) SubcategoriesMedia in category "9 (number)"Navigation menuUpload mediaGND ID: 4485639-8Library of Congress authority ID: sh85091979ReasonatorScholiaStatistics

Circuit construction for execution of conditional statements using least significant bitHow are two different registers being used as “control”?How exactly is the stated composite state of the two registers being produced using the $R_zz$ controlled rotations?Efficiently performing controlled rotations in HHLWould this quantum algorithm implementation work?How to prepare a superposed states of odd integers from $1$ to $sqrtN$?Why is this implementation of the order finding algorithm not working?Circuit construction for Hamiltonian simulationHow can I invert the least significant bit of a certain term of a superposed state?Implementing an oracleImplementing a controlled sum operation

Magento 2 “No Payment Methods” in Admin New OrderHow to integrate Paypal Express Checkout with the Magento APIMagento 1.5 - Sales > Order > edit order and shipping methods disappearAuto Invoice Check/Money Order Payment methodAdd more simple payment methods?Shipping methods not showingWhat should I do to change payment methods if changing the configuration has no effects?1.9 - No Payment Methods showing upMy Payment Methods not Showing for downloadable/virtual product when checkout?Magento2 API to access internal payment methodHow to call an existing payment methods in the registration form?