Add a spinner component (LWR only)
Learn how to add a spinner component to your solution.
Last updated
Salesforce Lightning B2B Commerce App 2.0
Learn how to add a spinner component to your solution.
Last updated
With the LWR checkout improvements, you will notice that transitions between sections happen quickly. While this is a good thing, it can lead to errors when asynchronous processes try to update the cart simultaneously. To avoid this, you can include a spinner overlay component on your implementation that disables the page during specific component actions. The shopper cannot edit other parts of the page when this occurs.
The following attached spinner component is provided as a working sample; however, it must be updated to meet your requirements.
As provided, the component listens for specific events and enables or disables the spinner overlay based on these events. The Digital River checkout components publish these events. You may also modify the component to listen for your custom events. The Digital River components publish the following events:
paymentsIsProcessing
Fired during loading the payment component.
Fired during payment source attachment to checkout.
taxIdentifierIsProcessing
Fired during the loading of the tax identifier component.
Fired during the adding or removal of tax identifiers to the checkout.
isPlacingOrder
Fired during the DR order placement and salesforce cart-to-order conversion process.
Suppose you have implemented the customer credit extension. In that case, Digital River recommends that you fire events to enable or disable the spinner while adding or removing customer credit sources to checkout and while your component is loading. All of these actions result in modifications of the cart.
After modifying to meet your requirements, deploy the spinner component to your org. To place the component in the checkout:
Navigate to Experience Builder for your site.
Go to the Checkout page.
Drag and drop the component to the page. Ensure that the component is placed in Column 1 at the same level as the Checkout Accordion component, as shown in the screenshot below. The spinner component can be before or after the Checkout Layout: Accordion component, but it must be at the same level as shown. Important: If the component is not placed at the correct level in Experience Builder, it may not work as intended.
Publish the site.
