Salesforce Certified B2B Commerce Developer Practice Test - Questions Answers, Page 12

To update the checkout process so that buyers can purchase with one of the below payment types:

Credit Card

Purchase Order

Contract Now & Pay Later Additionally, show only Purchase Order and Contract Now & Pay Later if a custom checkbox field on the account is checked, a developer should create a custom Lightning web component for the checkout flow that has all the options available. Within that component, pull data from the account to determine which options to show. Creating a custom Lightning web component for the checkout flow allows the developer to define custom logic and user interface for processing payments using different payment types. The developer can use Apex methods or third-party APIs to integrate with payment service providers or payment gateways and handle payment authorization, capture, void, and refund. The developer can also use @wire or @api decorators to get data from the account object and use its properties, such as the custom checkbox field, to determine which payment options to show or hide based on business logic. Creating a custom Lightning web component that can be used with the standard payment component is not a valid way to meet this requirement, as it does not allow the developer to replace or modify the standard payment component's logic or user interface. Modifying the standard payment component settings in the checkout screen flow and adding the new payment method is not a valid way either, as it does not allow the developer to add custom payment types or conditional logic based on account data. Adding a new payment gateway through the reference implementation steps so the payment shows up on the checkout payment screen is not a valid way either, as it does not allow the developer to add multiple payment options or conditional logic based on account data. Salesforce

Reference: B2B Commerce Developer Guide: Payment Integration, B2B Commerce Developer Guide: Payment Component, B2B Commerce Developer Guide: Checkout Subflow

Data for Lightning web components should be provided as independent properties that take simpler, primitive values (e.g. String, Number, Boolean, Array). Providing data as independent properties allows the developer to expose data as public or private properties of the Lightning web component and communicate data between components or services. Providing data as simpler, primitive values allows the developer to use data types that are supported by JavaScript and Lightning web components and avoid unnecessary or complex conversions or transformations. Providing data as a few properties that contain sets (objects) of data is not a good way to provide data for Lightning web components, as it can create confusion or inconsistency in data structure and access. Providing data as one property that contains all data in one set (object) is not a good way either, as it can create complexity or inefficiency in data management and manipulation. Providing data as a single property object that contains sets (objects) of data is not a good way either, as it can create redundancy or duplication in data storage and retrieval. Salesforce

Reference: Lightning Web Components Developer Guide: Communicate with Properties, Lightning Web Components Developer Guide: Data Types

The correct syntax for looping through a series of child components which are tiles is option A. Option A uses the for:each directive to iterate over a collection of items and render a template block for each item. The for:each directive requires an expression that evaluates to an array or an iterable object and an item alias that represents the current item in the iteration. The item alias can be used to access the item's properties or pass them to child components. In option A, the expression is appTiles, which is an array of objects that represent app tiles, and the item alias is appTile, which represents the current app tile object in the iteration. The appTile object's properties, such as name, description, and icon, are passed to the app-tile child component using attributes. Option B is incorrect because it uses an invalid syntax for the for:each directive. The for:each directive requires a colon (:) after the for keyword, not an equal sign (=). Option C is incorrect because it uses an invalid syntax for the for:each directive. The for:each directive requires an item alias that represents the current item in the iteration, not a key alias that represents the current index in the iteration. Option D is incorrect because it uses an invalid syntax for the template tag. The template tag requires a closing tag (</template>), not a self-closing tag (<template/>). Salesforce

Reference: Lightning Web Components Developer Guide: Iterate Over a Collection, Lightning Web Components Developer Guide: Template Syntax

To implement specific styling for a standard component on a single page of the B2B Commerce store using an Aura template, a developer should create a custom theme layout Aura component that imports the custom CSS file and set up the page to use this theme layout. A theme layout is a type of Aura component that defines the header and footer of a page in the storefront. A theme layout can also import custom CSS files from static resources and apply them to the page. A developer can create a custom theme layout Aura component that imports the custom CSS file that contains the specific styling for the standard component and assign it to the page that needs the custom styling. This way, the custom styling will only affect the standard component on that page and not on other pages that use a different theme layout. Using a custom CSS file in a static resource and adding the import using the Edit Head Markup Editor in the Experience Builder is not a valid way to implement specific styling for a standard component on a single page, as it will affect all pages that use the same template. Creating a custom content layout Lightning web component that imports the custom CSS file and setting up the page to use this content layout is not a valid way either, as it will not affect the standard component that is outside of the content layout. Using the Override CSR Editor in the Experience Builder and adding the desired CSS to change the styles is not a valid way either, as it will affect all pages that use the same template. Salesforce

Reference:B2B Commerce Developer Guide: Theme Layout Component,B2B Commerce Developer Guide: Content Layout Component,B2B Commerce Developer Guide: Override CSR Editor

