Data bindings

Server-side code is used to retrieve information used by the shopping cart. This information is available in the Bindings panel to either display that information, or use it to define a value for a form element within the shopping cart.

If you created a shopping cart display using the eCart Display Manager, this server-side code was automatically placed on the page.

If you create a shopping cart display without using the eCart Display Manager, or need modify an existing shopping cart display that has been created, the dynamic elements that specify information within the shopping cart need to be applied using the Bindings panel.

The figure below illustrates the information used in the shopping cart that is specified in the display using server-side code, specifically ASP code in this example.

Within the table row that displays contents of the shopping cart, you'll notice that each piece of information displayed within each cart column uses a server-side code reference.

Updateable fields, such as the Quantity and Delete checkbox may not visibly show the server-side code, but their values are defined by the server-side code specific to their cart column.

In addition, you'll also notice that the subtotal, charges, discounts, and total of the shopping cart are also server-side code references.

The below figure illustrates the Bindings panel for the above shopping cart display. All of the server-side code referenced above is available as individual bindings for the eCart Object associated with the above display.

As you can see, all of the shopping cart columns are available as bindings (ID through Size), as well as the calculations (TotalWeight, TotalPrice, FullDetails) and individual merchandising rules (Test charge, Test discount) configured for the given eCart Object.

In addition, bindings specific to the shopping cart display are available and are referenced in brackets ([ ]). These include, SubTotal, Charges, Discounts, and GrandTotal.

Having familiarized yourself with the concept of data bindings, you can now use the Bindings panel to insert this information for display on the page, or bind that information to attributes of page elements, such as the default value of a given form element.

To insert a data binding into the page for display:

  1. In Design View, place your cursor in the location where you want the information for a data binding displayed.
  2. In the Bindings panel, select the specific data binding to be inserted.
  3. At the bottom of the Bindings panel, click the Insert button.
  4. In Design View, the server-side code image will appear in the insert location.

To bind data to an attribute of a page element:

  1. In Design View, select an element of the page that has an attribute you wish to bind shopping cart data to.

    e.g. You wish to set the default value of a textfield to the Quantity of an item in the shopping cart. Select the given textfield.
  2. In the Bindings panel, select the specific data binding you wish to set the given element's attribute to.

    e.g. Select the Quantity data binding.
  3. At the bottom of the Bindings panel, select the attribute for the given page element from the list of available attributes in the Bind to: list.

    e.g. Select the input.value option from the list.
  4. Click the Bind button.
  5. In Design View, select the page element and look at the property inspector for the element. The attribute selected in Step 3 should reflect the server-side code for the given data binding.

    e.g. The default value in the property inspector for the textfield should reflect the server-side code for the Quantity binding.
In this manner, you can update an existing shopping cart display with data available in the shopping cart, as well as build a shopping cart display from the ground up without using the eCart Display Manager.