Add a New Action in the Actions List in the Cart Summary Pane (Managed Package)

In Enterprise Sales Management, you can display additional buttons in the cart summary pane, if required. By default, the cart summary pane displays a list of actions that you can perform, such as Create Order and Create Proposal. Let's say you want to add an action labeled Apply Adjustment. Here's how you can add this action in the actions list in the cart summary pane.

1. Create a new LWC by extending the b2bCartSummary LWC.
   1. In your Enterprise Sales Management org, go to the App Launcher. Enter LWC and click LWC Designer.
   2. Click +LWC to create a new LWC.
   3. In the Add New LWC dialog box, click Extend.
   4. Enter the LWC name cb2bCartSummary.
   5. Select the LWC b2bCartSummary.
   6. Select Include HTML, Include XML Targets, and Omniscript Support.
   7. Click Create.
2. Create the HTML file for cb2bCartSummary.
   1. In Select a file, select cb2bCartSummary.html.
   2. In the editor, enter the required HTML. You can use the following HTML as a sample to create this file:

      <template>
      <vlocity_cmt-b2b-cart-summary name-list={nList}>
       <!-- existing slot override -->
             <div slot="action">
                 <div class="nds-grid nds-grid_vertical-align-center nds-grid_align-end">
                     <div class="nds-large-order_1 nds-grid nds-grid_align-center nds-wrap">
                         <div class="nds-m-left_medium">
                             <vlocity_cmt-b2b-button theme="nds" variant="neutral" label={labels.CMEXAddProducts}
                                 icon-name="utility:add" icon-size="x-small" onclick={addProduct}>
                             </vlocity_cmt-b2b-button>
                         </div>
                         <div class="nds-m-left_medium">
                             <vlocity_cmt-b2b-button theme="nds" variant="neutral" label={labels.CMEXCreateOrders}
                                 icon-size="x-small" onclick={createOrder}>
                             </vlocity_cmt-b2b-button>
                         </div>
                     </div>
                     <!-- utility actions code is needed here if customer wants to reuse the existing feature provided, along with the new button implementation-->
                     <div class="nds-large-order_2 nds-b2b-m-left_medium">
                         <vlocity_cmt-menu theme="nds" icon-name="utility:threedots_vertical" position="right">
                             <template for:each={actionList} for:item="item">
                                 <vlocity_cmt-menu-item theme="nds" name={item.label} key={item.label} record={item}
                                     data-method={item.method} onclick={executeAction}></vlocity_cmt-menu-item>
                             </template>
                         </vlocity_cmt-menu>
                     </div>
                 </div>
             </div>
         </vlocity_cmt-b2b-cart-summary>
      </template>

   3. Save your work. Refresh your browser tab to confirm the changes were saved successfully.
3. Create the JavaScript file for cb2bCartSummary.
   1. In Select a file, select cb2bCartSummary.js.
   2. In the editor, enter the required JavaScript. In this example, the action applyAdjustment is added with the label Apply Adjustment. You can use the following JavaScript as a sample to create this file:

      import B2bCartSummary from 'vlocity_cmt/b2bCartSummary';
      export default class cb2bCartSummary extends B2bCartSummary {
        connectedCallback(){
            super.connectedCallback();
            //nList can be any variable, need to store the route Quote property
            this.nList = this.route.Quote;
         //    modifying existing utility actions (add or remove)
             this.actionList.splice(0,0,{label:'Apply Adjustment',method:'applyAdjustment'});
        }
        executeAction(evt){
             const func = evt.currentTarget.dataset.method;
             this[func]();
         }
         applyAdjustment(){
             //custom code here
             alert('Apply Adjustment');
         }
      }

   3. Save your work. Refresh your browser tab to confirm the changes were saved successfully.
4. Update the metadata XML file for cb2bCartSummary.
   1. In Select a file, select cb2bCartSummary.js-meta.xml.
   2. In the editor, update the metadata. Ensure that the metadata specifies isExposed as true and the runtimeNamespace as vlocity_cmt. You can use the following XML as a sample to update this file:

      <?xml version="1.0" encoding="UTF-8"?>
      <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
         <apiVersion>51.0</apiVersion>
         <isExposed>true</isExposed>
         <runtimeNamespace>vlocity_cmt</runtimeNamespace>
         <masterLabel>cb2bCartSummary</masterLabel>
         <targets>
              <target>lightning__RecordPage</target>
              <target>lightning__AppPage</target>
              <target>lightning__HomePage</target>
          </targets>
      </LightningComponentBundle>

   3. Save your work.
