7/5/2021 Add a New Button in the Cart Summary Pane
Add a New Button in the Cart
Summary Pane
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.
To add a button in the cart summary pane, you must extend the b2bSampleApp and the b2bCartSummary
LWCs:
1 Create a new LWC by extending the b2bCartSummary LWC.
a. In your Enterprise Sales Management org, go to the App Launcher. Enter LWC and click
LWC Designer.
b. Click +LWC to create a new LWC.
c. In the Add New LWC dialog box, click Extend.
d. Enter the LWC name customB2BCartSummary .
e. Select the LWC b2bCartSummary.
f. Select Include HTML and Include XML Targets.
g. Click Create.
A new custom LWC is created and is opened in LWC Designer.
2 Create the HTML file for customB2BCartSummary.
a. In Select a file, select customB2BCartSummary.html.
b. In the editor, enter the required HTML. 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 HTML as a sample to
create this file:
https://docs.vlocity.com/en/Add-a-New-Button-in-the-Cart-Summary-Pane.html 1/6
7/5/2021 Add a New Button in the Cart Summary Pane
<template>
<vlocity_cmt-b2b-cart-summary name-list={nList}>
<!-- existing slot override -->
<div slot="action">
<!--Existing buttons code is needed here if customer wants to reuse the existing feature provided, along with the
new button implementation-->
<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>
<!-- 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>
</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>
c. Click Save.
Tip
Refresh your browser tab to ensure the changes were saved
successfully.
3 Create the JavaScript file for customB2BCartSummary.
a. In Select a file, select cb2bCartSummary.js.
b. In the editor, enter the required JavaScript. You can use the following JavaScript as a sample
to create this file:
https://docs.vlocity.com/en/Add-a-New-Button-in-the-Cart-Summary-Pane.html 2/6
7/5/2021 Add a New Button in the Cart Summary Pane
import B2bCartSummary from 'vlocity_cmt/b2bCartSummary';
export default class customB2BCartSummary 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 customB2BCartSummary.
a. In Select a file, select customB2BCartSummary.js-meta.xml.
b. 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>customB2BCartSummary</masterLabel>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
c. Click Save.
You should now see a preview of this custom LWC with the new button displayed.
5 Next, create a new LWC by extending the b2bSampleApp LWC.
a. Click +LWC to create a new LWC.
b. In the Add New LWC dialog box, click Extend.
c. Enter the LWC name customB2BSampleApp .
d. Select the LWC b2bSampleApp.
e. Select Include HTML, Include XML Targets, and Omniscript Support.
f. Click Create.
A new custom LWC is created and is opened in LWC Designer.
6 Create the HTML file for customB2BSampleApp.
https://docs.vlocity.com/en/Add-a-New-Button-in-the-Cart-Summary-Pane.html 3/6
7/5/2021 Add a New Button in the Cart Summary Pane
a. In Select a file, select customB2BSampleApp.html.
b. 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-custom-b2-b-cart-summary></c-custom-b2-b-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>
c. Click Save.
Tip
Refresh your browser tab to ensure the changes were saved
successfully.
7 Create the JavaScript file for customB2BSampleApp.
a. In Select a file, select customB2BSampleApp.js.
b. 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;
https://docs.vlocity.com/en/Add-a-New-Button-in-the-Cart-Summary-Pane.html 4/6
7/5/2021 Add a New Button in the Cart Summary Pane
c. Click Save.
8 Update the metadata XML file for cb2bSampleApp.
a. In Select a file, select cb2bSampleApp.js-meta.xml.
b. 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>
c. Click Save.
You should now see a preview of this custom LWC component.
9 Next, update the b2bSampleApp card. The b2bSampleApp card can't be updated directly, so start
by cloning the card:
a. In your Enterprise Sales Management org, go to Settings and click Setup.
b. In Quick Find, enter Lightning and click Lightning Components.
c. In the list of Lightning components, go to cfB2bSampleAppCard. Click Del and then click
OK to confirm.
Note
If there are multiple components with the prefix cf, delete all of these
components.
d. In the App Launcher, enter Cards and click Vlocity Cards.
e. Open b2bSampleAppCard and then click Clone.
f. Enter a name in Layout Author and click Save.
The card is cloned and the new card is opened. You can now update this card.
g. In the cloned card, in Layout LWC, select the custom LWC that you just created,
customB2BSampleApp, and then click Deploy.
https://docs.vlocity.com/en/Add-a-New-Button-in-the-Cart-Summary-Pane.html 5/6
7/5/2021 Add a New Button in the Cart Summary Pane
h. Click Activate.
The updated UI now shows the new button in the cart summary pane, with the label Go To Quote.
Was this helpful?
Yes No
© 2021 Vlocity LLC, a Salesforce company Last modified: April 29, 2021
Publication date: July 5, 2021
https://docs.vlocity.com/en/Add-a-New-Button-in-the-Cart-Summary-Pane.html 6/6