Two methods from the platformResourceLoader module that are relevant for including third party JavaScript and CSS in a Lightning web component are loadScript and loadStyle. The platformResourceLoader module is a module that provides methods for loading JavaScript or CSS files from static resources or external URLs into a Lightning web component. The loadScript method is used to load a JavaScript file and execute it in the component. The loadStyle method is used to load a CSS file and apply it to the component. The loadClientScript method does not exist or is not relevant for including third party JavaScript in a Lightning web component. The loadCss method does not exist or is not relevant for including third party CSS in a Lightning web component. Salesforce

Reference:Lightning Web Components Developer Guide: Load Scripts and Style Sheets, [Lightning Web Components Developer Guide: platformResourceLoader Module]

Two ways that events fired from Lightning web components can be handled are programmatically adding event listeners and attaching handlers to DOM elements. Programmatically adding event listeners is a way of handling events by using JavaScript code to register functions that are invoked when an event occurs. The developer can use methods such as addEventListener or @wire to add event listeners to components or services that fire events. Attaching handlers to DOM elements is a way of handling events by using HTML attributes to bind functions that are invoked when an event occurs. The developer can use attributes such as onclick or onchange to attach handlers to DOM elements that fire events. Adding callbacks to components is not a valid way of handling events fired from Lightning web components, as it is not related to event handling, but rather to asynchronous programming. Listening for all possible events at the document root is not a valid way either, as it is not efficient or recommended for event handling, as it can cause performance issues or conflicts with other event listeners. Salesforce

Reference: [Lightning Web Components Developer Guide: Handle Events], [Lightning Web Components Developer Guide: Communicate with Events]

Two components in a B2B store template that a developer can use to customize a storefront page are My Lists and Product List. My Lists is a standard component that displays and manages lists of products that customers can create, save, or share in the storefront. A developer can use this component to enable customers to organize their favorite or frequently purchased products into lists and access them easily. Product List is a standard component that displays and filters products from one or more product lists in the storefront. A developer can use this component to showcase products from different categories or collections and allow customers to browse or search for products based on various criteria. Order List is not a component in a B2B store template, but rather an object that stores information about orders placed by customers in the storefront. Address List is not a component either, but rather an object that stores information about addresses associated with customers in the storefront. Salesforce

Reference: [B2B Commerce Developer Guide: My Lists Component], [B2B Commerce Developer Guide: Product List Component], [B2B Commerce Developer Guide: Order List Object], [B2B Commerce Developer Guide: Address List Object]

To handle changes on the combobox, the developer should replace <CHANGE EVENT> with {handleChange}. The handleChange is a function that is defined in the JavaScript file of the Lightning web component and is invoked when the value of the combobox changes. The developer can use this function to perform custom logic or actions based on the selected value of the combobox, such as updating other components or properties, calling Apex methods or services, or firing events. The developer can use the onchange attribute to bind the handleChange function to the combobox element in the HTML file of the Lightning web component. The onchange attribute is an HTML attribute that specifies a function to be executed when the value of an element changes. {event:handleChange} is not a valid way to handle changes on the combobox, as it is not a valid syntax for binding a function to an element. javascript:void(0);handleChange(); is not a valid way either, as it is not a valid syntax for binding a function to an element. {handleChange()} is not a valid way either, as it is not a valid syntax for binding a function to an element. Salesforce

Reference: Lightning Web Components Developer Guide: Handle Events, Lightning Web Components Developer Guide: Communicate with Properties, Lightning Web Components Developer Guide: lightning-combobox

Two ways that a developer can deploy some small CSS changes without waiting for the entire project deployment are right-clicking the folder for the component and choosing Deploy Source to Org and right-clicking the CSS file that was edited and selecting Deploy Single File. Deploying source to org is a way of deploying metadata from a local project to an org using Salesforce CLI commands. The developer can use Visual Studio Code to execute these commands by right-clicking on files or folders in the project and choosing from various deployment options. Right-clicking the folder for the component and choosing Deploy Source to Org allows the developer to deploy only the files that belong to that component, such as HTML, JavaScript, CSS, and XML files. Right-clicking the CSS file that was edited and selecting Deploy Single File allows the developer to deploy only that CSS file and not any other files in the project. These options can save time and bandwidth for deploying small changes without affecting other components or files in the project. Modifying the StoreIntegratedService to map to an Apex class ID using Workbench is not a way of deploying CSS changes, as it is only used for registering internal services that are provided by Salesforce B2B Commerce out-of-the-box. Entering the integration class name and version in store administration is not a way of deploying CSS changes either, as it is only used for selecting an existing integration class that has already been registered as an external service. Salesforce

Reference: Salesforce CLI Command Reference: force:source:deploy, Salesforce Developer Tools for Visual Studio Code, B2B Commerce Developer Guide: Integration Framework, B2B Commerce Developer Guide: RegisteredExternalService Object