> ## 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.

# Code changes for SFRA and SiteGenesis


There are a number of code changes required to integrate Cloudinary into your Storefront application code. It's important to note that most of the code changes for this integration will be focused on the templates used for the frontend. These templates govern the visual presentation and functionality of your SFCC B2C Commerce store. By leveraging Cloudinary's features, you can efficiently manage and optimize your media assets such as images and videos within these templates.

## Code changes for SFRA

You can find all the changes in the **cloudinary_sfra_changes** cartridge. 

Extra lines of code are  either within  `// Custom Start` and `// Custom End` comments, or have an inline comment starting `// Custom`. 

### JavaScript changes

To compile the JavaScript changes, run:

```
npm run js
```

> **NOTE**: You may need to run `npm install` first.

{table:class=sfcc-metadata-table}File | Lines | Description
--|--|--
templates/default/common/htmlHead.isml | 49 - 51 | Include Cloudinary static libs for displaying widgets on different pages.
templates/default/product/productDetails.isml | 31 - 39 | Display the Product Gallery on Product Detail Pages. 1
templates/default/product/productDetails.isml | 141 - 146 | Display the Cloudinary Video Player on Product Detail Pages. 1
templates/default/product/components/variationAttribute.isml | 23 - 38 | Load product swatch images from Cloudinary on Product Listing Pages. 
templates/default/product/components/productTileImage.isml | 4 - 28 | Load product tile images from Cloudinary on Product Listing Pages.2
templates/default/product/components/productTileSwatch.isml | 7 - 31 | Load product tile swatch images from Cloudinary on Product Listing Pages.2
templates/default/product/quickView.isml | 9 - 20 | Load the Cloudinary Product Gallery in the Quick View modal.
templates/default/product/setDetails.isml | 9 - 13 | Load the Cloudinary Product Gallery on the Product Set Page.
templates/default/product/setDetails.isml | 49 - 54 | Load the Cloudinary Video Player on the Product Set Page.
templates/default/product/components/setItems.isml | 22 - 29 | Add the Cloudinary Product Gallery.
templates/default/product/bundleDetails.isml | 9 - 13 | Add the Cloudinary Product Gallery on the Product Bundle Page.
templates/default/product/bundleDetails.isml | 43 - 50 | Add the Cloudinary Product Gallery on the Product Bundle Page.
templates/default/product/bundleDetails.isml | 73 - 78 | Add the Cloudinary Video Player on the Product Bundle Page.
templates/default/product/components/bundleItem.isml | 19 - 26 | Add the Cloudinary Product Gallery on the Product Bundle Page.
templates/default/search/searchResultsNoDecorator.isml | 9 - 15 | Load a category banner image from Cloudinary on the Product Listing Page.
templates/default/search/suggestions.isml | 32 - 51 | Load a suggested product image from Cloudinary on the Search.
templates/default/checkout/productCard/productCard.isml | 17 - 40 | Load a product image from Cloudinary on the Checkout and Order Confirmation Pages. 
templates/default/cart/productCard/cartProductCardBundledItems.isml | 8 - 32 | Load a bundle product image from Cloudinary on the Cart Page. 
templates/default/cart/productCard/cartProductCard.isml | 14 - 34 | Load a product image from Cloudinary on the Cart Page.
templates/default/slots/category/catLandingBanner.isml | 4 - 7 | Load a top level category banner image from Cloudinary on the page.
templates/default/slots/category/catLandingBanner.isml | 11 - 23 | Load a top level category banner image from Cloudinary on the page.
templates/default/slots/category/categoryTile.isml | 5 - 8 | Load category tile images from Cloudinary on the page.
templates/default/slots/category/categoryTile.isml | 20 - 49 | Load category tile images from Cloudinary on the page.
templates/default/product/components/imageCarousel.isml | 14 - 30 | Load PDP images from Cloudinary when the Product Gallery is disabled.
templates/default/product/components/imageCarousel.isml | 34 - 52 | Load PDP images from Cloudinary when the Product Gallery is disabled.

> **NOTES**:
>
> 1. You need to send all the required `pdict` variables used in the included templates from the controller to make the Cloudinary widgets function correctly. For reference, take a look at the `Product-Show` controller being extended in the **int_cloudinary_sfra** cartridge.
> 2. This template can also be used on other pages but make sure you send all required `pdict` variables from the respective controllers.

### Cloudinary script APIs

The cartridge includes low level script APIs that are used by the cartridge itself to fetch assets from Cloudinary and apply transformations on the URLs. You can also use the APIs to customize the cartridge according to your needs, or make use of them in your own custom cartridges. Each of the methods has documentation in the code that explains the method's usage.

