0

I have developed a payment method for Magento 2. I would like the "send order" button ("invia ordine") to be disabled in checkout (or send an error message) if the customer does not select an item in the options menu of my method ("seleziona").

enter image description here

/app/code/Infocurci/Pagamentodilazionato/view/frontend/web/template/payment/pagamentodilazionato.html

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
    <input type="radio"
           name="payment[method]"
           class="radio"
           data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
   <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
                
</div>
<div class="payment-method-content">
    <div>
         
    <select name="payment[condizionipagamento]" class="select input-text required-entry" 
                            data-bind="
                                attr: {id: getCode()+'_condizionipagamento'},
                                options: getCardList(),
                                optionsValue: 'value',
                                optionsText: 'type',
                                optionsCaption: $t('--Please Select--'),
                                ">
                </select>
    </div>
     <!-- ko foreach: getRegion('messages') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    <div class="payment-method-billing-address">
        <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    css: {disabled: !isPlaceOrderActionAllowed()},
                    enable: (getCode() == isChecked())
                    "
                    disabled>
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>
</div>
0

You have isPlaceOrderActionAllowed which is observable. You can change the value on select from your JS class. Let's say, in initialize method:

initialize: function () {
    this._super();
    // Disabled in initially
    this.isPlaceOrderActionAllowed(false);
}

Also, you need modification in isChecked() method. E.g:

isChecked: ko.computed(function () {
    return false;
}),
1
  • Thanks, Sohel. Do you know how I can call, at the onChange event of the "select" menu, a custom function that I have already added to my javascript class? So when the user chooses an option, the method becomes enabled.
    – Infocurci
    Apr 17 at 8:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.