---
schema_version: "1"
id: d62707a0a703be4154173d00422f63a0429070fb85ba8d64aec1e3f9aec070e2
title: Add Slots in Quote Header (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_add_a_new_slot_in_quote_header.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_add_a_new_slot_in_quote_header.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 1f9060e66bd2d053350a5393c60cef6d5a83491ce5ad1ad9a9e6b7dbd3e656cb
description: In Enterprise Sales Management, you can add slots in the quote header by extending the b2bCartSummary card. By default, the quote header has three slots that help you capture relevant information such as, cost, margin, and so on.
products:
  - Communications
release: "264"
---
# Add Slots in Quote Header (Managed Package)

In Enterprise Sales Management, you can add slots in the quote header by extending the b2bCartSummary card. By default, the quote header has three slots that help you capture relevant information such as, cost, margin, and so on.

![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._

| REQUIRED EDITIONS |
| --- |
| Available in: Lightning Experience |
| Available in: **Enterprise**, **Unlimited**, and **Developer** editions |

 
| REQUIRED USER PERMISSIONS |   |
| --- | --- |
| To configure Omnistudio components: | OmniStudio User |

Let's say you want to add a slot, OneTimeMarginTotal. You must extend the b2bCartSummary and b2bSampleApp LWCs.

1. Create an Lightning web component by extending the b2bCartSummary Lightning web component.
    1. In Enterprise Sales Management, go to the App Launcher. Enter LWC, and click **LWC Designer**.
    2. Click **+LWC**.
    3. Click **Extend**.
    4. Enter customB2bCartSummary as the LWC name.
    5. Select the LWC **b2bCartSummary**.
    6. Select **Include HTML**, **Include XML Targets**, and **Omniscript Support**.
    7. Click **Create**. A custom LWC is created and it opens in LWC Designer.
2. Create the HTML file for customb2bCartSummary.
    1. In **Select a file**, select **customb2bCartSummary.html**.
    2. In the editor, enter the HTML. Add the OneTimeMarginTotal <div> element. You can use this sample HTML:
        
        ```html
        <template>
        <div slot="b2bHeaderPricingSection">
          <div class="slds-size_1-of-12 slds-p-horizontal_small">
             <div class="slds-text-color_weak">{labels.CMEXMonthlyTotal}</div>
             <div class="b2b-cart-price-text slds-p-top--xx-small">546</div>
          </div>
        </div>
        <div class="nds-p-horizontal_small nds-size_12-of-12 nds-large-size_4-of-12">
        <div class="nds-hide_medium nds-border_top"></div>
        <div class="nds-grid nds-p-vertical_small" if:true={cartData}>
        <div class="nds-size_1-of-4 nds-shrink-none">
        <div class="nds-text-color_weak">{labels.CMEXOneTimeTotal}</div>
        <div>{oneTimeTotal}</div>
        </div>
        <div class="nds-size_1-of-4 nds-shrink-none">
        <div class="nds-text-color_weak">{labels.CMEXMonthlyTotal}</div>
        <div>{monthlyTotal}</div>
        </div>
        <div class="nds-size_1-of-4 nds-shrink-none">
        <div class="nds-text-color_weak">One Time Margin Total</div>
        <div>{oneTimeMarginTotal}</div>
        </div>
        <div class="nds-size_1-of-4 nds-shrink-none">
        <div class="nds-text-color_weak">{cartData.ObjectType} {labels.CMEXTotal}</div>
        <div>{typeTotal}</div>
        </div>
        </div>
        <div class="slds-spinner_container nds-is-relative" if:false={cartData}>
        <lightning-spinner alternative-text={labels.CMEXLoading} size="large" variant="brand">
        </lightning-spinner>
        </div>
        </div>
        </template>
        ** Replace the custom tag with the namespace tag wherever applicable
        ```
    3. Save your changes. Refresh your browser tab to confirm the changes were saved successfully.
3. Create the JavaScript file for customb2bCartSummary.
    1. In **Select a file**, select **customb2bCartSummary.js**.
    2. In the editor, enter the JavaScript. You can use this sample JavaScript:
        
        ```javascript
        import B2bCartSummary from 'vlocity_cmt/b2bCartSummary';
        import customB2bCartSummaryTemplate from "./customB2bCartSummary.html";
        import { formatCurrency } from 'vlocity_cmt/utility';
        
        export default class customB2bCartSummary extends B2bCartSummary {
           get oneTimeMarginTotal() {
        return formatCurrency(this.cartData?.OneTimeMarginTotal__c)
        }
          render(){
        return customB2bCartSummaryTemplate;
        }
          connectedCallback() {
        super.connectedCallback();
        }
        }
        ```
    3. Save your changes.
4. Create an Lightning web component by extending the b2bSampleApp Lightning web component.
    1. In Enterprise Sales Management, go to the App Launcher. Enter LWC, and click **LWC Designer**.
    2. In Enterprise Sales Management, go to the App Launcher. Enter LWC, and click **LWC Designer**
    3. Click **+LWC**.
    4. Click **Extend**.
    5. Enter customB2bSampleApp as the LWC name.
    6. Select **b2bSampleApp**.
    7. Select **Include HTML**, **Include XML Targets**, and **Omniscript Support**.
    8. Click **Create**. A custom LWC is created and it opens in LWC Designer.
5. Create the HTML file for **customB2bSampleApp**.
    1. In **Select a file**, select **customB2bSampleApp.html**.
    2. In the editor, paste the b2bSamleApp HTML template. Replace `<c-b2b-cart-summary if:false={route.createQuote.active} name-list={nList}></c-b2b-cart-summary>` in the template with `<c-custom-b2b-cart-summary if:false={route.createQuote.active} name-list={nList}></c-custom-b2b-cart-summary>`.
    3. Save your changes. Refresh your browser tab to confirm the changes were saved successfully.
6. Create the JavaScript file for customB2bSampleApp.
    1. In **Select a file**, select **customB2bSampleApp.js**
    2. In the editor, enter the JavaScript. You can use this sample JavaScript:
        
        ```javascript
        import B2bCartSummary from 'vlocity_cmt/b2bCartSummary';
        import customB2bCartSummaryTemplate from "./customB2bCartSummary.html";
        import { formatCurrency } from 'vlocity_cmt/utility';
        
        export default class customB2bCartSummary extends B2bCartSummary {
           get oneTimeMarginTotal() {
        return formatCurrency(this.cartData?.OneTimeMarginTotal__c)
        }
          render(){
        return customB2bCartSummaryTemplate;
        }
          connectedCallback() {
        super.connectedCallback();
        }
        }
        ```
    3. Save your changes.
7. To 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.").