cpq-product-item (template)

The cpq-product-item template provides the structure for each product in the product list in the cart.

In Salesforce Industries Communications, Media, and Energy Summer '18,cpq-product-item has been changed:

Provides multi-language support to translate Product Name.
Provides multi-language support to translate price list entry text for RecurringPrice__c, UnitPrice, and OneTimeLoyaltyPrice__c.

Template Type

Cards

Code

HTML, CSS/SCSS

Image

An item in the Products list, with Recurring Price, List Price, and an Add to Cart button.

Upgrade from Vlocity CME Winter '18 to Vlocity CME Summer '18

When upgrading from Salesforce Industries Communications, Media, and Energy Winter '18 to Salesforce Industries Communications, Media, and Energy Summer '18, you must make the following changes to the HTML in the Card Designer.

First Change

<div class="slds-col slds-small-size_10-of-12 slds-medium-size_10-of-12 slds-large-size_10-of-12">
  <p class="slds-tile__title slds-truncate cpq-product-name"> {{::obj.Name.value}}</p>
</div>
<div class="slds-col slds-small-size_10-of-12 slds-medium-size_10-of-12 slds-large-size_10-of-12">
  <p class="slds-tile__title slds-truncate cpq-product-name" cpq-translate="Product2.Name">{{::obj.Name.value}}</p>
</div>

Second Change

<span class=""slds-text-body_small"">
{{::importedScope.getPriceValue(obj, importedScope.nsPrefix+'RecurringPrice__c')}}
</span>
<span class=""slds-text-body_small"" cpq-translate=""PriceListEntry.DisplayText"">
{{::importedScope.getPriceValue(obj, importedScope.nsPrefix+'RecurringPrice__c')}}
</span>

Third Change

<span class="slds-text-body_small">
{{::importedScope.getPriceValue(obj, 'UnitPrice')}}
</span>
<span class="slds-text-body_small" cpq-translate="PriceListEntry.DisplayText">
{{::importedScope.getPriceValue(obj, 'UnitPrice')}}
</span>

Fourth Change

<span ng-if="::obj[$root.nsPrefix + 'OneTimeLoyaltyPrice__c']">
  <span class="slds-text-body_small">&nbsp;{{::importedScope.customLabels.CPQOr}}</span>
  <span class="slds-text-body_small cpq-loyalty-points">&nbsp;{{::obj[$root.nsPrefix + 'OneTimeLoyaltyPrice__c'].value}}</span>
  <span class="slds-text-body_small cpq-loyalty-points">{{::obj.LoyaltyCode}}</span>
</span>
<span ng-if="::(obj[$root.nsPrefix + 'OneTimeLoyaltyPrice__c'].value || obj.LoyaltyCode)">
  <span class="slds-text-body_small">&nbsp;{{::importedScope.customLabels.CPQOr}}&nbsp;</span>
  <span class="slds-text-body_small cpq-loyalty-points" cpq-translate="PriceListEntry.DisplayText">{{::(obj[$root.nsPrefix + 'OneTimeLoyaltyPrice__c'].value || obj.LoyaltyCode) }}</span>
</span>

Fifth Change

<span class="slds-text-body_small cpq-loyalty-points">
{{::obj.LoyaltyCode}}
</span>
<span class="slds-text-body_small cpq-loyalty-points" cpq-translate="PriceListEntry.DisplayText">
{{::(obj[$root.nsPrefix + 'OneTimeLoyaltyPrice__c'].value || obj.LoyaltyCode) }}
</span>

Sixth Change

<li ng-repeat="msg in obj.messages" class="slds-p-vertical_xx-small">
  <span class="cpq-error-msg" ng-if="msg.severity === 'ERROR'">{{msg.message}}</span>
  <span class="cpq-warning-msg" ng-if="msg.severity !== 'ERROR'">{{msg.message}}</span>
</li>
<li ng-repeat="msg in obj.messages" class="slds-p-vertical_xx-small">
  <span class="cpq-error-msg" ng-if="msg.severity === 'ERROR'" cpq-translate="Product2.Name">{{msg.message}</span>
  <span class="cpq-warning-msg" ng-if="msg.severity !== 'ERROR'" cpq-translate="Product2.Name">{msg.message}</span>
</li>