The Missing SF B2B Guide

# lwc

Lightning Web Component with B2B Commerce.

Currently there is no offering of official Lightning Components for B2B Commerce. The problem is that, in an effort to make things configuratble with no code at all, Salesforce will not make Lightning Components easy to extend, unlike the current VF page + Apex combo. This is ok if you like to drag and drop, but it is very likely you will need more than just that in a real B2B Commerce implementation.

One approach to go around this is to create your own Lightning Web Components. They are not difficult, but it will require to go the "headless" route (at least from the point of view of the B2B commerce managed package). At a high level:

  • Any existing remote actions will have to become aura enabled methods to be consumed by the lightning components
  • Download your css and js libraries and make them static resources. We can not directly import the third party scripts in Lightning web components because Security purpose Salesforce restrict the importing scripts from third-party content delivery sites like cdnjs, jsdelivr, etc

Extra stuff

  • Make the Lightning Community public, for guest user acccess <aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess"> <aura:dependency resource="lwcVFDemo"/> </aura:application>

  • Whitelist CORS

  • Make it lightning out compatible? https://newstechnologystuff.com/2019/05/28/use-lightning-web-components-in-lightning-out/

The ugly parts:

Most likely your components will need some kind of bootstrapping code

<aura:component controller="MyContactListController"> <ltng:require styles="/resource/bootstrap/bootstrap-3.3.6-dist/css/bootstrap.min.css,/resource/bootstrapmultiselect/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css,/resource/SLDS100/assets/styles/salesforce-lightning-design-system-ltng.css" scripts="/resource/jquery,/resource/bootstrap/bootstrap-3.3.6-dist/js/bootstrap.min.js,/resource/bootstrapmultiselect/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js" afterScriptsLoaded="{!c.scriptsLoaded}"/> <aura:handler name="init" action="{!c.myAction}" value="{!this}" /> <aura:attribute name="contacts" type="Contact[]" /> <aura:attribute name="compname" type="String" />

</aura:component>

Sharing common stuff https://lwc-recipes-oss.herokuapp.com/#child

# Key Definitions

Keyword Object Name Description

# lwc Flow

  • WIP

# Extending how the lwc is determined

A possible approach is to:

B2B commerce golden rule:

  • Try to use configuration settings first.
  • Use extensions when it makes sense.
  • Avoid creating new custom classes that duplicates functionality (prefer extensions).

# Example 1 (example)

# Use Case

# Why an Extension?

# General Approach

# Design

# Sample Code

# Demo

# Extras

# lwc data in the CCRZ object (for Handlebars)

Where pricing shows in the OOTB frontend (e.g. for Handlebars overrides):

Page CCRZ object

WARNING

The CCRZ object list above may not be 100% accurate and may vary depending on how you are using B2B commerce. There could be other js objects that could contain the same data, but the CCRZ object is not documented at all. Give this a try first, and if it doesn't work, look around using the browser's inspector tools

Tags: lwc

References: https://cloudcraze.atlassian.net/wiki/spaces/B2BDOCS410