Salesforce Commerce Cloud B2C Commerce Cartridge for Headless implementation

This guide provides detailed instructions for implementing a custom frontend using OCAPI's Cloudinary customizations.

Salesforce Commerce Cloud PWA Kit setup

Product Gallery and Video Player

If you have an existing SFCC PWA Kit storefront, implement the following code changes to integrate Cloudinary's Product Gallery and Video Player within your application.

Locate the necessary code snippets for each component within the app/components directory of the cloudinary_sfcc_pwa-kit GitHub repository. Comments such as {/** Cloudinary Custom Code Starts */} within the GitHub files indicate the relevant Cloudinary custom code.

Additional PWA Kit components

• Cloudinary-content-asset (located at app/components/cloudinary-content-asset) is used for rendering content assets.

• Cloudinary-content-slots (located at app/components/cloudinary-content-slots) is used for rendering content slots.

• Cloudinary-image-gallery (located at app/components/cloudinary-image-gallery) is used for rendering Cloudinary image galleries on a PDP.

• Cloudinary-image-swatches (located at app/components/cloudinary-image-swatches) is used for rendering Cloudinary swatches on a PDP.

• Cloudinary-lineItem-image (located at app/components/cloudinary-lineItem-image) is used for rendering Cloudinary images on the cart, checkout, order confirmation, order history, and order detail pages.

• Cloudinary-plp-images (located at app/components/cloudinary-plp-images) is used for rendering Cloudinary images on a PLP.

• Cloudinary-product-video (located at app/components/cloudinary-product-video) is used for rendering Cloudinary videos on a PDP.

• Cloudinary-widgets (located at app/components/cloudinary-widgets) is used for rendering Cloudinary galleries on a PDP.

• item-variant/cld-item-image.jsx (located at app/components/item-variant/cld-item-image.jsx) is used to call the Cloudinary component to render Cloudinary images on the cart, checkout, order confirmation, order history, and order detail pages.

Setup for other frontend implementations

To integrate Cloudinary's Product Gallery and Video Player into your frontend application, for any frontend implementation besides the Salesforce Commerce Cloud PWA Kit, you must include the following Cloudinary scripts.

Product Gallery and Video Player scripts

To integrate Cloudinary's Product Gallery and Video Player into your frontend application, add the following JavaScript code:

Product Gallery scripts

To render the Cloudinary Product Gallery, add the following JavaScript code:

Make sure to include a <div> with the <id> "cld-gallery" in your HTML code to indicate where the Cloudinary Product Gallery should be rendered:

Video Player scripts

To render Cloudinary videos, add the following JavaScript code:

OCAPI endpoints

With the B2C Commerce Cartridge for Headless cartridge configured, the standard OCAPI endpoints return Cloudinary objects with data about product media, in addition to the usual responses. You can use that information to embed Cloudinary components in your composable storefront.

This chart summarizes the additional Cloudinary data that each endpoint returns, and links to more detailed descriptions:

product

Returns the images, image gallery and videos from Cloudinary to be displayed on the Product Details page of a specified product.

For detailed information about this endpoint including the non-Cloudinary information included in the response, see Products resource in the B2C Commerce documentation.

Syntax

GET http://hostname:port/dw/shop/v21_10/products/{id}

Response details

product_search

Returns the product image search results to be displayed on the Product Listing page (PLP).

For detailed information about this endpoint including the non-Cloudinary information included in the response, see ProductSearch resource in the B2C Commerce documentation.

Syntax

GET http://hostname:port/dw/shop/v21_10/product_search

Response details

search_suggestion

For detailed information about this endpoint including the non-Cloudinary information included in the response, see Search Suggestions in the B2C Commerce documentation.

Syntax

POST http://hostname:port/dw/shop/v21_10/search_suggestion

Response details

baskets

Returns the Cloudinary images in the baskets on the Cart and Checkout pages.

For detailed information about this endpoint including the non-Cloudinary information included in the response, see Baskets resource in the B2C Commerce documentation.

Syntax

POST http://hostname:port/dw/shop/21_10/baskets/{basket_id}/items

Response details

orders

If you're using a non-headless frontend implementation, then you can use this hook to render Cloudinary images on basket product line items.

For detailed information about this endpoint including the non-Cloudinary information included in the response, see Baskets resource in the B2C Commerce documentation.

Syntax

GET http://hostname:port/dw/shop/v21_10/orders/{order_no}

Response details

Customizations

Customizations are hooks for triggering actions on different page types.

This table lists the customizations that are available per page type and describes how each script is mainly used:

Non-product related assets

Cloudinary provides endpoints for rendering content assets and content slots that aren't related to a particular product. These endpoints must be triggered from the frontend when using PWA or any other type of frontend implementation.

The endpoint to obtain the Content Asset:

The endpoint to obtain the Content Slot: