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.

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:

      <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:

      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:

      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.