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>

Copyright © 1997, 2017 Oracle and/or its affiliates. All rights reserved. Legal Notices