In the Winter 24 version, LWR experience for B2B commerce should now use Layout: Accordion instead of the Checkout component with Accordion layout setting.
So I replace it and add inside a "Checkout Section". Within that section, I've added a custom component and a "Action button". The component was working fine in the old Checkout component but in the new one, methods from CheckoutSavable Interface are not called.
Here is a sample of the js based on https://developer.salesforce.com/docs/atlas.en-us.b2b_b2c_comm_dev.meta/b2b_b2c_comm_dev/b2b_b2c_comm_checkout_sample_checkout_component.htm:
import { LightningElement, api } from "lwc";export default class Sample extends LightningElement { _checkoutMode = 1; @api get checkoutMode() { return this._checkoutMode; } set checkoutMode(value) { console.log("Should be called when user navigate in and out of the section"); this._checkoutMode = value; } // Get trigger when user clicks on "Next" button on accordion layout @api reportValidity() { console.log("Should be called when user click on the action button to proceed to the next section") return true; } @api checkoutSave() { if (!this.reportValidity()) { throw new Error("error"); } }}Maybe we now need to explicitly implement CheckoutSavable Interface but I'm not sure how and where is it located. I also noticed that if I switch the documentation to v59.0, the sample checkout component page doesn't exist anymore.
Anyone experience the same issue and have a fix?
Hi Alex, with the Winter ’24 LWR checkout changes, the custom component needs to be placed within the new Checkout Section and follow the interfaces supported by that checkout architecture.
The CheckoutSavable behavior isn't something you implement by importing an interface into the LWC. The checkout framework invokes the supported public methods on the component when it participates in the checkout flow.
I'd first verify that the component is using the current Commerce checkout component contract for the Winter ’24/LWR layout, because the older checkoutMode, reportValidity(), and checkoutSave() example may not apply to the new Accordion/Checkout Section architecture.
If you're already following the current documentation and those methods still aren't being invoked, could you share the component configuration in Experience Builder and the exact Commerce/LWR version? That would help determine whether this is a configuration issue or a regression with the new checkout layout.
