You are here:
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-msgin 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;"