1

I want to create a Custom Store Credit section for my project, but after adding the component in checkout_index_index.xml I got the below error in console.log Failed to load the “Magento_Checkout/js/view/payment” component.

app/code/StoreCredit/Discount/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="component" xsi:type="string">uiComponent</item>
                                                <item name="children" xsi:type="array">
                                                    <item name="payment" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="afterMethods" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="declare-discount" xsi:type="array">
                                                                        <item name="component" xsi:type="string">StoreCredit_Discount/js/view/checkout/discountform</item>
                                                                        <item name="children" xsi:type="array">
                                                                            <item name="errors" xsi:type="array">
                                                                                <item name="sortOrder" xsi:type="string">15</item>
                                                                                <item name="component" xsi:type="string">StoreCredit_Discount/js/view/checkout/discountmessages</item>
                                                                                <item name="displayArea" xsi:type="string">messages</item>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                    <item name="sidebar" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="summary" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="totals" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="custom" xsi:type="array">
                                                                <item name="component"  xsi:type="string">StoreCredit_Discount/js/view/checkout/cart/totals/custom</item>
                                                                <item name="sortOrder" xsi:type="string">20</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="template" xsi:type="string">StoreCredit_Discount/checkout/cart/totals/custom</item>
                                                                    <item name="title" xsi:type="helper" helper="StoreCredit\Discount\Helper\Data::getTitle"/>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                    <item name="cart_items" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="details" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="subtotal" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Magento_Tax/js/view/checkout/summary/item/details/subtotal</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/StoreCredit/Discount/view/frontend/layout/checkout_cart_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.cart.totals">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="block-totals" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="custom" xsi:type="array">
                                    <item name="component"  xsi:type="string">StoreCredit_Discount/js/view/checkout/cart/totals/custom</item>
                                    <item name="sortOrder" xsi:type="string">20</item>
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">StoreCredit_Discount/checkout/cart/totals/custom</item>
                                        <item name="title" xsi:type="helper"  helper="StoreCredit\Discount\Helper\Data::getTitle"/>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/StoreCredit/Discount/view/frontend/web/js/view/checkout/discountform.js

define([
    'jquery',
    'ko',
    'uiComponent',
    'Magento_Checkout/js/model/quote',
    'StoreCredit_Discount/js/action/checkout/set-discount-code',
    'StoreCredit_Discount/js/action/checkout/cancel-discount'
], function ($, ko, Component, quote, setDiscountCodeAction, cancelDiscountAction) {
    'use strict';

    var totals = quote.getTotals(),
        custom = ko.observable(null),
        isApplied;

    if (totals()) {
        custom(totals()['custom']);
    }
    isApplied = ko.observable(getCustom() != null);

    return Component.extend({
        defaults: {
            template: 'StoreCredit_Discount/checkout/discount-checkout-form'
        },
        custom: custom,

        /**
         * Applied flag
         */
        isApplied: isApplied,

        /**
         * Discount application procedure
         */
        apply: function () {
            if (this.validate()) {
                setDiscountCodeAction(getCustom(), isApplied);
            }
        },

        /**
         * Discount using coupon
         */
        cancel: function () {
            if (this.validate()) {
                getCustom('');
                cancelDiscountAction(isApplied);
            }
        },

        /**
         * Coupon form validation
         *
         * @returns {Boolean}
         */
        validate: function () {
            var form = '#my-form';

            return $(form).validation() && $(form).validation('isValid');
        }
    });
});

app/code/StoreCredit/Discount/view/frontend/web/js/view/checkout/discountmessages.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'Magento_Ui/js/view/messages',
    '../../model/checkout/discount-checkout-form'
], function (Component, messageContainer) {
    'use strict';

    return Component.extend({
        /** @inheritdoc */
        initialize: function (config) {
            return this._super(config, messageContainer);
        }
    });
});

Your Answer

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

Browse other questions tagged or ask your own question.