> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Salesforce Commerce Cloud B2C Commerce Cartridge for Headless configuration


This guide provides detailed instructions for configuring the cartridge and setting up Salesforce's OCAPI to retrieve information from Cloudinary.

## Prerequisites

1. Make sure you've configured either the [B2C Commerce Cartridge for SFRA or SiteGenesis](sfcc_site_cartridge_setup). 

2. Import the `int_cld_headless` using the [Import dialog for SFRA or SiteGenesis](sfcc_site_cartridge_setup#import_dialog).

3. Add the `int_cld_headless` cartridge to the Settings tab of the **Administration > Sites > Manage Sites** page for [SFRA or SiteGenesis](sfcc_site_cartridge_setup#configure_settings). 

## Set up the Shop API resource for OCAPI

If you've already set up the Shop API resource, you can use your current configuration. Follow the instructions and use the sample configuration below only if you're setting up Shop API for the first time.

> **NOTE**: Make sure you have Shop API version 19.1 or later configured for the most effective use of the cartridge.

**To add the Shop API resource**:

1. 	On the target site, go to **Administration** > **Site Development** > **Open Commerce API Settings**.
2. 	From the **Select Type** drop-down, select **Shop**.
3. 	From the **Select Context** drop-down, select the appropriate context, for example, Global (organization-wide) or Site-specific.
4. 	Enter the OCAPI data API resources provided in the `ocapi-configurations.json` file in the `documentation` folder.
    
    Sample JSON:

    ```json
    {
	"_v": "21.10",
	"clients": [
		{
			"client_id": "aaaaaaaaaaaaaaaaaaaaaaaa",
			"allowed_origins": [],
			"resources": [
				{
					"resource_id": "/products/*/prices",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*",
					"methods": [
						"get",
						"patch",
						"delete"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/billing_address",
					"methods": [
						"put"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/coupons",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/coupons/*",
					"methods": [
						"delete"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/customer",
					"methods": [
						"put"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/gift_certificate_items",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/items",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/items/*",
					"methods": [
						"patch",
						"delete"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/notes",
					"methods": [
						"post",
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/payment_instruments",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/payment_instruments/*",
					"methods": [
						"patch",
						"delete"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/payment_methods",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/shipments",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/shipments/*",
					"methods": [
						"patch"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/shipments/*/shipping_address",
					"methods": [
						"put"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/shipments/*/shipping_method",
					"methods": [
						"put"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/baskets/*/shipments/*/shipping_methods",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/orders",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/orders/*",
					"methods": [
						"get",
						"patch"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/content/{id}",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/content_search",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/orders/*/notes",
					"methods": [
						"get",
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/orders/*/payment_methods",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/orders/*/payment_instruments",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/order_search",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/products/*",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/products/*/availability",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)",
					"cache_time": 0
				},
				{
					"resource_id": "/products/*/prices",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)",
					"cache_time": 0
				},
				{
					"resource_id": "/orders",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/orders/*",
					"methods": [
						"get",
						"patch"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/orders/*/notes",
					"methods": [
						"get",
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/orders/*/payment_methods",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/orders/*/payment_instruments",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/order_search",
					"methods": [
						"post"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/site",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/categories/*",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				},
				{
					"resource_id": "/stores",
					"methods": [
						"get"
					],
					"read_attributes": "(**)",
					"write_attributes": "(**)"
				}
			]
		}
	]
}
```

1. 	Update the client_id with the one you generated from the Commerce Cloud Account Manager.
    > **NOTE**: You can generate a new client ID and password by logging in to the [Commerce Cloud Account Manager](https://help.salesforce.com/s/articleView?id=cc.b2c_account_manager_add_api_client_id.htm&type=5).
2. 	Click **Save**.

## Salesforce Commerce Cloud composable storefront

To build your frontend using the Salesforce Commerce Cloud PWA Kit or any other front end framework, add the `int_cloudinary_headless:int_cloudinary` cartridges in the cartridge path for the sandbox.

![Open Commerce API Settings](https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/bo_1px_solid_black/v1681917052/docs/integrations/b2c_headless_add_cartridge.png "thumb:c_scale,w_600/dpr_2.0, width:600, with_code:false, with_url:false, popup:true")

> **NOTE**: For more information about the Salesforce Commerce Cloud PWA Kit, see SFCC's Composable Storefront [documentation](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pwa-kit-overview.html).