Skip to main content

Magnolia and Salesforce Commerce Cloud Integration

Elevate the shopping experience by combining the power of Magnolia and Salesforce Commerce Cloud (SFCC). Use the available integration of Magnolia and SFCC to build the progressive web app, thanks to the Salesforce Composable Storefront.

With HA CLI, you can easily start up with a ready-to-use template for an e-commerce app that utilizes this integration.

Jumpstart the project#

Make sure to have the latest version of the HA CLI. Update the current version of the HA CLI if needed.

Salesforce Composable Storefront requires node version:

  • ^18.0.0 or ^20.0.0 for template version 3.x.x.
  • ^14.0.0 for template version 2.x.x.

Create a new empty directory, navigate there, and execute ha jumpstart to jumpstart a new project.

info

Refer to the Hello Magnolia - HA CLI to read more about creating a new web application.

During the jumpstart, choose to jumpstart a react project. Then select the salesforce-magnolia framework template. Choose the highest version when prompted.

salesforce-version
As of April 2024, the highest version of react/salesforce-magnolia project template is 3.0.0.

Salesforce credentials#

HA CLI asks for the information to connect to the SFCC instance during the jumpstart.

Change the credentials to connect to the specific Salesforce sandbox, or use the default values presented during the jumpstart to test the integration of the Salesforce Composable Storefront and Magnolia.

To use the default values press Enter when prompted for SFCC credentials.

info

The SFCC credentials can be changed at any time by editing the configuration files in the project.


Credentials needed to get started with the Salesforce integration and Composable Storefront are:

  • Client ID
  • Organization Id
  • Short Code
  • Site Id
  • Einstein Id
  • Einstein Site Id
  • api Host
  • ocapi Host
  • API Base URL
  • API Username
  • API Password
  • API Shop URL
  • API Site Id
  • Catalog Id
Jumpstart

Magnolia instance and Composable Storefront is correctly connected to the Salesforce instance after the jumpstart.

Start up the project#

Run ha dev to start up the application.

The local Magnolia instance is connected to the Salesforce Commerce Cloud and is running at port 8080.

Enter the Magnolia License Owner and License Key to use the salesforce-magnolia template project. Login to the local Magnolia AdminCentral running at port 8080 with:
Username: superuser
Password: superuser

Front-end is served via the Composable Storefront and is running at port 3000 by default.

note

Magnolia instance is connected to the SFCC instance through the SFCC connector.

Explore the project structure#

Changing the SFCC credentials#

Edit these configuration files in order to change the credentials needed for Magnolia, Composable Storefront and SFCC integration:

  • mgnl-config/ecommerces/sfcc-magnolia-headless-demo.yaml
  • config/default.js
  • config/sites.js