0

I'm working on Custom Checkout Module.

I've Created a Custom module follow this devdocs:

https://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_customize.html
and everything is working fine, but i cant use knockout js to render item using "displayArea" and "getRegion".

So here is what i've done: enter image description here As you can see, the "getRegion" part doesn't work. It doesn't render anything.

My code:

C:\xampp\htdocs\magento\app\code\Aht\MagentoCheckoutCustom\view\frontend\layout\checkout_index_index.xml (this file i do exactly what the devdoc said, except for the "displayArea" named "delivery-fieldsets", because devdoc doesn't say anything about that, so i was trying to put it everywhere that i thing it may work, but still no luck).

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout"
      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="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="before-shipping-method-form" xsi:type="array">
                                                            <item name="displayArea" xsi:type="string">delivery-fieldsets</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="delivery-group" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Aht_MagentoCheckoutCustom/js/view/custom-shipping</item>
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="delivery_instruction" xsi:type="array">
                                                                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                                            <item name="config" xsi:type="array">
                                                                                <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
                                                                                <item name="customScope" xsi:type="string">shippingAddress</item>
                                                                                <item name="template" xsi:type="string">ui/form/field</item>
                                                                                <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                                                                            </item>
                                                                            <!-- value element allows to specify default value of the form field -->
                                                                            <!--<item name="value" xsi:type="string">Yout value here</item>-->
                                                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                            <item name="dataScope" xsi:type="string">shippingAddress.delivery_instruction</item>
                                                                            <item name="label" xsi:type="string">Delivery Instruction:</item>
                                                                            <item name="sortOrder" xsi:type="string">1</item>
                                                                        </item>
                                                                        <item name="delivery_type" xsi:type="array">
                                                                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
                                                                            <item name="config" xsi:type="array">
                                                                                <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
                                                                                <item name="customScope" xsi:type="string">shippingAddress</item>
                                                                                <item name="template" xsi:type="string">ui/form/field</item>
                                                                                <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
                                                                            </item>
                                                                            <item name="options" xsi:type="array">
                                                                                <item name="0" xsi:type="array">
                                                                                    <item name="label" xsi:type="string">Delivery Type 1</item>
                                                                                    <item name="value" xsi:type="string">delivery_type_1</item>
                                                                                </item>
                                                                                <item name="1" xsi:type="array">
                                                                                    <item name="label" xsi:type="string">Delivery Type 2</item>
                                                                                    <item name="value" xsi:type="string">delivery_type_2</item>
                                                                                </item>
                                                                                <item name="2" xsi:type="array">
                                                                                    <item name="label" xsi:type="string">Delivery Type 3</item>
                                                                                    <item name="value" xsi:type="string">delivery_type_3</item>
                                                                                </item>
                                                                            </item>
                                                                            <!-- value element allows to specify default value of the form field -->
                                                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                            <item name="dataScope" xsi:type="string">shippingAddress.delivery_type</item>
                                                                            <item name="label" xsi:type="string">Delivery Type:</item>
                                                                            <item name="sortOrder" xsi:type="string">2</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

C:\xampp\htdocs\magento\app\code\Aht\MagentoCheckoutCustom\view\frontend\web\js\view\custom-shipping.js

/**


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

define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/model/shipping-rates-validator',
    'Magento_Checkout/js/model/shipping-address/form-popup-state',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Checkout/js/model/shipping-rate-registry',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'Magento_Checkout/js/checkout-data',
    'uiRegistry',
    'mage/translate',
    'Magento_Checkout/js/model/shipping-rate-service'
], function (
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    shippingRatesValidator,
    formPopUpState,
    shippingService,
    selectShippingMethodAction,
    rateRegistry,
    setShippingInformationAction,
    stepNavigator,
    modal,
    checkoutDataResolver,
    checkoutData,
    registry,
    $t
) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Aht_MagentoCheckoutCustom/custom-shipping',
            deliveryFormTemplate: 'Aht_MagentoCheckoutCustom/shipping-delivery/delivery-form'
        },
        visible: ko.observable(!quote.isVirtual()),
        errorValidationMessage: ko.observable(false),
        isCustomerLoggedIn: customer.isLoggedIn,
        isFormPopUpVisible: formPopUpState.isVisible,
        isFormInline: addressList().length === 0,
        isNewAddressAdded: ko.observable(false),
        saveInAddressBook: 1,
        quoteIsVirtual: quote.isVirtual()
    });
});

C:\xampp\htdocs\magento\app\code\Aht\MagentoCheckoutCustom\view\frontend\web\template\custom-shipping.html

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

<!-- custom delivery-->

<li id="delivery" class="checkout-shipping-delivery" data-bind="fadeVisible: visible()">
    <div class="step-title" translate="'Delivery'" data-role="title" />
    <div id="checkout-step-delivery"
         class="step-content"
         data-role="content">

        <!-- Inline address form -->
        <render args="deliveryFormTemplate" />
    </div>
</li>

C:\xampp\htdocs\magento\app\code\Aht\MagentoCheckoutCustom\view\frontend\web\template\shipping-delivery\delivery-form.html (it goes to this file succesfully, but some how, it stopped at the "getRegion" part and i dont know why.)

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

<!-- delivery-fieldsets -->
<!-- before-shipping-method-form -->

<form class="form form-shipping-delivery" id="co-shipping-delivery-form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
    <div id="shipping-delivery" class="fieldset delivery">
        <!-- ko foreach: getRegion('delivery-fieldsets') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
</form>

Here's what i've read (its all good post tho :D ):
https://stackoverflow.com/questions/40847615/magento2-knockout-render-specific-child

Magento2 Checkout Customization

0

Okay so I was come to devdoc and read again, and i've realize that i've missing 1 step to create input, it need 2 step

<item name="custom-checkout-form-container" xsi:type="array">
    <item name="component" xsi:type="string">%your_module_dir%/js/view/custom-checkout-form</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">%your_module_dir%/custom-checkout-form</item>
    </item>
    <item name="children" xsi:type="array">
        <item name="custom-checkout-form-fieldset" xsi:type="array">
            <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
            <item name="component" xsi:type="string">uiComponent</item>
            <!-- the following display area is used in template (see below) -->
            <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
            <item name="children" xsi:type="array">
              //your item here

As you can see, it require 2 step to make this work, 1 is "custom-checkout-form-container" and 2 is "custom-checkout-form-fieldset", but i only do 1, so that why it doesn't work. :)
https://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html

| improve this answer | |

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.