More Products

Code changes for SFRA and SiteGenesis

Last updated: Jul-11-2024

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:

Note
You may need to run npm install first.

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:

Note
You may need to run npm install first.

Client-side JavaScript files

Controllers

Templates

Server-side script files

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.

✔️ Feedback sent!

Rate this page: