You are here:
Optional community DIS product image wrapper
The optional 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 from the B2C Commerce API.
For the recommended B2C Commerce path, see
Related Dynamic Imaging Service
Topics
and
Dynamic Imaging
Service
. For
URLUtils and
MediaFile reference, see
Script
API
. The sections below only describe the community cartridge.
What the community project provides
The GitHub project documents a
plugin_dis cartridge, JSON configuration of view types (for
example,
large / medium / 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
- Repository: SalesforceCommerceCloud / dis-product-image-wrapper on GitHub
- Wiki (when published): dis-product-image-wrapper wiki for template lists and project-specific changes
- 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 as authoritative.
SFRA enablement (summary)
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 . Add
plugin_disto the cartridge path beforeapp_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.jsonunder a cartridge you own. A typical file defines view types (for examplelarge,medium,small,swatch), optionalviewTypeMappingso smaller view types derive from a larger source, andmissingImagesfallbacks. - Upload high-resolution source images (for example, 2400 by 2400
pixels for product hero images). Click App Launcher , and then select . Associate each image with the source view type
(such as
hi-resorlarge). - In ISML, call the project's helper — for example
ProductImageDIS.getImage(product, viewType, index)— and use the returned object'sgetURL(),alt, andtitleproperties when writing theimgtag. - 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 (summary)
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 pattern-based replacement — look for the
existing image lookup and replace it with a call that goes through the helper — over
line-number-specific instructions from an older implementation guide, because the
base SiteGenesis templates have changed.
