Magento 2.2.5: Custom checkoutMagento2 Checkout Customizationmagento 2 captcha not rendering if I override...
What incentives do banks have to gather up loans into pools (backed by Ginnie Mae)and selling them?
What is the wife of a henpecked husband called?
Why exactly do action photographers need high fps burst cameras?
Is it a fallacy if someone claims they need an explanation for every word of your argument to the point where they don't understand common terms?
Why is working on the same position for more than 15 years not a red flag?
Move fast ...... Or you will lose
Early credit roll before the end of the film
Should I reinstall Linux when changing the laptop's CPU?
kill -0 <PID> は何をするのでしょうか？
Can you tell from a blurry photo if focus was too close or too far?
How can I get my players to come to the game session after agreeing to a date?
How can I play a serial killer in a party of good PCs?
Why would space fleets be aligned?
What are the exceptions to Natural Selection?
How can a school be getting an epidemic of whooping cough if most of the students are vaccinated?
What is the most fuel efficient way out of the Solar System?
Gear reduction on large turbofans
Citing paywalled articles accessed via illegal web sharing
Do authors have to be politically correct in article-writing?
How much mayhem could I cause as a sentient fish?
Removing disk while game is suspended
Consequences of lack of rigour
When can a QA tester start his job?
Am I a Rude Number?
Magento 2.2.5: Custom checkout
Magento2 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: How does Checkout Save data?Magento 2.2.5: Custom Checkout Place Order ErrorMagento 2.2.5: How to validate shipping address
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: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>
Thanks for reading. Have a good day :)
Okay so 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
edited 22 mins ago
Teja Bhagavan Kollepara
2,96341847
asked Sep 11 '18 at 14:18
fudufudu
41311
add a comment |
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: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>
Thanks for reading. Have a good day :)
Okay so 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
edited 22 mins ago
Teja Bhagavan Kollepara
2,96341847
asked Sep 11 '18 at 14:18
fudufudu
41311
add a comment |
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: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>
Thanks for reading. Have a good day :)
Okay so 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
edited 22 mins ago
Teja Bhagavan Kollepara
2,96341847
asked Sep 11 '18 at 14:18
fudufudu
41311
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: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>
Thanks for reading. Have a good day :)
Okay so 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
magento2 template knockoutjs
edited 22 mins ago
Teja Bhagavan Kollepara
2,96341847
asked Sep 11 '18 at 14:18
fudufudu
41311
edited 22 mins ago
Teja Bhagavan Kollepara
2,96341847
asked Sep 11 '18 at 14:18
fudufudu
41311
edited 22 mins ago
Teja Bhagavan Kollepara
2,96341847
edited 22 mins ago
Teja Bhagavan Kollepara
2,96341847
edited 22 mins ago
Teja Bhagavan Kollepara
2,96341847
2,96341847
asked Sep 11 '18 at 14:18
fudufudu
41311
asked Sep 11 '18 at 14:18
fudufudu
41311
asked Sep 11 '18 at 14:18
fudufudu
41311
41311
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
answered Sep 13 '18 at 2:30
fudufudu
41311
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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
answered Sep 13 '18 at 2:30
fudufudu
41311
add a comment |
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
answered Sep 13 '18 at 2:30
fudufudu
41311
add a comment |
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
answered Sep 13 '18 at 2:30
fudufudu
41311
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
answered Sep 13 '18 at 2:30
fudufudu
41311
answered Sep 13 '18 at 2:30
fudufudu
41311
answered Sep 13 '18 at 2:30
fudufudu
41311
answered Sep 13 '18 at 2:30
fudufudu
41311
41311
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
