Add a New Button in the Cart Summary Pane (Managed Package)

In Enterprise Sales Management, you can display additional buttons in the cart summary pane. By default, the cart summary pane has buttons labeled Add Products and Create Order. Let's say you want to add a button labeled Go To Quote. Here's how you can add this button 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 and Include XML Targets.
   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. Use b2bCartSummary.html as a sample to create this file.
      

      Note Create a case to request access to the file.
   3. Add the new button in the reference code for the action slot. In this example, a button with the label Go To Quote and onClick action navigateToQuote is added. You can use the following snippet as a sample to create this button:

      
       
      <!-- Other code from b2bCartSummary.html -->
             <!-- existing slot override -->
             <div slot="action">
      <!-- Other code from b2bCartSummary.html -->
               <!-- Injecting code for sample custom implementation for new button -->
                <div class="nds-m-left_medium">
                    <vlocity_cmt-b2b-button theme="nds" variant="neutral" label="Go To Quote" icon-size="x-small"
                         onclick={navigateToQuote}>
                     </vlocity_cmt-b2b-button>
                 </div>
       <!-- Other code from b2bCartSummary.html -->          
             </div>
       <!-- Other code from b2bCartSummary.html --> 
      

   4. 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. 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;
        }
        navigateToQuote(){
            //custom code here     
             alert('Go To Quote')
        }
      }

4. Update the metadata XML file for cb2bCartSummary.
   1. In Select a file, select cb2bCartSummary.js-meta.xml.
   2. In the editor, 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 customB2BSampleApp.
   4. Select the LWC b2bSampleApp.
   5. Select Include HTML, Include XML Targets, and Omniscript Support.
   6. Click Create.
6. Create the HTML file for customB2BSampleApp.
   1. In Select a file, select customB2BSampleApp.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 customB2BSampleApp.
   1. In Select a file, select customB2BSampleApp.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 customB2BSampleAppTemplate from "./customB2BSampleApp.html";
      /**
      * @class customB2BSampleApp
      * @extends {LightningElement} Extends the b2bSampleApp
      *
      * @classdesc
      * customB2BSampleApp is the component for navigating between components.<br/><br/>
      */
       
      export default class customB2BSampleApp extends B2BSampleApp {
       render(){
         return customB2BSampleAppTemplate;
       }
      }

   3. Save your work.
8. Update the metadata XML file for cb2bSampleApp.
   1. In Select a file, select cb2bSampleApp.js-meta.xml.
   2. In the editor, 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>customB2BSampleApp</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. Go to 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, customB2BSampleApp, and then click Deploy.
   8. Click Activate.