---
schema_version: "1"
id: d68191d5ce2f06245c5f39ed537f7659a6f8a042ad7f420c2f3ee08533c4b981
title: cpq-product-item (template)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_cpq_product_item__template_.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_cpq_product_item__template_.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: a989cce041bf5b15b4b88519fe2d3b6d3636edccb9cb14dae772cb2d9e6a099f
description: The cpq-product-item template provides the structure for each product in the product list in the cart.
products:
  - Communications
  - Media
  - Energy and Utilities
release: "264"
---
# 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.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/salesforce_cpqcart_productinproductlist.jpg)

**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>
```