5. Next, create a new LWC by extending the b2bSampleApp LWC.
   1. Click +LWC to create a new LWC.
   2. In the Add New LWC dialog box, click Extend.
   3. Enter the LWC name cB2BSampleApp.
   4. Select the LWC b2bSampleApp.
   5. Select Include HTML, Include XML Targets.
   6. Click Create.
6. Create the HTML file for cB2BSampleApp.
   1. In Select a file, select cB2BSampleApp.html.
   2. In the editor, enter the required HTML. You can use the following HTML as a sample to create this file:

      <template>
         <div class="via-nds">
             <div if:true={initApp}>
             <c-cb2b-cart-summary></c-cb2b-cart-summary>
             <template if:true={route.memberUpload.active}>
             <vlocity_cmt-b2b-data-table-wrapper></vlocity_cmt-b2b-data-table-wrapper>
             </template>
             <template if:true={route.selectOffer.active}>
             <vlocity_cmt-b2b-offer-selection></vlocity_cmt-b2b-offer-selection>
             </template>
             <template if:true={route.configureOffer.active}>
             <vlocity_cmt-b2b-offer-config></vlocity_cmt-b2b-offer-config>
             </template>
             <template if:true={route.quoteSummary.active}>
             <vlocity_cmt-b2b-quote-summary></vlocity_cmt-b2b-quote-summary>
             </template>
             </div>
             <div class="slds-spinner_container" if:false={initApp}>
             <lightning-spinner alternative-text="Loading" size="large" variant="brand"></lightning-spinner>
             </div>
         </div>
      </template>

   3. Save your work. Refresh your browser tab to confirm the changes were saved successfully.
7. Create the JavaScript file for cB2BSampleApp.
   1. In Select a file, select cB2BSampleApp.js.
   2. In the editor, enter the required JavaScript. You can use the following JavaScript as a sample to create this file:

      import B2BSampleApp from "vlocity_cmt/b2bSampleApp";
      import cB2BSampleAppTemplate from "./cB2BSampleApp.html";
      /**
      * @class cB2BSampleApp
      * @extends {LightningElement} Extends the b2bSampleApp
      *
      * @classdesc
      * cB2BSampleApp is the component for navigating between components.<br/><br/>
      */
       
      export default class cB2BSampleApp extends B2BSampleApp {
       render(){
         return cB2BSampleAppTemplate;
       }
      }

   3. Save your work. Refresh your browser tab to confirm the changes were saved successfully.
8. Update the metadata XML file for cB2BSampleApp.
   1. In Select a file, select cB2BSampleApp.js-meta.xml.
   2. In the editor, update the metadata. Ensure that the metadata specifies isExposed as true and the runtimeNamespace as vlocity_cmt. You can use the following XML as a sample to update this file:

      <?xml version="1.0" encoding="UTF-8"?>
      <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
         <apiVersion>51.0</apiVersion>
         <isExposed>true</isExposed>
         <runtimeNamespace>vlocity_cmt</runtimeNamespace>
         <masterLabel>cB2BSampleApp</masterLabel>
         <targets>
          <target>lightning__RecordPage</target>
          <target>lightning__AppPage</target>
          <target>lightning__HomePage</target>
         </targets>
      </LightningComponentBundle>

   3. Save your work.
9. Next, update the b2bSampleApp card. The b2bSampleApp card can't be updated directly, so start by cloning the card:
   1. In your Enterprise Sales Management org, go to Settings and click Setup.
   2. In Quick Find, enter Lightning and click Lightning Components.
   3. In the list of Lightning components, go to cfB2bSampleAppCard. Click Del and then click OK to confirm. If there are multiple components with the prefix cf, delete all of these components.
   4. In the App Launcher, enter Cards and click Vlocity Cards.
   5. Open b2bSampleAppCard and then click Clone.
   6. Enter a name in Layout Author and click Save.
   7. In the cloned card, in Layout LWC, select the custom LWC that you just created, cb2bSampleApp, and then click Deploy.
   8. Click Activate.