Hi folks,
As part of the checkout process, I have to show a custom module to collect some additional information.
Additionally, I have explored the code and found that all modules in the checkout screen are being rendered using a slot with an Id of 'checkoutlnformation'.
Thanks,
Aman
I’m new to D365 eCommerce development and currently working on a custom module for the checkout page. Specifically, I’m trying to implement it within the Checkout Information Container module in the Site Builder.
I followed the instructions from this Dynamics Community thread to create the custom module. While I can see it listed in the HTML tree via developer tools, it appears hidden and disabled. as shown below
Upon investigating, I found the relevant code in the guided-card.tsx
component, where the ICheckoutGuidedCardProps
interface defines the disabled
property. This indicates that the module is currently not available.
I have used the below logic in my custom custom module to add my custom module to checkout information container slot.
{
"$type": "contentModule",
"friendlyName": "my-custom-checkout-info",
"name": "my-custom-checkout-info",
"description": "",
"categories": ["checkout_checkoutInformation"],
"tags": [""],
"dataActions": {
}
}
Your guidance on how to resolve this issue and properly display my custom module on the checkout page would save me a lot of time and effort. I would be truly grateful for your assistance!
Hi Aman,
That's right you need to build the package using the CLI "yarn msdyn365 pack". Then upload the package via LCS and deploy to your environment. Then within site builder you can add the new module to the slot.
Hi Sam,
I really appreciate your response. I have completed all the steps you have mentioned just need to upload it to the environment.
For updating the slot we need to upload the build pack with our custom module to the environment then only it will be visible on the Ecom Site.
Thanks
Aman
Hi Aman,
I'll see if I can help here. if you open up the checkout.definition.json file you'll see the list of slots as you mentioned, which i've pulled out below for the first slot named "CheckoutInformation".
"slots": {
"checkoutInformation": {
"friendlyName": "Checkout Information",
"description": "This contains the checkout information like shipping address, payment instrument and etc. This content is in the left slot ",
"max": 10,
"min": 1,
"allowedTypes": [
"checkout-express",
"checkout-shipping-address",
"checkout-billing-address",
"checkout-guest-profile",
"checkout-delivery-options",
"checkout-gift-card",
"checkout-loyalty",
"checkout-section-container",
"checkout-payment-instrument",
"checkout-terms-and-conditions",
"text-block",
"checkout-customer-account-payment",
"checkout-pickup"
],
"allowedCategories": ["checkout_checkoutInformation"]
},
Notice there is an allowedTypes list of modules that are allowed, so one option as you mentioned is to add a new module type. To do this you'll need do a module definition file override in your theme, here are instructions: docs.microsoft.com/.../theme-module-extensions. You may also need to modify the checkout view file if you want to lay the new module out differently than the module does currently.
However, there is an easier way, notice the "allowedCategories" above is set to "checkout_checkoutInformation", if you just add this to your custom module definition file "categories" section then the new module will be allowed to be a child of that slot. Below is an example custom module definition file:
{
"$type": "contentModule",
"friendlyName": "my-custom-checkout-info",
"name": "my-custom-checkout-info",
"description": "",
"categories": ["checkout_checkoutInformation"],
"tags": [""],
"dataActions": {
}
}
Once you now package and build the module and upload to your environment, you should now be able to add the custom module to the checkout module slot.
I hope that helps,
Sam
Hi thanks for the reply, I have already checked that link but unfortunately they have mentioned it using Site builder only but not Ecom SDK.
Stay up to date on forum activity by subscribing. You can also customize your in-app and email Notification settings across all subscriptions.
André Arnaud de Cal... 290,888 Super User 2024 Season 2
Martin Dráb 229,247 Most Valuable Professional
nmaenpaa 101,156