Salesforce Docs Portal

Extend addProductToCartPostHookfrom Lightning Web Components (Managed Package)

In Enterprise Sales Management, when you add a child product to the working cart, the working cart Lightning web component doesn’t refresh. To automatically refresh the working cart Lightning web component, you must extend addProductToCartPostHook by extending the b2bSampleApp and b2bOfferConfig components.

Required Editions

Managed Package Icon This feature is part of the Communications Cloud managed package.

Available in: Lightning Experience
Available in: Enterprise, Unlimited, and Developer Editions
Required User Permissions
To configure Lightning web components: Communications Cloud Admin
  1. From the App Launcher, find and select LWC Designer.
  2. To create a custom Lightning web component, click +LWC.
  3. On the Extend tab, enter customB2bOfferConfig as the name of the Lightning web component.
  4. Select b2bOfferConfig as the Lightning web component.
  5. Select Include XML Targets and Omniscript Support.
  6. Click Create.
  7. Select customB2bOfferConfig.js as the file.
  8. In the Editor, enter the JavaScript code. Use ‌this sample code. 
    import B2bOfferConfig from 'vlocity_cmt/b2bOfferConfig';
     
export default class customB2bOfferConfig extends B2bOfferConfig {
     
addProductToCartPostHook(response) {
Promise.resolve().then(() => {
this.getCartItemsCall();
});
}
connectedCallback() {
super.connectedCallback();
}
}
  9. Save your changes.
  10. Select customB2bOfferConfig.js-meta.xml as the file.
  11. In the Editor, add this line: <runtimeNamespace>vlocity_cmt</runtimeNamespace>.
  12. Save your changes.
  13. To create another custom Lightning web component, click +LWC.
  14. On the Extend tab, enter customB2bSampleApp as the name of the Lightning web component.
  15. Select b2bSampleApp as the Lightning web component.
  16. Select Include HTML, Include XML Targets, and Omniscript Support.
  17. Click Create.
  18. Select customB2bSampleApp.html as the file.
  19. In the Editor, enter the entire HTML code from b2bSampleApp.
  20. Replace <vlocity_cmt-b2b-offer-config></vlocity_cmt-b2b-offer-config> with <c-custom-b2b-offer-config></c-custom-b2b-offer-config>.
  21. Save your changes.
  22. Select customB2bSampleApp.js as the file.
  23. In the Editor, enter the JavaScript code. Use ‌this sample code. 
    import B2bSampleApp from 'vlocity_cmt/b2bSampleApp';

export default class customB2bSampleApp extends B2bSampleApp {

connectedCallback() {
super.connectedCallback();
}
}
  24. Save your changes.

Deploy the custom Lightning web component to Enterprise Sales Management, see Customize Buttons, Actions, or Fields in ‌Enterprise Sales Management.