Announcement: You can find the guides for Commerce 7.5 and later on the new Elastic Path Documentation site. This site contains the guides for Commerce 6.13.0 through 7.4.1.Visit new site

This version of Elastic Path Commerce is no longer supported or maintained. To upgrade to the latest version, contact your Elastic Path representative.

Selectors

In this document

Selectors

Selectors are a hypermedia control that change a resource's state. Selectors provide a list of predefined options that a shopper can choose from. Once a choice is made through the selector, the resource's state updates accordingly. Selectors are generally rendered on the UI as radio button groups, combo boxes, or check boxes.

With selectors, you can discover:
  • The options available for a resource.
  • The options already selected for a resource.
  • The selection-rule that determines how many options can be selected at once.
  • The links to make the selection.
Cortex selectors follow this format:

  • A name property that identifies which options the selector handles.

  • A selection-rule property that identifies the number of options that can be selected at once.

  • A choice link for options that can be selected.

  • A chosen link for options that are already selected.

Cortex choice and chosen follow this format:

  • A description link that links to a description of the option.

  • A selectaction link that when followed selects the option. The link appears only on choice resources as chosen resources are already selected.

Selector Example: Selecting a Billing Address

The billingaddressinfo resource contains a selector that allows shoppers to select their billing address for an order. The selector provides a list of addresses shoppers have previously saved to their account from which the shopper can choose from. The selector's type is elasticpath.controls.selector, which indicates the resource is a selector control: 
  1. {
  2.   "rel": "selector",
  3.   "rev": "billingaddressinfo",  
  4.   "type": "elasticpath.controls.selector",
  5.   "uri": "/commerce-legacy/orders/mobee/mu3=/billingaddressinfo/selector",
  6.   "href": "http://api.elasticpath.net/cortex/orders/mobee/mu3=/billingaddressinfo/selector"
  7. }
Copy
Retrieving the selector returns the selector resource. In this example, there are two choice links, indicating two possible billing addresses can be selected. The selection-rule property is set to 1, so only one billing address can be selected at a time: 
  1. {
  2.   "self": {
  3.     "type": "elasticpath.controls.selector",
  4.     "uri": "/commerce-legacy/orders/mobee/mu3=/billingaddressinfo/selector",
  5.     "href": "http://api.elasticpath.net/cortex/orders/mobee/mu3=/billingaddressinfo/selector"
  6.   },
  7.   "name": "billing-address-selector",
  8.   "selection-rule": "1",
  9.   "links": [
  10.     {
  11.       "rel": "choice",
  12.       "rev": "selector",
  13.       "type": "elasticpath.collections.links",
  14.       "uri": "/commerce-legacy/orders/mobee/mu3=/billingaddressinfo/selector/profiles/mobee/grd=/addresses/ga3=",
  15.       "href": "http://api.elasticpath.net/cortex/orders/mobee/mu3=/billingaddressinfo/selector/profiles/mobee/grd=/addresses/ga3="
Copy
 ... 
Read more
A choice resource has a description link which can be used the retrieve the resource that is being selected. The selectaction link is used to select the option: 
  1. {
  2.   "self": {
  3.     "type": "elasticpath.collections.links",
  4.     "uri": "/commerce-legacy/orders/mobee/mu3=/billingaddressinfo/selector/profiles/mobee/grd=/addresses/ga3=",
  5.     "href": "http://api.elasticpath.net/cortex/orders/mobee/mu3=/billingaddressinfo/selector/profiles/mobee/grd=/addresses/ga3="
  6.   },
  7.   "links": [
  8.     {
  9.       "rel": "description",
  10.       "type": "elasticpath.addresses.address",
  11.       "uri": "/commerce-legacy/profiles/mobee/grd=/addresses/ga3=",
  12.       "href": "http://api.elasticpath.net/cortex/profiles/mobee/grd=/addresses/ga3="
  13.     },
  14.     {
  15.       "rel": "selectaction",
Copy
 ... 
Read more
The client application should construct a POST request without a request body and send it to the URL described by the action link. If the action succeeds, Cortex returns status code 200 OK and a Location header with a reference to the updated selector resource: 
  1. POST /orders/mobee/mu3=/billingaddressinfo/selector/profiles/mobee/grd=/addresses/ga3=
  2. Content-Type: application/json
Copy
  1. 200 OK
  2. Location: http://api.elasticpath.net/cortex/orders/mobee/mu3=/billingaddressinfo/selector
Copy
The updated selector resource now shows that a link called chosen has replaced the choice link. This indicates the resource has been selected: 
  1. {
  2.   "self": {
  3.     "type": "elasticpath.controls.selector",
  4.     "uri": "/commerce-legacy/orders/mobee/mu3=/billingaddressinfo/selector",
  5.     "href": "http://api.elasticpath.net/cortex/orders/mobee/mu3=/billingaddressinfo/selector"
  6.   },
  7.   "name": "billing-address-selector",
  8.   "selection-rule": "1",
  9.   "links": [
  10.     {
  11.       "rel": "choice",
  12.       "rev": "selector",
  13.       "type": "elasticpath.collections.links",
  14.       "uri": "/commerce-legacy/orders/mobee/mu3=/billingaddressinfo/selector/profiles/mobee/grd=/addresses/ha4=",
  15.       "href": "http://api.elasticpath.net/cortex/orders/mobee/mu3=/billingaddressinfo/selector/profiles/mobee/grd=/addresses/ha4="
Copy
 ... 
Read more

The chosen resource does not have a selectaction link because it is already selected:

  1. {
  2.   "self": {
  3.     "type": "elasticpath.collections.links",
  4.     "uri": "/commerce-legacy/orders/mobee/mu3=/billingaddressinfo/selector/profiles/mobee/grd=/addresses/ga3=",
  5.     "href": "http://api.elasticpath.net/cortex/orders/mobee/mu3=/billingaddressinfo/selector/profiles/mobee/grd=/addresses/ga3="
  6.   },
  7.   "links": [
  8.     {
  9.       "rel": "description",
  10.       "type": "elasticpath.addresses.address",
  11.       "uri": "/commerce-legacy/profiles/mobee/grd=/addresses/ga3=",
  12.       "href": "http://api.elasticpath.net/cortex/profiles/mobee/grd=/addresses/ga3="
  13.     }
  14.     {
  15.       "rel": "selector",
Copy
 ... 
Read more