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 are using React as your frontend on PWA KIT Headless, implement the following code changes on your PWA KIT to integrate Cloudinary's Product Gallery and Video Player to your application.

To implement each component in your app, you'll find the Cloudinary custom code within the app/components folder of the cloudinary_sfcc_site_cartridge repository. Look for comments indicating the Cloudinary custom code within the respective component files.

Additional PWA components

If you are using PWA technology, the following components are available:

• 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 technologies

To integrate Cloudinary's Product Gallery and Video Player into your frontend application, for any frontend technology 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 JavasScript 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 non-headless frontend technology, 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 technology.

The endpoint to obtain the Content Asset:

The endpoint to obtain the Content Slot: