---
schema_version: "1"
id: 9cdfaeff89bea9f3a54e3bafe87e70e02e4c208b3fee581b4e851b666ec9113c
title: Extend addProductToCartPostHookfrom Lightning Web Components (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_extend_addproducttocartposthook_from_lightning_web_components.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_extend_addproducttocartposthook_from_lightning_web_components.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 1dc834d5531e1767244991cb074ac058af32d34ab3599f74c6a1af42e1a37f01
description: 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.
products:
  - Communications
release: "264"
---
# 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-communications-264-0-0-production-enus/444efb86-ea1e-477e-afbc-56eaac192eaf/communications/images/media_package_icon.png) _This feature is part of the Communications Cloud managed package._

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Enterprise</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d90178e81">Required User Permissions</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Required User Permissions" class="slds-cell-wrap" style="vertical-align:top;" headers="d90178e81 ">To configure Lightning web components:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d90178e81 ">Communications Cloud Admin</td>

          </tr>
        </tbody>
      </table>

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.
    
    ```javascript
    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.
    
    ```javascript
    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](https://help.salesforce.com/s/articleView?id=ind.comms_t_add_buttonsactionsor_fields_in_the_enterprise_sales_managementui_63691.htm&release=264.0.0&type=5 "Your Enterprise Sales Management implementation provides a number of buttons, actions, and fields to enable you to easily navigate the app or perform various actions. As you use and customize your implementation, you might want to use new buttons, actions, or fields, in addition to those that are provided by default.").