0

I have a module already built for ExtraFee, I just want to add the checkbox below for terms & conditions so I found a template and added a checkbox like this:

<div class="field amexfee-item-element" visible="visible" css="$data.additionalClasses">
    <label class="label amexfee-title" text="label"></label>
    <div class="control">
        <p if="description" text="description"></p>
        <render args="elementTmpl"/>
    </div>
    <!-- ko if: element.error() -->
    <div class="field-error" data-bind="attr: { id: element.errorId }, text: element.error" generated="true"></div>
    <!-- /ko -->

    <!-- Custom Checkbox -->
    <input data-validate='{"required":true}' type="checkbox" id="customCheckbox" name="customCheckbox" value="" data-bind='checked: CheckVals'/>
    <label for="customCheckbox">I accept Terms & Condition for Insurance product.</label><br>
    <!-- /Custom Checkbox -->
</div>

I also get its value in a js file like this:

define([
    'jquery',
    'Magento_Ui/js/form/element/abstract',
    'Magento_Catalog/js/price-utils',
    'Magento_Checkout/js/model/quote',
    'Amasty_Extrafee/js/action/select-fee',
    'Magento_Ui/js/lib/validation/validator',
    'Amasty_Extrafee/js/model/tax-utils',
    'ko',
    'uiComponent',
    'mage/url',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/model/totals'
], function ($, AbstractField, priceUtils, quote, selectFeeAction, validator, taxUtils, ko, Component, url, modal, totals) {
    'use strict';

    return AbstractField.extend({
        defaults: {
            template: 'Amasty_Extrafee/fee/item',
            templatesChildComponents: {
                radio: 'Amasty_Extrafee/fee/item/radio',
                checkbox: 'Amasty_Extrafee/fee/item/checkbox',
                dropdown: 'Amasty_Extrafee/fee/item/dropdown'
            },
            listens: {
                value: 'setFee'
            },
            frontendType: 'dropdown',
            feeId: null,
            options: [],
            value: []
        },
        translation: {
            error: $.mage.__('Please select at least one option for %1.')
        },
        taxUtils: taxUtils,

        /**
         * @returns {Item} Chainable.
         */
        initObservable: function () {
            this._super()
                .observe({
                    CheckVals: ko.observable(true) //default checked(true)
                });

            var checkVal=0;
            self = this;
            this.CheckVals.subscribe(function (newValue) {
                console.log('success');
                console.log(totals.totals().total_segments[3]);
                if(newValue) {
                    checkVal = 1;
                    var popup = $('<div class="terms-and-condition"/>').html(
                        '<p for="ins-terms">Terms & Condition</p>'
                        ).modal({
                        type: 'popup',
                        responsive: true,
                        innerScroll: true,
                        modalClass: 'ins-terms-popup',
                        height: 'auto',
                        width: 'auto',
                        title: $.mage.__("Terms & Conditions"),
                        buttons: [
                            {
                                text: 'Proceed',
                                click: function() {
                                    this.closeModal();
                                }
                            }
                        ]
                    });
        
                    popup.modal('openModal');
                } else {
                    checkVal = 0;
                }
            });

            this._super()
                .observe([
                    'options'
                ]);

            return this;
        },

        /**
         * @returns {Object} Validate information.
         */
        validate: function () {
            var value = this.value(),
                result = validator(this.validation, value, this.validationParams),
                message = '',
                isValid = this.disabled() || !this.visible() || result.passed;

            if (this.required() && !value) {
                isValid = false;
            }

            if (!isValid) {
                message = this.translation.error.replace('%1', this.label);
            }

            this.error(message);
            this.error.valueHasMutated();
            this.bubble('error', message);

            if (this.source && !isValid) {
                this.source.set('params.invalid', true);
            }

            return {
                valid: isValid,
                target: this
            };
        },

        /**
         * @param {String|Array} optionId
         * @returns {void}
         */
        setFee: function (optionId) {
            var optionsIds = Array.isArray(optionId) ? optionId : [ optionId ];

            selectFeeAction.selectFee(this.feeId, optionsIds);
        },

        /**
         * @returns {Item} Chainable.
         */
        initConfig: function () {
            this._super();

            if (Object.keys(this.templatesChildComponents).indexOf(this.frontendType) !== -1) {
                this.elementTmpl = this.templatesChildComponents[this.frontendType];
            }

            return this;
        }
    });
});

This is what it look like: enter image description here

I just wanted to add validation for my checkbox, I'm not very good at KO so if anyone knows please help me out.

1 Answer 1

0

Firstly, Magento's validation for checkout_index_index.xml is not working properly so, you have to insert the rules while you replace the street fields. You can do this by creating a plugin and inserting the fields in Layout AfterProcessor.

namespace/module/etc/frontend/di.xml ...

<type name=""""Magento\Checkout\Block\Checkout\LayoutProcessor"""">
    <plugin name=""""rewrite-street"""" type=""""Namespace\Module\Model\Checkout\LayoutProcessorPlugin"""" sortOrder=""""10""""/>
</type>

...

And the LayoutProcessorPlugin should look like this: (Please see in my attachment) https://pastebin.com/AE6AiLxk

You can insert in the validation array any validation rule you want.

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.