* **cloudinaryApi**: Use this API to communicate directly with Cloudinary APIs to fetch different types of assets and apply transformations on the URLs.
* **cloudinaryTransformationApi**: Use this API to provide transformations specified on several levels for different types of assets.

### Site version for Cloudinary Test Suite

The cartridge, **int_cloudinary_testsuite**, is used to test script APIs that directly communicate with Cloudinary web services. To make it work for SiteGenesis, open **cloudinaryConstants.js** and set `SITE_VERSION_FOR_TEST_SUITE` to `sfra`.

## Code changes for SiteGenesis

You can find all the changes in the **cloudinary_sg_changes** cartridge. 

Extra lines of code are  either within  `// Custom Start` and `// Custom End` comments, or have an inline comment starting `// Custom`. 

### JavaScript changes

To compile the JavaScript changes, run:

```
npm run js
```

> **NOTE**: You may need to run `npm install` first.

### Client-side JavaScript files

{table:class=sfcc-metadata-table}File | Lines | Description
--|--|--
js/pages/product/addToCart.js | 53 - 57 | Make Cloudinary images responsive
js/pages/product/image.js | 15 - 33 | Update loadZoom  
js/pages/product/image.js | 43 - 65 | Update main
js/pages/product/image.js | 76 - 83 | Replace pinterest button URL
js/pages/product/image.js | 88 - 101 | Update the Cloudinary Product Gallery Widget 
js/pages/product/variant.js | 43 - 67 | Update hover event 
js/pages/product/productSet.js | 6 | Require image module to render the Cloudinary Product Gallery Widget 
js/pages/product/productSet.js | 40 - 42 | Render the Cloudinary Product Gallery Widget
js/pages/search.js | 66 - 70 | Make Cloudinary images responsive
js/product-tile.js | 32 - 36 | Make Cloudinary images responsive
js/product-tile.js | 62 - 67 | Make Cloudinary images responsive
js/product-tile.js | 88 - 93 | Make Cloudinary images responsive
js/product-tile.js | 119 - 124 | Make Cloudinary images responsive
js/quickview.js | 69 - 76 | Render the Cloudinary Product Gallery Widget
js/quickview.js | 115 - 122 | Render the Cloudinary Product Gallery Widget
js/searchsuggest.js | 139 - 143 | Make Cloudinary images responsive

### Controllers

{table:class=sfcc-metadata-table}File | Lines | Description
--|--|--
controllers/Cart.js | 20 - 22 | Require the cloudinaryConstants script module
controllers/Cart.js | 279 - 287 | Add the Cloudinary object
controllers/Cart.js | 314 - 321 | Add the Cloudinary object
controllers/COBilling.js | 82 - 91 | Add the Cloudinary object
controllers/COBilling.js | 628 - 637 | Add the Cloudinary object
controllers/COShipping.js | 110 - 119 | Add the Cloudinary object
controllers/COShippingMultiple.js | 52 - 61 | Add the Cloudinary object
controllers/COShippingMultiple.js | 145 - 154 | Add the Cloudinary object
controllers/COSummary.js | 48 - 57 | Add the Cloudinary object
controllers/Product.js | 16 - 20 | Require the Cloudinary script modules
controllers/Product.js | 37 - 56 | Add the Cloudinary object
controllers/Product.js | 90 - 115 | Load Cloudinary assets
controllers/Product.js | 168 - 177 | Add the Cloudinary object
controllers/Product.js | 296 - 316 | Load Cloudinary assets
controllers/Product.js | 433 - 459 | Load Cloudinary assets

### Templates

