Magento 2.2.5: Custom checkout The Next CEO of Stack OverflowMagento2 Checkout Customizationmagento 2 captcha not rendering if I override layout xmlMagento 2: New Checkout step – Shipping Method prices not showingmain.CRITICAL: Plugin class doesn't existMagento 2 knockout js in checkout pageMagento 2 add custom data to checkoutMagento 2: How to add custom css class in Checkout shipping address formMagento 2.2.5: Custom Checkout Place Order ErrorMagento 2.2.5: How to validate shipping addressMagento 2 override minicart.phtml in custom moduleRequire custom checkout field from extension

Is it my responsibility to learn a new technology in my own time my employer wants to implement?

Is it okay to store user locations?

What happens if you roll doubles 3 times then land on "Go to jail?"

How to make a software documentation "officially" citable?

How did people program for Consoles with multiple CPUs?

Why doesn't a table tennis ball float on the surface? How do we calculate buoyancy here?

Why do remote companies require working in the US?

Customer Requests (Sometimes) Drive Me Bonkers!

% symbol leads to superlong (forever?) compilations

What does this shorthand mean?

When airplanes disconnect from a tanker during air to air refueling, why do they bank so sharply to the right?

Which organization defines CJK Unified Ideographs?

Why is there a PLL in CPU?

Can I equip Skullclamp on a creature I am sacrificing?

Science fiction (dystopian) short story set after WWIII

Go Pregnant or Go Home

How to safely derail a train during transit?

How easy is it to start Magic from scratch?

If I blow insulation everywhere in my attic except the door trap, will heat escape through it?

How to get regions to plot as graphics

Opposite of a diet

What can we do to stop prior company from asking us questions?

Can a caster that cast Polymorph on themselves stop concentrating at any point even if their Int is low?

How do scammers retract money, while you can’t?



Magento 2.2.5: Custom checkout



The Next CEO of Stack OverflowMagento2 Checkout Customizationmagento 2 captcha not rendering if I override layout xmlMagento 2: New Checkout step – Shipping Method prices not showingmain.CRITICAL: Plugin class doesn't existMagento 2 knockout js in checkout pageMagento 2 add custom data to checkoutMagento 2: How to add custom css class in Checkout shipping address formMagento 2.2.5: Custom Checkout Place Order ErrorMagento 2.2.5: How to validate shipping addressMagento 2 override minicart.phtml in custom moduleRequire custom checkout field from extension










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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendlayoutcheckout_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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebjsviewcustom-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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebtemplatecustom-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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebtemplateshipping-deliverydelivery-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










share|improve this question




























    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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendlayoutcheckout_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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebjsviewcustom-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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebtemplatecustom-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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebtemplateshipping-deliverydelivery-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










    share|improve this question


























      0












      0








      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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendlayoutcheckout_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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebjsviewcustom-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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebtemplatecustom-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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebtemplateshipping-deliverydelivery-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










      share|improve this question
















      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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendlayoutcheckout_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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebjsviewcustom-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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebtemplatecustom-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:xampphtdocsmagentoappcodeAhtMagentoCheckoutCustomviewfrontendwebtemplateshipping-deliverydelivery-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







      magento2 template knockoutjs






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 3 mins ago









      Teja Bhagavan Kollepara

      3,01241949




      3,01241949










      asked Sep 11 '18 at 14:18









      fudufudu

      42311




      42311




















          1 Answer
          1






          active

          oldest

          votes


















          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






          share|improve this answer























            Your Answer








            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "479"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f241781%2fmagento-2-2-5-custom-checkout%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            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






            share|improve this answer



























              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






              share|improve this answer

























                0












                0








                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






                share|improve this answer













                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







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Sep 13 '18 at 2:30









                fudufudu

                42311




                42311



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Magento Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f241781%2fmagento-2-2-5-custom-checkout%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Disable / Remove link to Product Items in Cart Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?How can I limit products that can be bought / added to cart?Remove item from cartHide “Add to Cart” button if specific products are already in cart“Prettifying” the custom options in cart pageCreate link in cart sidebar to view all added items After limit reachedLink products together in checkout/cartHow to Get product from cart and add it againHide action-edit on cart page if simple productRemoving Cart items - ObserverRemove wishlist items when added to cart

                    Helsingin valtaus Sisällysluettelo Taustaa | Yleistä sotatoimista | Osapuolet | Taistelut Helsingin ympäristössä | Punaisten antautumissuunnitelma | Taistelujen kulku Helsingissä | Valtauksen jälkeen | Tappiot | Muistaminen | Kirjallisuutta | Lähteet | Aiheesta muualla | NavigointivalikkoTeoksen verkkoversioTeoksen verkkoversioGoogle BooksSisällissota Helsingissä päättyi tasan 95 vuotta sittenSaksalaisten ylivoima jyräsi punaisen HelsinginSuomalaiset kuvaavat sotien jälkiä kaupungeissa – katso kuvat ja tarinat tutuilta kulmiltaHelsingin valtaus 90 vuotta sittenSaksalaiset valtasivat HelsinginHyökkäys HelsinkiinHelsingin valtaus 12.–13.4. 1918Saksalaiset käyttivät ihmiskilpiä Helsingin valtauksessa 1918Teoksen verkkoversioTeoksen verkkoversioSaksalaiset hyökkäävät Etelä-SuomeenTaistelut LeppävaarassaSotilaat ja taistelutLeppävaara 1918 huhtikuussa. KapinatarinaHelsingin taistelut 1918Saksalaisten voitonparaati HelsingissäHelsingin valtausta juhlittiinSaksalaisten Helsinki vuonna 1918Helsingin taistelussa kaatuneet valkokaartilaisetHelsinkiin haudatut taisteluissa kaatuneet punaiset12.4.1918 Helsingin valtauksessa saksalaiset apujoukot vapauttavat kaupunginVapaussodan muistomerkkejä Helsingissä ja pääkaupunkiseudullaCrescendo / Vuoden 1918 Kansalaissodan uhrien muistomerkkim

                    Adjektiivitarina Tarinan tekeminen | Esimerkki: ennen | Esimerkki: jälkeen | Navigointivalikko