cpq-product-cart-config (template)

The cpq-product-cart-config template provides the structure for the configuration panel in the cart.

In ​Salesforce Industries Communications, Media, and Energy Summer '18, cpq-product-cart-config has been changed.

• Disabled editing a text field when the order is active.

• Corrected the syntax of .#{$namespace}-error-msg in SCSS.

Template Type

Containers

Code

HTML, CSS/SCSS

Image

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 or CSS in the Card Designer.

HTML Change

In Winter '18, keep the following HTML:

<div class="slds-form-element" ng-repeat="editableItem in importedScope.editableItemList">
  <label class="slds-form-element__label">{{::editableItem.label}}
    <span ng-if="editableItem.dataType === 'PERCENT'"> %</span>
  </label>
  <div class="slds-form-element__control">
    <input ng-if="::editableItem.dataType === 'STRING'" type='text' class="slds-input" ng-model='editableItem.value' ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 800, 'blur': 0 } }"
ng-change="importedScope.refreshEditableField(editableItem , true);"/>
    <input ng-if="::(editableItem.fieldName === 'Quantity' || editableItem.dataType === 'CURRENCY' || editableItem.dataType === 'PERCENT')" type='number' step='any' class="slds-input" ng-model='editableItem.value'  ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 800, 'blur': 0 } }"
ng-disabled="importedScope.isAsset(importedScope.configItemObject,editableItem.fieldName)"
ng-change="importedScope.refreshEditableField(editableItem, true);"
ng-keydown="importedScope.checkQuantityField(editableItem.fieldName, $event.key)"/>
    <span class="cpq-error-msg">{{editableItem.qtyValidationMessage}}</span>
  </div>
</div>
div class="slds-form-element" ng-repeat="editableItem in importedScope.editableItemList">
<label class="slds-form-element__label">{{::editableItem.label}}
  <span ng-if="editableItem.dataType === 'PERCENT'"> %</span>
</label>
<div class="slds-form-element__control">
  <input ng-if="::editableItem.dataType === 'STRING'" type='text' class="slds-input" ng-model='editableItem.value'
ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 800, 'blur': 0 } }"
ng-disabled="importedScope.configItemObject.orderActive"
ng-change="importedScope.refreshEditableField(editableItem , true);"/>
  <input ng-if="::(editableItem.fieldName === 'Quantity' || editableItem.dataType === 'CURRENCY' || editableItem.dataType === 'PERCENT')"
type='number' step='any' class="slds-input"
ng-model='editableItem.value'
ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 800, 'blur': 0 } }"
ng-disabled="importedScope.isAsset(importedScope.configItemObject,editableItem.fieldName)"
ng-change="importedScope.refreshEditableField(editableItem, true);"
ng-keydown="importedScope.checkQuantityField(editableItem.fieldName, $event.key)"/>
  <span class="cpq-error-msg">{{editableItem.qtyValidationMessage}}</span>
</div>undefined</div>

CSS Change

#{$namespace}-error-msg {

In Summer '18, replace the CSS statement above with the following CSS statements:

.#{$namespace}-error-msg {
color: $error;"