Salesforce Commerce Cloud
The document walks you through the step by step process of setting up the Firework SFCC Cartridge within your Salesforce Commerce Cloud backend.
Firework SFCC Cartridge Installation
The integration for this cartridge encompasses, the deployment of a generic cartridge combined with minor modification of templates inside the storefront code for the cartridge to be fully functional. No known dependency on any 3rd party product.
Download the Cartridge Package from Git Repository
Watch the Detailed Video Tutorial or Skip to Steps Below
Step 1 : Setup Cartridges Path
Now we’ll configure Cartridge Paths to ensure the Firework Cartridges are loaded.
In Administration > Sites > Manage Sites > YourSite > Settings we’ll add that Cartridges includes
Next, in Administration > Sites > Manage Sites > Business Manager > Settings we’ll add that Cartridges includes
Step 2 : Upload Metadata
After the installation of cartridge on your instance, we need to upload the metadata of the integration :
Before we import jobs please open the firework-job.xml
inside the Firework.zip
file and update context site-id to your desired site id
To upload the file, navigate to Administration → Site Development → Site Import & Export → Upload →Choose Firework.zip to Upload
Import the metadata:
To Import the metadata, navigate to Administration → Site Development → Site Import & Export → Select the uploaded file → Click Import
Step 3 : Cartridge Installation Instructions
There are 3 cartridges in the zip folder
bm_firework_dashboard
bm_firework_pd
int_firework_pd
Please install these 3 cartridges on your SFCC cartridges directory
Enable Firework Cartridge
Navigate to Administration Organization Roles & Permissions Administrator Business Manager Modules
Then you can select the site or organization you want to enable the Firework Cartridge.
Step 4 : Setup Site Preference
Please Select Store and navigate to Merchant Tools → Site Preferences → Custom Site Preference Groups → fireworkDashboardConfig
Configuring Locale-Specific Product Information Import:
To ensure product information aligns with your site's intended audience, kindly input your site's locale ID in the configuration. By default, Firework will import product information based on the default locale.
Customizing Product Image Import for Specific View Types:
For precise image management, you can define specific view types for which images should be imported. Simply list the desired view types as comma-separated strings. If unspecified, Firework will import images for all view types by default.
Step 5 : Setup Your API Client on Salesforce Account Manager
Setup API client on demandware Account Manager with the following Configuration:
Login to Demandware Account Manager and Navigate to API Client → Add API Client → Setup Display Name, Password and Select Your Organization → Roles → Select your Production / Sandbox Instance for Commerce Cloud Developer Experience and Salesforce Commerce API
Default Scopes
Allowed Scopes
Redirect URIs
Important Step: Your_admin_RedirectURL you will get it from Firework API Configuration Window:
To get the Redirect URL please navigate to Select Site, Merchant Tools → Manage Firework → Firework Dashboard
Token Endpoint Auth Method: private_key_jwt
Access Token Format: JWT
Once you click Save, it will generate the API Client ID and you need to remember the password you set during client Registration, we will need it for the next step.
Step 6 : Firework API Configuration
To support the API Integration we need to enable the default site locale.
Merchant Tools > Site Preferences > Locales
and select default
Please navigate to Select Site Merchant Tools → Manage Firework → Firework Dashboard
ClientID and Password you already generated in STEP 5 will be used here.
How to find a Shortcode & Organization ID
Please navigate to Administration → Site Development → Salesforce Commerce API Settings
We need to get the Short code and Org ID to enable the SFCC API Communication.
Step 7 : Load Firework Dashboard
Navigate to Merchant Tools → Manage Firework → Firework Dashboard
It will ask you to Login to Your Firework Business Account.
Please enter your Firework email address and One time Passcode
After that you will be redirected to Select the Existing Business or create a new Business. After this selection you will land on the Salesforce Product Feed / Import tool page
Here is the video guide on how to login to a Firework account.
https://drive.google.com/file/d/1Hyoc6VSLT5LwhXGM7M4SYcrj_oP9RGBv/view?usp=sharing
You will land on the Salesforce Product Feed / Import tool page
When you click Import you will get a list of all products from your salesforce store.
From here you can import products directly from your salesforce store to Firework business store.
Step 8 : Add Firework Widget to Storefront through Page Designer
Navigate to Merchant Tools → Content → Page Designer
Select your Page which you want to add Widget to
You can select the layout from the Firework Components
Select the Channel and Playlist from the Widget Settings
Click Save and Close, you can see the Carousel Widget added to the Page.
The Firework widgets, being asynchronous, gracefully degrades and don’t block the loading of any page element.
Step 9 (optional): Steps to Add Integration script Manually to Common HTML header
Note: Perform these steps only if you are not using page designer and manually adding html embed to your web pages
Here are the instructions for manually adding the Firework Player widget to your SFCC (Salesforce Commerce Cloud) website:
Access your SFCC instance and navigate to the common header file:
Path: cartridges/app_storefront_base/cartridge/templates/default/common/htmlHead.isml
In the htmlHead.isml file, add the following code inside the tag:
After the section, add the following JavaScript code:
Add the Firework Player widget scripts below the previous code:
Save the changes to the htmlHead.isml file.
Push the updated code to your SFCC instance.
Test the website to ensure that product hydration and cart hydration are enabled with the Firework Player widget.
By following these steps, you will successfully add the Firework Player widget and integrate it with Salesforce Commerce Cloud on your website.
Step 10 : Enable Purchase Tracking
In order to enable purchase tracking for your Salesforce Commerce Cloud cartridge, please follow the instructions below:
Download the latest version of the cartridge code.
Locate the "confirmation.isml" file in your code base. You can find it at: /app_storefront_base/cartridge/templates/default/checkout/confirmation/confirmation.isml.
Open the "confirmation.isml" file and insert the following snippet at an appropriate location within the file:
Deploy Cartridge to your Salesforce Commerce Cloud Instance.
To activate purchase tracking, navigate to Merchant Tools > Site Preferences > Custom Site Preference Groups > Firework Dashboard Configuration.
Locate the "Activate Purchase Tracking" setting and set it to "Yes".
Save the configuration.
By following these steps, you will successfully insert the tracking script on the "confirmation.isml" file and activate purchase tracking for your Salesforce Commerce Cloud cartridge.
Step 11 : Enable Native / Instant Checkout
SFCC OPEN API Shop Data Set
Please set this data set into SFCC admin panel to access the OCAPI to enable the Instant / Native Cart Checkout
Navigate to
Administration > Site Development > Open Commerce API Settings
Just replace {{your_client_id}}
Last updated