Quickly connect your SalesForce B2C Commerce API to your Builder.io content.
To get the most out of this document, make sure:
Setup Salesforce Commerce API Access: visit the Salesforce guide, Setup API Access, to make sure you already have your Shopper Login and API Access Service (SLAS) client setup.
On any Builder Space:
- Go to Plugins.
- On the Salesforce B2C Commerce API integration, toggle the switch to the On position.
- The browser should refresh the page; however, you might have to do it manually. Once refreshed, the toggle is set to on and you should get a prompt to configure the plugin. Click Configure button.
- In the modal that opens, you'll be prompted to enter the Client ID and password, library name, API path, preview library name (optional), and the preview path (optional).
- Click the Connect button.
The screenshot below shows the SFCC plugin modal:
Tip: If you're using Salesforce's Composable Storefront kit, refer to the configuration in your config/default.js file.
Custom targeting in Builder.io allow users to target content by a multitude of attributes, and in this plugin you'll be able to add specific content from SFCC products, for this you'll need first to set the target attributes on the host site, either by setting the userAttributes if you're rendering client side:
// example for fetching content specific for a product in a product details page
const productFooterContent = await builder.get('product-footer', {
userAttributes: {
product: product.productId,
}
})Or by passing it as a query param to the content API call, or in graqhql query for e.g in Gatsby or nextjs.
Once you install the plugin, you will also be able to use the SFCC types as inputs for your components, such as:
SFCommerceProductwhen used as an input type, you will be able to search and select a specific Product to provide to your component and consume the product data however you want from inside the component.SFCommerceCategorywhen used as an input type, you will be able to search and select a specific category of products to provide to your component, as example you can fetch products from a specific category from inside your component.SFCommerceProductsListwhen used as an input type, it enables users to select multiple products to provide to your component. As an example you can select multiple products and display them on a grid.SFCommerceCategoriesListwhen used as an input type enables users to select multiple categories to provide to your component.
Example of a custom component called 'ProductBox' that receives a SFCommerceProduct as input:
import React from 'react'
import {Builder} from '@builder.io/react'
import ProductBox from './ProductBox' // this is your component with it's logic
Builder.registerComponent(ProductBox, {
name: 'ProductBox',
image: 'https://unpkg.com/css.gg@2.0.0/icons/svg/box.svg',
inputs: [
{
name: 'productRef',
friendlyName: 'Product',
type: 'SFCommerceProduct',
required: true
}
]
})To see more details about the usage of this component see here.
To understanding more about custom components also see this article.
On our docs, you can check more about how to fetch content from builder.io and also see how the option includeRefs=true works, fecthing any specific content from a given reference, such as a chosen SFCommerceProduct in the example above to support server side rendering.
In an effort to support SSR and making sure all the input data are available at the time of render, Builder’s support the resolving of the inputs for your custom components, for example if you have a product box with input of SFCommerceProduct you can get the json value of that product by passsing includeRefs: true when you fetch the content json:
const page = await builder.get('page', {
url: '...',
options: {
includeRefs: true
}
})Also passing the same option to the rendering component to auto-resolve while editing:
<BuilderComponent model="page" options={{ includeRefs: true}} content={page} />For more information on the available options check our Content API documentation.