{table:class=sfcc-metadata-table}File | Lines | Description
--|--|--
templates/default/checkout/cart/cart.isml | 6 - 12 | Check if Cloudinary is enabled and require scripts
templates/default/checkout/cart/cart.isml | 175 - 207 | Fetch a Cloudinary image
templates/default/checkout/cart/cart.isml | 385 - 412 | Add a Cloudinary image
templates/default/checkout/components/minilineitems.isml | 45 - 50 | Check if Cloudinary is enabled and require scripts
templates/default/checkout/components/minilineitems.isml | 85 - 140 | Fetch a Cloudinary image
templates/default/checkout/shipping/multishipping/multishippingaddresses.isml | 36 - 65 | Render a Cloudinary image
templates/default/checkout/shipping/multishipping/multishippingshipments.isml | 116 - 145 | Load a Cloudinary image
templates/default/checkout/summary/summary.isml | 55 - 84 | Render a Cloudinary image
templates/default/components/header/htmlhead.isml | 95 - 97 | Include Cloudinary static libs
templates/default/product/components/productsetproduct.isml | 8 - 23 | Add Cloudinary Product Gallery Widget and skip thumbnail
templates/default/product/components/productsetproduct.isml | 99 - 105 | Add Cloudinary data attribute to be accessed from JS
templates/default/product/components/recommendations.isml | 39 - 68 | Render a Cloudinary image
templates/default/product/components/variations.isml | 47 - 52 | Add Cloudinary swatch images
templates/default/product/components/variations.isml | 54 - 72 | Add Cloudinary swatch images
templates/default/product/lastvisited.isml | 11 - 13 | Add Cloudinary page type as query param
templates/default/product/productcontent.isml | 278 - 285 | Add Cloudinary data attribute to be accessed from JS
templates/default/product/producttile.isml | 29 - 33 | Load the Cloudinary tile wrapper 
templates/default/product/producttile.isml | 53 - 61 | Cloudinary product tile image  
templates/default/product/producttile.isml | 101 - 109 | Cloudinary product tile image
templates/default/product/producttile.isml | 146 - 159 | Cloudinary product tile image attributes
templates/default/product/producttile.isml | 329 - 342 | Add Cloudinary product swatch/thumbnail image attributes
templates/default/product/producttile.isml | 378 - 393 | Add Cloudinary swatch image and attributes
templates/default/product/producttopcontent.isml | 14 - 26 | Add Cloudinary Product Gallery Widget
templates/default/product/producttopcontent.isml | 27 - 34 | Cloudinary Video Player
templates/default/product/producttopcontentPS.isml | 11 - 15 | Add Cloudinary product set/bundle styles
templates/default/product/producttopcontentPS.isml | 54 - 114 | Skip SG product set/bundle primary images carousel
templates/default/product/producttopcontentPS.isml | 199 - 206 | Cloudinary Video Player
templates/default/search/productgrid.isml | 12 - 16 | Add Cloudinary query params
templates/default/search/productnav.isml | 70 - 90 | Add Cloudinary primary image
templates/default/search/productnav.isml | 136 - 152 | Add Cloudinary image and attributes
templates/default/search/productnav.isml | 163 - 179 | Add Cloudinary image and attributes
templates/default/search/suggestions.isml | 26 - 33 | Check if Cloudinary is enabled and require scripts 
templates/default/search/suggestions.isml | 84 - 92 | Fetch a Cloudinary image 
templates/default/search/suggestions.isml | 96 - 116 | Add a Cloudinary image 
templates/default/slots/category/cat-banner.isml | 10 - 34 | Add a Cloudinary product image
templates/default/slots/product/homerightcarousel.isml | 12 - 29 | Build a Cloudinary object
templates/default/slots/product/product_listing.isml | 5 - 17 | Build a Cloudinary object
templates/default/slots/product/product_listing.isml | 24 - 31 | Pass the Cloudinary object to the product tile
templates/default/slots/category/category-tile.isml | 8 - 11 | Add Cloudinary constants
templates/default/slots/category/category-tile.isml | 17 - 45 | Cloudinary image customizations
templates/default/slots/category/catlanding-banner.isml | 8 - 11 | Add Cloudinary constants
templates/default/slots/category/catlanding-banner.isml | 16 - 43 | Cloudinary image customizations
templates/default/product/components/productimages.isml | 20 - 28 | Cloudinary integration
templates/default/product/components/productimages.isml | 51 - 63 | Cloudinary integration
templates/default/product/components/productimages.isml | 66 - 136 | Cloudinary integration

### Server-side script files

{table:class=sfcc-metadata-table}File | Lines | Description
--|--|--
scripts/product/VariationUtils.js | 7 - 10 | Cloudinary script modules
scripts/product/VariationUtils.js | 268 - 281 | Add a Cloudinary swatch image
scripts/search/ProductGridUtils.ds | 66 - 68 | Export module

### Cloudinary script APIs

The cartridge includes low level script APIs that are used by the cartridge itself to fetch assets from Cloudinary and apply transformations on the URLs. You can also use the APIs to customize the cartridge according to your needs, or make use of them in your own custom cartridges. Each of the methods has documentation in the code that explains the method's usage.

* **cloudinaryApi**: Use this API to communicate directly with Cloudinary APIs to fetch different types of assets and apply transformations on the URLs.
* **cloudinaryTransformationApi**: Use this API to provide transformations specified on several levels for different types of assets.

### Site version for Cloudinary Test Suite

The cartridge, **int_cloudinary_testsuite**, is used to test script APIs that directly communicate with Cloudinary web services. To make it work for SiteGenesis, open **cloudinaryConstants.js** and set `SITE_VERSION_FOR_TEST_SUITE` to `sitegenesis`.