Programmable Media
Digital Asset Management
Code changes for SFRA and SiteGenesis
Last updated: Sep-26-2023
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.
On this page:
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:
Note
You may need to run npm install first.| 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
-
You need to send all the required
pdictvariables used in the included templates from the controller to make the Cloudinary widgets function correctly. For reference, take a look at theProduct-Showcontroller being extended in the int_cloudinary_sfra cartridge. -
This template can also be used on other pages but make sure you send all required
pdictvariables 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:
Note
You may need to run npm install first.Client-side JavaScript files
| 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
| 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
| 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
| 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.
✖️
Error
Rate this page:
