The custom widget’s display.template file conditionally displays one of two links for each line item:
<!-- ko ifnot: $parent.isPersonalized --> <a data-bind="click: $parents[2].personalizeItem.bind($data, $parent, $parents[2])" data-toggle="modal">Personalize</a> <!-- /ko --> <!-- ko if: $parent.isPersonalized --> <a data-bind="click: $parents[2].editItem.bind($data, $parent, $parents[2])" data-toggle="modal">Edit</a> <!-- /ko -->
When the cart is initially displayed, none of the line items have been personalized, so the shopping cart page shows a Personalize link for each line item. For example:
Clicking a line item’s Personalize link opens a modal dialog for splitting the line item and personalizing the resulting items. For example, if the shopper clicks the Personalize link for the Organized Wallet line item, the following dialog is displayed:
If the checkbox is checked, the line item will not be split when the shopper clicks Save, and the value the shopper supplies for the monogram property will be applied to both wallets. If the checkbox is unchecked, the line item will be split, and the dialog expands to display fields for specifying the custom property values for each item individually:
After the shopper fills in the monogram values and clicks Save, the Organized Wallet line item is split into two line items, and the monogram property is set separately on each one. The widget’s display.template file displays the value of the property for each item it is set on:
<!-- ko if:($parents[1][$data.id()]) --> <span data-bind = "text: $data.label"></span> : <span data-bind = "text: $parents[1][$data.id()]"></span><br> <!-- /ko -->
The shopping cart summary now looks like this:
Notice that there are now two line items for the Organized Wallet, each with a quantity of 1, and each with a different value for the custom property. The Tumbler Glass line item still has a Personalize link, but the Organized Wallet line items now have Edit links instead. Clicking one of the Edit links opens a dialog for changing the monogram for the wallet associated with that link. For example:
