Highlighting Parts in the Shopping Cart
You can use simple code snippets to highlight parts in the shopping cart once a part line item or image gets loaded for the first time. The following image depicts how the parts are highlighted if you customize using the code snippets.
Following are the changes expected in the different files:
• partsListController.js—you can get the information about parts which are added or not added to the cart. In the method getDataHandler() if the attribute inCartQuantity > 0, then it indicates that the part is added to the cart, from which you can highlight the row and get the information about the callout number. An attribute itemNumber indicates the callout number in SCItem.
• calloutService.js—you can find various methods or events to highlight the callout or row. If appropriate method does not exist, you can register one of them.
• handleImageDirective.js—you can change the color of the callout in this directive.
The applicable code snippets for different operations that need to be performedare as follows:
1. Identify the part line items which are added in cart (check the Added to cart message).Snippet is as follows:
if(item.attributes.inCartQuantity > 0) { $
rootScope.addedPartInCart.push(item.attributes.itemNumber);
}
rootScope.addedPartInCart.push(item.attributes.itemNumber);
}
2. Add code to highlight the content (this is typically done in the callout service).Snippet to highlight content in call out service is as follows:
$("div[id^='hotspot^|^"+calloutNumber+"+']").css("borderWidth", "2px");
$("div[id^='hotspot^|^"+calloutNumber+"+']").css("borderColor", "RED");
$("div[id^='hotspot^|^"+calloutNumber+"+']").css("borderColor", "RED");
3. Call the service once the image and the line items are loaded to highlight the content.Snippet to invoke service is as follows:
if($rootScope.imageLoaded && $rootScope.addedPartInCart.length){
for(var i=0;i<$rootScope.addedPartInCart.length;i++){
if($rootScope.addedPartInCart && $rootScope.addedPartInCart.length > 0){
if($rootScope.addedPartInCart[i] && $rootScope.addedPartInCart[i]!=null){
calloutService.
rowAndCalloutHighlighted(
$rootScope.addedPartInCart[i]);
}
}
}
}
for(var i=0;i<$rootScope.addedPartInCart.length;i++){
if($rootScope.addedPartInCart && $rootScope.addedPartInCart.length > 0){
if($rootScope.addedPartInCart[i] && $rootScope.addedPartInCart[i]!=null){
calloutService.
rowAndCalloutHighlighted(
$rootScope.addedPartInCart[i]);
}
}
}
}
Understand the JavaScript APIs where the following functions are performed, and insert the above mentioned code snippet in those sections.
• Partslist page is completely loaded
• Remove Part from Shopping cart
• Switching illustrations on Partslist page illustration section
 | • Only parts added to currently active or selected cart are highlighted. User needs to change cart selection to view parts added to a different cart. • The feature is limited to the current loaded chunk and the current image reference. • This feature is applicable to the raster images only. It does not support SVG, PVZ, CGM, and others. |