Getting started with: SAP Spartacus/composable storefront

SAP Spartacus is a modern, JavaScript-based frontend framework designed for building high-performance, personalised, and feature-rich E-commerce websites. Developed by SAP, Spartacus aims to deliver exceptional user experience while ensuring seamless integration with SAP Commerce Cloud (formerly known as SAP Hybris).

SAP Spartacus offers a powerful set of out-of-the-box (OOTB) components that expedite frontend development for E-commerce websites. However, every project is unique and requires customizations to align with specific business needs and branding.

Customise components

Step 1

To begin the process, we shall embark on creating a brand-new, custom component that extends the fundamental functionalities of the Spartacus component, as thoughtfully illustrated in the initial screenshot provided. This strategic step aims to elevate the capabilities and tailor the component according to our specific requirements, ensuring a seamless integration within the existing system.

Step 2

Once we’ve created our custom component, the next step is to add it to the Spartacus module.

Step 3

To enable Spartacus to use our custom component, we need to register the ‘CustomComponentsModule’ in the ‘imports’ section of the App Module. This crucial step integrates our new module into the broader application, allowing Spartacus to recognize and utilize our custom component seamlessly.

What next?

With your custom component successfully integrated into Spartacus, a world of possibilities awaits you. Now that your innovation is part of the application ecosystem, you have the power to make impactful changes, elevate the template structure, enhance the design, and introduce custom events and functionalities.

Useful Spartacus Services

Spartacus comes equipped with a wide range of powerful Services that can significantly simplify data retrieval and manipulation within your project. Leveraging these Services streamlines the process of obtaining essential data, enabling you to build a robust and responsive application. Below are some commonly used examples of Spartacus Services:

CurrentProductService

The CurrentProductService is a highly valuable Spartacus Service. When you’re on the product details page, this Service empowers you to effortlessly retrieve the data of the current product being viewed by the user, by calling the .getProduct( ) function.

OccEndpointsService

The OccEndpointsService.buildUrl() functionality is an incredibly handy tool that simplifies the process of creating URLs for your HTTP requests. With this powerful Spartacus Service, you can effortlessly construct URLs with all the necessary parameters and configurations required to interact with your backend commerce system.

UserAccountFacade

The UserAccountFacade.get() function is a valuable feature within Spartacus that allows you to easily retrieve the data of the currently logged-in user. By invoking this function, you gain access to all the pertinent information associated with the authenticated user, empowering you to provide personalized experiences and tailored functionalities based on their profile.

ModalService

The ModalService is another remarkable Spartacus feature that simplifies the process of creating modals for your application. Modals are an excellent way to present focused content, alerts, or additional interactions without navigating away from the current page. With the ModalService, incorporating modals into your app becomes a breeze.

To utilize the ModalService, you’ll first need to create a new component that serves as the foundation for your modal. This component will contain the content you want to display within the modal window.

Once your custom modal component is ready, you can invoke the ModalService from any other component in your application. The ModalService acts as a bridge that enables communication between the invoking component and the modal component.

Let’s break down how this works:

Passing the Value to the Modal: When calling the openModal() function and passing the inputValue, it serves as a parameter to the modal. This parameter can be any data or information that you want to pass to the modal component. For instance, it could be a product ID, user details, or any other relevant data.

Receiving the Value in YourModalComponent: In the YourModalComponent, you would declare an @Input() variable to receive the value passed from the openModal() function. By using the @Input() decorator, you’re indicating that this variable can accept input data from a parent component.

These are some of the Spartacus features that I use the most. Hopefully you have learned something new and/or maybe you have some favourite features you would like to share. Please share this in the comment section.