For both the ScrollableMediaContentSpotlight-ATGSlot and ScrollableProductSpotlight-ATGSlot cartridges, you can choose to configure an application-specific missing image URL. For the ScrollableMediaContentSpotlight-ATGSlot cartridge, you can also choose to substitute a custom HTML template that renders application-specific properties.
Adding a Missing Image URL
The ScrollableMediaContentSpotlight-ATGSlot and ScrollableProductSpotlight-ATGSlot view models include a missingImagePath property. This property defines the URL for the image to render when the image for a carousel itemis missing. In order to add an application-specific missing image to the missingImagePath property, you must override the ScrollableMediaContentSpotlight-ATGSlot ScrollableMediaContentSpotlight-ATGSlot and ScrollableProductSpotlight-ATGSlot configuration in the application layer according to the instructions provided below.
Create a
CommerceAccelerator/Applications/application/Plugins/Spotlights/src/main/web-app/ScrollableMediaContentSpotlight-ATGSlot.jsfile with the following content, replacingapplicationwith the name of your custom application andmissing-image-pathwith the path to the missing image file.define([
'CSA.Plugins.Spotlights/ScrollableMediaContentSpotlight-ATGSlot',
'text!CSA.Applications.application.Plugins.Spotlights/
ScrollableMediaContentSpotlight-ATGSlot.html'
], function (oldScrollableMediaContentSpotlightATGSlotMixin, newTemplate)
{
'use strict';
return function scrollableMediaContentSpotlightATGSlotMixin
(vm, element) {
// Decorate viewModel (vm) with the (base) contentItem mixin
oldScrollableMediaContentSpotlightATGSlotMixin(vm, element);
vm.template = newTemplate;
vm.missingImagePath(
'missing-image-path');
return vm;
};
});Note that, in the code above, the mixin from the original view model,
CSA.Plugins.Spotlights/ScrollableMediaContentSpotlight-ATGSlot, is loaded so that the view model can be decorated with the original mixin decorations before the property values are overridden. Also, in order to handle rendering application-specific properties, a new HTML template is being used in the application layer. This new template is loaded and by overriding thetemplateproperty it is set as the template to use.Create a
CommerceAccelerator/Applications/application/Plugins/Spotlights/src/main/web-app/ScrollableProductSpotlight-ATGSlot.jsfile with the following content, replacingapplicationwith the name of your custom application andmissing-image-pathwith the path to the missing image file.define([
'CSA.Plugins.Spotlights/ScrollableProductSpotlight-ATGSlot',
'text!CSA.Applications.application.Plugins.Spotlights/
ScrollableProductSpotlight-ATGSlot.html'
], function (oldScrollableProductSpotlightATGSlotMixin, newTemplate) {
'use strict';
return function scrollableProductSpotlightATGSlotMixin (vm, element) {
// Decorate viewModel (vm) with the (base) contentItem mixin
oldScrollableProductSpotlightATGSlotMixin(vm, element);
vm.template = newTemplate;
vm.missingImagePath(
'missing-image-path');
return vm;
};
});Add new
ScrollableMediaContentSpotlight-ATGSlotandScrollableProductSpotlight-ATGSlotmappings toCommerceAccelerator/Applications/application/Plugins/Spotlights/src/main/web-app/main.js. Replaceapplicationin the code sample below with the name of your custom application.// Define local configurations
require.config({
paths: {
'CSA.Applications.application.Plugins.Spotlights/
ScrollableProductSpotlight-ATGSlot':
'bower_components/CSA.Applications.application.Plugins.Spotlights/
ScrollableProductSpotlight-ATGSlot',
'CSA.Applications.application.Plugins.Spotlights/
ScrollableMediaContentSpotlight-ATGSlot':
'bower_components/CSA.Applications.application.Plugins.Spotlights/
ScrollableMediaContentSpotlight-ATGSlot',
},
map: {
'*': {
'ScrollableProductSpotlight-ATGSlot':
'CSA.Applications.application.Plugins.Spotlights/
ScrollableProductSpotlight-ATGSlot',
'ScrollableMediaContentSpotlight-ATGSlot':
'CSA.Applications.application.Plugins.Spotlights/
ScrollableMediaContentSpotlight-ATGSlot',}
}
});Create a bower dependency to
CSA.Plugins.Spotlights, shown in the"dependencies"code block below, inCommerceAccelerator/Applications/application/Plugins/Spotlights/src/main/web-app/bower.json.{
"name": "CSA.Applications.application.Plugins.Spotlights",
"version": "1.0.0",
"ignore": [
"bower_components"
],
"dependencies": {
"CSA.Plugins.Spotlights":
"../../../../../Plugins/Spotlights/src/main/web-app"
},
"devDependencies": {
"es5-shim": "3.4.0",
"jasmine": "1.3.1"
}
}Edit the
CSA.Plugins.Spotlights/mainreference inCommerceAccelerator/Applications/application/src/main/web-app/main.jsto use a reference toapplication.Plugins.Spotlights/main. Replaceapplicationwith the name of your custom application.define([
// Load package dependency configurations
…
'bower_components/CSA.Applications.application.Plugins.Spotlights/main'
], function () {
'use strict';
Replacing the HTML Template for Media Content Spotlights
Applications that need to display application-specific properties for media contentspotlight items must replace the HTML template for the ScrollableMediaContentSpotlight-ATGSlot cartridge in the application layer. To do so, copy the CommerceAccelerator/Plugins/Spotlights/src/main/web-app/ScrollableMediaContentSpotlight-ATGSlot.html file to your CommerceAccelerator/Applications/application/src/main/web-app directory, then modify the carousel-inner div element to accommodate your application’s requirements.
