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:
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
