Magento 2 - How to add Extra Checkout Step after Review & Payments Section with Place Order Button Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?Missing “place order” button at step 5 after upgrade to Magento 1.9.1.0Magento 2 - Add step on checkoutMagento 2 - add a new step adding new form in checkout processesWhere is defined the Place Order button in default checkout payment step section?Magento2 : Extra Checkout Step after Review & Payments Section with Place Order ButtonHow to move “Place Order” button from “Review & Payments” to custom step in Magento 2 checkout?Unable to add form in magento 2 custom checkout stepGo to next step after submitting custom form in Magento 2 checkoutUncaught TypeError: Cannot read property 'top' of undefined at step-navigator.jsMagento 2.3 place the order button below payment methods
Co-worker works way more than he should
What is this word supposed to be?
Second order approximation of the loss function (Deep learning book, 7.33)
Is this homebrew racial feat, Stonehide, balanced?
Seek and ye shall find
Who is Alexandra K. Trenfor? Did she say the quote?
Suing a Police Officer Instead of the Police Department
Implementing 3DES algorithm in Java: is my code secure?
I preordered a game on my Xbox while on the home screen of my friend's account. Which of us owns the game?
Mistake in years of experience in resume?
Is Diceware more secure than a long passphrase?
Does Feeblemind produce an ongoing magical effect that can be dispelled?
What is a 'Key' in computer science?
How long after the last departure shall the airport stay open for an emergency return?
Additive group of local rings
Trumpet valves, lengths, and pitch
Are these square matrices always diagonalisable?
Is Electric Central Heating worth it if using Solar Panels?
Multiple fireplaces in an apartment building?
My admission is revoked after accepting the admission offer
What units are pgfphysicalheight and pgfphysicalwidth defined in?
Why does the Cisco show run command not show the full version, while the show version command does?
What to do with someone that cheated their way through university and a PhD program?
How to translate "red flag" into Spanish?
Magento 2 - How to add Extra Checkout Step after Review & Payments Section with Place Order Button
Announcing the arrival of Valued Associate #679: Cesar Manara
Unicorn Meta Zoo #1: Why another podcast?Missing “place order” button at step 5 after upgrade to Magento 1.9.1.0Magento 2 - Add step on checkoutMagento 2 - add a new step adding new form in checkout processesWhere is defined the Place Order button in default checkout payment step section?Magento2 : Extra Checkout Step after Review & Payments Section with Place Order ButtonHow to move “Place Order” button from “Review & Payments” to custom step in Magento 2 checkout?Unable to add form in magento 2 custom checkout stepGo to next step after submitting custom form in Magento 2 checkoutUncaught TypeError: Cannot read property 'top' of undefined at step-navigator.jsMagento 2.3 place the order button below payment methods
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I am trying to add an additional checkout step after "review & payments" section. The requirement is to split the payment and review as a separate steps. Once the after the payment method is selected, it should navigate to the Final step "review" where all the order information has to be shown with "place order" button.
so far i have added custom step after payment step, by following the link below.
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html
But the Problem here is the "Place Order" Button is binded with the Payment Step, I need to move the place order button to the Last Step.
Any Help Most Appreciated!!
magento2 onepage-checkout
edited Jul 28 '18 at 7:03
Rohit Kundale
2,90711327
asked Jun 25 '16 at 15:31
rameshpushparajrameshpushparaj
443
bumped to the homepage by Community♦ 5 hours ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
I am trying to add an additional checkout step after "review & payments" section. The requirement is to split the payment and review as a separate steps. Once the after the payment method is selected, it should navigate to the Final step "review" where all the order information has to be shown with "place order" button.
so far i have added custom step after payment step, by following the link below.
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html
But the Problem here is the "Place Order" Button is binded with the Payment Step, I need to move the place order button to the Last Step.
Any Help Most Appreciated!!
magento2 onepage-checkout
edited Jul 28 '18 at 7:03
Rohit Kundale
2,90711327
asked Jun 25 '16 at 15:31
rameshpushparajrameshpushparaj
443
bumped to the homepage by Community♦ 5 hours ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
have you managed to add a step at last after payment?
– Ravi Bhalodia
Jan 7 '17 at 6:05
@rameshpushparaj Have you done this?
– Arshad Hussain
Apr 3 '17 at 11:12
Same problem here, some solution?
– Diego Queiroz
May 29 '18 at 12:16
A alternative to this is adding a order summary to the success step. The place order button is binded to the payment step because it would be a problem if a customer pays and then doesn't finish the order, then the payment wouldn't belong to any order.
– Sanne
Jul 24 '18 at 8:41
add a comment |
I am trying to add an additional checkout step after "review & payments" section. The requirement is to split the payment and review as a separate steps. Once the after the payment method is selected, it should navigate to the Final step "review" where all the order information has to be shown with "place order" button.
so far i have added custom step after payment step, by following the link below.
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html
But the Problem here is the "Place Order" Button is binded with the Payment Step, I need to move the place order button to the Last Step.
Any Help Most Appreciated!!
magento2 onepage-checkout
edited Jul 28 '18 at 7:03
Rohit Kundale
2,90711327
asked Jun 25 '16 at 15:31
rameshpushparajrameshpushparaj
443
I am trying to add an additional checkout step after "review & payments" section. The requirement is to split the payment and review as a separate steps. Once the after the payment method is selected, it should navigate to the Final step "review" where all the order information has to be shown with "place order" button.
so far i have added custom step after payment step, by following the link below.
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html
But the Problem here is the "Place Order" Button is binded with the Payment Step, I need to move the place order button to the Last Step.
Any Help Most Appreciated!!
magento2 onepage-checkout
magento2 onepage-checkout
edited Jul 28 '18 at 7:03
Rohit Kundale
2,90711327
asked Jun 25 '16 at 15:31
rameshpushparajrameshpushparaj
443
edited Jul 28 '18 at 7:03
Rohit Kundale
2,90711327
asked Jun 25 '16 at 15:31
rameshpushparajrameshpushparaj
443
edited Jul 28 '18 at 7:03
Rohit Kundale
2,90711327
edited Jul 28 '18 at 7:03
Rohit Kundale
2,90711327
edited Jul 28 '18 at 7:03
Rohit Kundale
2,90711327
2,90711327
asked Jun 25 '16 at 15:31
rameshpushparajrameshpushparaj
443
asked Jun 25 '16 at 15:31
rameshpushparajrameshpushparaj
443
asked Jun 25 '16 at 15:31
rameshpushparajrameshpushparaj
443
443
bumped to the homepage by Community♦ 5 hours ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 5 hours ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
have you managed to add a step at last after payment?
– Ravi Bhalodia
Jan 7 '17 at 6:05
@rameshpushparaj Have you done this?
– Arshad Hussain
Apr 3 '17 at 11:12
Same problem here, some solution?
– Diego Queiroz
May 29 '18 at 12:16
A alternative to this is adding a order summary to the success step. The place order button is binded to the payment step because it would be a problem if a customer pays and then doesn't finish the order, then the payment wouldn't belong to any order.
– Sanne
Jul 24 '18 at 8:41
add a comment |
have you managed to add a step at last after payment?
– Ravi Bhalodia
Jan 7 '17 at 6:05
@rameshpushparaj Have you done this?
– Arshad Hussain
Apr 3 '17 at 11:12
Same problem here, some solution?
– Diego Queiroz
May 29 '18 at 12:16
A alternative to this is adding a order summary to the success step. The place order button is binded to the payment step because it would be a problem if a customer pays and then doesn't finish the order, then the payment wouldn't belong to any order.
– Sanne
Jul 24 '18 at 8:41
have you managed to add a step at last after payment?
– Ravi Bhalodia
Jan 7 '17 at 6:05
have you managed to add a step at last after payment?
– Ravi Bhalodia
Jan 7 '17 at 6:05
@rameshpushparaj Have you done this?
– Arshad Hussain
Apr 3 '17 at 11:12
@rameshpushparaj Have you done this?
– Arshad Hussain
Apr 3 '17 at 11:12
Same problem here, some solution?
– Diego Queiroz
May 29 '18 at 12:16
Same problem here, some solution?
– Diego Queiroz
May 29 '18 at 12:16
A alternative to this is adding a order summary to the success step. The place order button is binded to the payment step because it would be a problem if a customer pays and then doesn't finish the order, then the payment wouldn't belong to any order.
– Sanne
Jul 24 '18 at 8:41
A alternative to this is adding a order summary to the success step. The place order button is binded to the payment step because it would be a problem if a customer pays and then doesn't finish the order, then the payment wouldn't belong to any order.
– Sanne
Jul 24 '18 at 8:41
add a comment |
1 Answer
1
active
oldest
votes
Below i have add some step. please follow step
1.Create your checkout_index_index.xml file in layout folder
app/code/VendorName/PlaceOrder/view/frontend/layout
<?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">
<head>
<css src="VendorName_PlaceOrder::css/place_order_button.css"/>
</head>
<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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/newstep</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_PlaceOrder/newstep</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
2.Create a file newstep.html in template
app/code/VendorName/PlaceOrder/view/frontend/web/template
<div class="opc-block-newstep" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order newstep'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
<button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
<span>Place Order</span>
</button>
</div>
<!-- /ko -->
- Create a file newstep.js in the path
app/code/VendorName/PlaceOrder/view/frontend/web/js/view
define(
[
'jquery',
'ko',
'Magento_Checkout/js/view/newstep',
'Magento_Checkout/js/model/step-navigator',
],
function(
$,
ko,
Component,
stepNavigator
)
'use strict';
return Component.extend(
isVisible: function ()
return stepNavigator.isProcessed('shipping');
,
initialize: function ()
$(function()
$('body').on("click", '#place-order-trigger', function ()
$(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
);
);
var self = this;
this._super();
);
);
4.For Add terms & condition checkbox in checkout_index_index.xml :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="children" xsi:type="array">
<item name="agreements" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
<item name="sortOrder" xsi:type="string">100</item>
<item name="displayArea" xsi:type="string">before-place-order</item>
<item name="dataScope" xsi:type="string">checkoutAgreements</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
<item name="agreements-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
answered Jul 30 '18 at 4:29
ShorabhShorabh
508314
The place_order_button.css file is missing in this answer
– Vignesh Bala
Feb 21 at 7:15
add a comment |
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%2f122813%2fmagento-2-how-to-add-extra-checkout-step-after-review-payments-section-with%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
Below i have add some step. please follow step
1.Create your checkout_index_index.xml file in layout folder
app/code/VendorName/PlaceOrder/view/frontend/layout
<?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">
<head>
<css src="VendorName_PlaceOrder::css/place_order_button.css"/>
</head>
<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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/newstep</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_PlaceOrder/newstep</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
2.Create a file newstep.html in template
app/code/VendorName/PlaceOrder/view/frontend/web/template
<div class="opc-block-newstep" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order newstep'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
<button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
<span>Place Order</span>
</button>
</div>
<!-- /ko -->
- Create a file newstep.js in the path
app/code/VendorName/PlaceOrder/view/frontend/web/js/view
define(
[
'jquery',
'ko',
'Magento_Checkout/js/view/newstep',
'Magento_Checkout/js/model/step-navigator',
],
function(
$,
ko,
Component,
stepNavigator
)
'use strict';
return Component.extend(
isVisible: function ()
return stepNavigator.isProcessed('shipping');
,
initialize: function ()
$(function()
$('body').on("click", '#place-order-trigger', function ()
$(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
);
);
var self = this;
this._super();
);
);
4.For Add terms & condition checkbox in checkout_index_index.xml :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="children" xsi:type="array">
<item name="agreements" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
<item name="sortOrder" xsi:type="string">100</item>
<item name="displayArea" xsi:type="string">before-place-order</item>
<item name="dataScope" xsi:type="string">checkoutAgreements</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
<item name="agreements-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
answered Jul 30 '18 at 4:29
ShorabhShorabh
508314
The place_order_button.css file is missing in this answer
– Vignesh Bala
Feb 21 at 7:15
add a comment |
Below i have add some step. please follow step
1.Create your checkout_index_index.xml file in layout folder
app/code/VendorName/PlaceOrder/view/frontend/layout
<?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">
<head>
<css src="VendorName_PlaceOrder::css/place_order_button.css"/>
</head>
<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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/newstep</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_PlaceOrder/newstep</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
2.Create a file newstep.html in template
app/code/VendorName/PlaceOrder/view/frontend/web/template
<div class="opc-block-newstep" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order newstep'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
<button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
<span>Place Order</span>
</button>
</div>
<!-- /ko -->
- Create a file newstep.js in the path
app/code/VendorName/PlaceOrder/view/frontend/web/js/view
define(
[
'jquery',
'ko',
'Magento_Checkout/js/view/newstep',
'Magento_Checkout/js/model/step-navigator',
],
function(
$,
ko,
Component,
stepNavigator
)
'use strict';
return Component.extend(
isVisible: function ()
return stepNavigator.isProcessed('shipping');
,
initialize: function ()
$(function()
$('body').on("click", '#place-order-trigger', function ()
$(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
);
);
var self = this;
this._super();
);
);
4.For Add terms & condition checkbox in checkout_index_index.xml :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="children" xsi:type="array">
<item name="agreements" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
<item name="sortOrder" xsi:type="string">100</item>
<item name="displayArea" xsi:type="string">before-place-order</item>
<item name="dataScope" xsi:type="string">checkoutAgreements</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
<item name="agreements-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
answered Jul 30 '18 at 4:29
ShorabhShorabh
508314
The place_order_button.css file is missing in this answer
– Vignesh Bala
Feb 21 at 7:15
add a comment |
Below i have add some step. please follow step
1.Create your checkout_index_index.xml file in layout folder
app/code/VendorName/PlaceOrder/view/frontend/layout
<?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">
<head>
<css src="VendorName_PlaceOrder::css/place_order_button.css"/>
</head>
<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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/newstep</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_PlaceOrder/newstep</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
2.Create a file newstep.html in template
app/code/VendorName/PlaceOrder/view/frontend/web/template
<div class="opc-block-newstep" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order newstep'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
<button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
<span>Place Order</span>
</button>
</div>
<!-- /ko -->
- Create a file newstep.js in the path
app/code/VendorName/PlaceOrder/view/frontend/web/js/view
define(
[
'jquery',
'ko',
'Magento_Checkout/js/view/newstep',
'Magento_Checkout/js/model/step-navigator',
],
function(
$,
ko,
Component,
stepNavigator
)
'use strict';
return Component.extend(
isVisible: function ()
return stepNavigator.isProcessed('shipping');
,
initialize: function ()
$(function()
$('body').on("click", '#place-order-trigger', function ()
$(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
);
);
var self = this;
this._super();
);
);
4.For Add terms & condition checkbox in checkout_index_index.xml :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="children" xsi:type="array">
<item name="agreements" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
<item name="sortOrder" xsi:type="string">100</item>
<item name="displayArea" xsi:type="string">before-place-order</item>
<item name="dataScope" xsi:type="string">checkoutAgreements</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
<item name="agreements-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
answered Jul 30 '18 at 4:29
ShorabhShorabh
508314
Below i have add some step. please follow step
1.Create your checkout_index_index.xml file in layout folder
app/code/VendorName/PlaceOrder/view/frontend/layout
<?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">
<head>
<css src="VendorName_PlaceOrder::css/place_order_button.css"/>
</head>
<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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/newstep</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_PlaceOrder/newstep</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
2.Create a file newstep.html in template
app/code/VendorName/PlaceOrder/view/frontend/web/template
<div class="opc-block-newstep" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order newstep'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
<button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
<span>Place Order</span>
</button>
</div>
<!-- /ko -->
- Create a file newstep.js in the path
app/code/VendorName/PlaceOrder/view/frontend/web/js/view
define(
[
'jquery',
'ko',
'Magento_Checkout/js/view/newstep',
'Magento_Checkout/js/model/step-navigator',
],
function(
$,
ko,
Component,
stepNavigator
)
'use strict';
return Component.extend(
isVisible: function ()
return stepNavigator.isProcessed('shipping');
,
initialize: function ()
$(function()
$('body').on("click", '#place-order-trigger', function ()
$(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
);
);
var self = this;
this._super();
);
);
4.For Add terms & condition checkbox in checkout_index_index.xml :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="children" xsi:type="array">
<item name="agreements" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
<item name="sortOrder" xsi:type="string">100</item>
<item name="displayArea" xsi:type="string">before-place-order</item>
<item name="dataScope" xsi:type="string">checkoutAgreements</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
<item name="agreements-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
answered Jul 30 '18 at 4:29
ShorabhShorabh
508314
answered Jul 30 '18 at 4:29
ShorabhShorabh
508314
answered Jul 30 '18 at 4:29
ShorabhShorabh
508314
answered Jul 30 '18 at 4:29
ShorabhShorabh
508314
508314
The place_order_button.css file is missing in this answer
– Vignesh Bala
Feb 21 at 7:15
add a comment |
The place_order_button.css file is missing in this answer
– Vignesh Bala
Feb 21 at 7:15
The place_order_button.css file is missing in this answer
– Vignesh Bala
Feb 21 at 7:15
The place_order_button.css file is missing in this answer
– Vignesh Bala
Feb 21 at 7:15
add a comment |
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.
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%2f122813%2fmagento-2-how-to-add-extra-checkout-step-after-review-payments-section-with%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
have you managed to add a step at last after payment?
– Ravi Bhalodia
Jan 7 '17 at 6:05
@rameshpushparaj Have you done this?
– Arshad Hussain
Apr 3 '17 at 11:12
Same problem here, some solution?
– Diego Queiroz
May 29 '18 at 12:16
A alternative to this is adding a order summary to the success step. The place order button is binded to the payment step because it would be a problem if a customer pays and then doesn't finish the order, then the payment wouldn't belong to any order.
– Sanne
Jul 24 '18 at 8:41