Customer Service Center Data Resources

Each customizable area is able to show data from its default data source. For that, no configuration is necessary. If a customizable area should show (or modify) data from different resource, that resource needs to be configured. To show additional attributes from other data resources in vies or forms, the element data has to be added as a new top-level element. In this data section, the additional attributes have to be configured accordingly.

"attributes": {
    "attributname": {
        "read": {
            "resource": "Resourcename",
            "path": "attribute read path"
        },
        "write": {
            "resource": "Resourcename",
            "path": "attribute write path"
        }
    }
}

The attribute read path can also contain xpath expressions and functions.

Example

A CSR would like to check (and have to means to correct) the email address of a customer when editing the basket billing address, because an email address is required for ordering. With customization of the basket billing address and by using a different resource (BasketCustomer, which provides the customer's email address), the email address can be added to the configuration.

Because the CSC Basket Customer Info Data Provider takes care of metadata handling, the necessary type information is transferred accordingly. With that, the attribute customeremail is available in attribute_layout or attribute_form widgets and can be edited while editing the billing address.

The following is a slightly stripped down billing address configuration:

{
  "data": {
    "attributes": {
      "customeremail": {
        "read": {
          "resource": "BasketCustomer",
          "path": "/email"
        },
        "write": {
          "resource": "BasketCustomer",
          "path": "/email"
        }
      }
    }
  },
  "layout": [
    {
      "condition": "data",
      "layout": [
        {
          "id": "address",
          "layout": [
            {
              "attribute": "customeremail", "width":12
            },
            {
              "attribute": "first_name",
              "meta": {
                "maxLength": 50
              },
              "width": 6
            },
            {
              "attribute": "last_name",
              "meta": {
                "maxLength": 50,
                "required": true
              },
              "width": 6
            },
            {... more attributes... }
          ]
        }
      ]
    }
  ],
  "widgets": {
    "address": {
      "type": "attribute_form"
    }
  }
}

The resulting billing address form contains now an email which is updated outside the actual billing address.

Area-Specific Data Sources

Customizable area Default data source Alternative data sources
Product Detail BasketProduct Basket Address, Customer Info, Basket
Basket Shipping Address Basket Address Customer Info , Basket
Basket Billing Address Basket Address Customer Info , Basket
Basket Billing Address View
Note: These customizable areas are also used to show a list of all basket addresses for selecting the billing or shipping address of a basket. The data source for that is Basket Addresses.
Basket Address Customer Info , Basket
Basket Shipping Address View Basket Address Customer Info , Basket
Basket Payment Instrument Basket Payment Instrument Customer Info , Basket
Price Adjustment Price Adjustment Basket Address, Customer Info , Basket
Order Payment Instrument Order Payment Instrument Order Address, Order
Order Billing Address View Order Address Order
Order Shipping Address View Order Address Order

Generic Data Sources

Data source: site

Provides site information, the possible properties of the site object can be checked in the Site documentation from Shop API. Here is an example using name, id and timezone properties.

"data": {
    "attributes": {
      "sitename": {
        "read": {
          "resource": "Site",
          "path": "/name"
        }
      },
      "siteid": {
        "read": {
          "resource": "Site",
          "path": "/id"
        }
      },
      "sitetz": {
        "read": {
          "resource": "Site",
          "path": "/timezone"
        }
      }
    }
  }
  
"layout": {
            [{
              "id": "siteinfo",
              "condition": "data.siteid === 'SiteGenesis'",
              "width": 12
            }]
}
  
"widgets": {
    "siteinfo": {
      "type": "attribute_listing",
      "config": {
        "attributes": [
          "sitename",
          "siteid",
          "sitetz"
        ],
        "columns": 2
      }
    }
}

Related Links

Customer Service Center

Customer Service Center Customization

Customer Service Center Hooks

Customer Service Center UI Customization

Customer Service Center Layouts

Customer Service Center Widgets

Customer Service Center Areas

Customer Service Center Customizable Areas

Customizable Grids

Custom Actions