I want to disable the "Place Order" button in certain conditions.
I have tried a lot but not getting exact information.
Give some idea for same
-
What have you tried ? In which conditions you want to disable ?– Narendra VyasCommented Mar 18, 2019 at 13:09
Add a comment
|
3 Answers
It wont be as easy to hide "Place Order" button directly because it comes separate with each payment method.
You can override individual payment method module's form.html (e.g. for Braintree : vendor/magento/module-braintree/view/frontend/web/template/payment/form.html) file but in this case also there are N no of payments you will have to do for all.
Hence, I would recommend to go through following steps:
- Create a button same as "Place Order"
- Hide default "Place Order" by CSS
- Trigger default "Place Order" on the click of your custom "Place Order" button
- You can apply any condition on your custom "Place Order" button
Have a look at this link in order to achieve above :
-
-
@deepak glad that you made it done, please accept the answer and also up vote so that it may help others also. Thanks. Commented Mar 20, 2019 at 18:06
-
@NarendraVyas I am trying to achieve similar behavior but in our case we need to disable the button for customers based on customer group data and display a message instead of the button. How do we access session/customer data inside .js file as mentioned at zanetabaran.com post?– cnuCommented Apr 5, 2019 at 18:51
-
you can use magento customer-data.js, you can include that in js file. Commented Apr 6, 2019 at 12:21
You can create a js file and include it on checkout page with following code.
define(['jquery'], function($) {
$(document).on('change', 'input[name="payment[method]"]', function() {
if(!your_condition)
{
$('button.checkout').attr('disabled', 'disabled');
}
});
});
This should work.
Override the below template in your theme
vendor/magento/module-braintree/view/frontend/web/template/payment/form.html
After that update code from line no 139 to 149 with given below code
<button class="action primary checkout"
type="submit"
data-bind="
click: placeOrderClick,
attr: {title: $t('Place Order')},
css: {disabled: !isPlaceOrderActionAllowed()},
enable: isActive()
"
disabled>
<span data-bind="i18n: 'Place Order'"></span>
</button>
