How to Use the Default Shopware Preloader in Storefront

When developing with Shopware 6, you may be facing a situation where you want to display preloaders during an AJAX call to improve the user experience. Instead of implementing a custom preloader, Shopware 6 provides a default preloader that you can use with little effort. This article will explain how to use the default Shopware preloader in your storefront to avoid unnecessary custom preloader implementations.

Issue Faced

Many developers choose to develop custom preloaders to display between AJAX calls, but this leads to unnecessary complications and potential performance issues. Instead, making full use of the native Shopware preloader feature supports simplified development and ensures a consistent user experience. 

Solution

The default preloader feature with Shopware can easily solve the problem. It just needs to follow simple steps:

1. Import the Shopware Preloader Library.
2. Use the Preloader in your AJAX calls.

Step-by-Step Guide

1. Import the Shopware Preloader Library

Include the ElementLoadingIndicatorUtil library from Shopware in your custom JavaScript plugin. This library has all the methods available for adding and deleting a preloader.

Javascript

import ElementLoadingIndicatorUtil from ‘src/utility/loading-indicator/element-loading-indicator.util’;

2. Utilize the Preloader in your AJAX Calls

You can use the ElementLoadingIndicatorUtil method to show your preloader before an AJAX Call and remove it later. You can use it as follows:

Before the AJAX Call:

Add the following line of code to create and display the preloader for this element:

Javascript

ElementLoadingIndicatorUtil.create(‘element-class-that-need-to-display’);

After the AJAX Call:

Once the AJAX call is completed, remove the preloader with the following code:

Javascript

ElementLoadingIndicatorUtil.remove(‘element-class-that-need-to-display’);

Example

Here is an example of how to use the default Shopware preloader within an AJAX Call:

Javascript

Conclusion

By using the default Shopware preloader, you can save a ton of work on the implementation and maintenance of your custom preloaders. This approach ensures that the storefront works efficiently and delivers smooth user experiences. This will import the ElementLoadingIndicatorUtil library and then create and remove its methods around the AJAX call. For more assistance and expert solutions, consider consulting with a Shopware agency to optimize your e-commerce platform effectively.