In B2C Commerce, the open-source dis-product-image-wrapper project helps some Salesforce Reference Architecture (SFRA) and SiteGenesis projects centralize product image parameters and use JavaScript helpers. It isn’t a required replacement for URLUtils and MediaFile.
In B2C Commerce, the project documents a plugin_dis cartridge, JSON configuration of view types (for example, large, medium, and small dimensions), and a helper such as ProductImageDIS to obtain image objects in Internet Store Markup Language (ISML). Behavior and file names in the repository can change between releases. Use the current README and wiki on the repository, not a printed line number or path from an older document.
Repository and Access
In B2C Commerce, use the current repository and wiki.
Access can require a GitHub account, two-factor authentication, and Commerce community processes described in the repository. Follow the instructions there when they change. Don’t copy credential steps from an outdated PDF or guide.
SFRA Enablement
In B2C Commerce, the current repository documentation supersedes this outline. Steps that use plugin_dis, ProductImageDIS.js, or image_config_DIS.json describe the typical community layout at the time of writing. File names and locations can change.
Clone the current repository from GitHub.
Click App Launcher, and then select Administration > Sites > Manage Sites. Add plugin_dis to the cartridge path before app_storefront_base. For example: app_mystorefront:plugin_dis:app_storefront_base.
Configure view types and dimensions in a JSON file such as image_config_DIS.json under a cartridge you own. A typical file defines view types (for example large, medium, small, and swatch), optional viewTypeMapping so smaller view types derive from a larger source, and missingImages fallbacks.
Upload high-resolution source images (for example, 2400 by 2400 pixels for product hero images) with Assign Images to Products. Don’t use Import & Export to assign a product image. Use Import & Export Products and Catalogs only for a bulk catalog import, and only when the repository documents that path. Associate each image with a view type on the catalog, such as large.
In ISML, call the project’s helper, for example ProductImageDIS.getImage(product, viewType, index), and use the returned object’s getURL(), alt, and title properties when writing the img tag.
Verify that generated URLs use your storefront vanity domain, include /dw/image/v2/ where a transform applies, and match the sizes you configured. See Troubleshooting and Migration if a request returns 4xx, a timeout, or a broken image.
SiteGenesis Enablement
In B2C Commerce, SiteGenesis projects follow the same cartridge install, but template updates are manual. Example cartridge path: app_mystorefront:plugin_dis:sitegenesis_controllers:sitegenesis_core. Update product image calls in the storefront templates the wiki lists. High-traffic templates typically include the product detail page, product tile, cart and mini-cart, checkout summary, and product email. Prefer a pattern-based replacement. Look for the existing image lookup and replace it with a call that goes through the helper, rather than line-number instructions from an older implementation guide, because the base SiteGenesis templates have changed.
j