The isPersonalized
boolean on the CartItem
is used to indicate whether a line item has been personalized. By default it is set to false
; when a shopper clicks a Personalize link on a line item to invoke the widget’s personalizeItem()
function, the widget sets the isPersonalized
property to true
. This causes the Edit link to be displayed for the resulting line items. Clicking the Edit link invokes the widget’s updatePersonalization()
function, which enables further changes to the custom property values, but not further splitting of the line items:
updatePersonalization: function(){ var widget = this; //Calling the method to update properties of the item specified //by the user in the modal widget.item().populateItemDynamicProperties(widget.itemProps()[0]); $('#cc-editPane').modal('hide'); widget.cart().markDirty(); },
You could extend this function to support further splitting of line items as well.
The widget’s display.template
file contains the following for rendering the dialog:
<!-- Edit Personalization Modal --> <div class="modal fade" id="cc-editPane" tabindex="-1" role="dialog"> <div class="modal-dialog cc-modal-dialog"> <div class="modal-content"> <!-- ko if: $parent && $parent.item()!=null --> <div class="modal-header CC-header-modal-heading"> <h4>Edit Personalization</h4> </div> <div class="modal-body cc-modal-body"> <h5>Item</h5> <!-- ko with: lineAttributes --> <!-- ko foreach: $data --> <label class="control-label" data-bind="text: label"></label> <!-- ko if: $parents[2].itemProps()[0] --> <!-- ko if: uiEditorType() == "shortText" || uiEditorType() == "richText" || uiEditorType() == "number" || uiEditorType() == "date" --> <input class="form-control" type="text" data-bind="attr: {name : id}, value: $parents[2].itemProps()[0][id()]"><br> <!-- /ko --> <!-- ko if: uiEditorType() == "checkbox" --> <input class="form-control" type="checkbox" data-bind="attr: {name : id}, checked: $parents[2].itemProps()[0][id()]"><br> <!-- /ko --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div> <div class="modal-footer CC-header-modal-footer"> <button data-bind="click: $parent.cancelEdit.bind($parent)" type="button" class="cc-button-secondary">Cancel</button> <button data-bind="click: $parent.updatePersonalization.bind($parent)" type="button" class="cc-button-primary">Save</button> </div> <!-- /ko --> </div> </div> </div>