Customer Service Center Customizable Areas

Areas contain the specific tab layout and are referenced in the tabs.

1"areas": {
2    "customer_info": {
3      "layout": [
4        {
5          "layout": [
6            {
7              "id": "form",
8              "layout": [
9                {
10                  "attribute": "email"
11                }
12              ]
13            }
14          ]
15        }
16      ],
17      "widgets": {
18        "form": {
19          "type": "attribute_form"
20        }
21      }
22    }
23  }

Customize a CSC customizable area. The customizable areas can be modified and localized.

Click App Launcher and then select Administration > Site Development > Customer Service Center Settings.
Select the Customizable Area from the list.
Modify the configuration and click Save.
- To return the configuration to the default, delete the existing configuration and click Save.
- Customer Service Center recognizes MetaData Regex configurations for customizable forms. Also, overwrite a regex in a particular form configuration.

Customizable areas aren’t localized into languages supported by Business Manager.

Note

Details on customizing each area are included in the remaining sections of this guide.

Basket View

Use basket view to configure the entire basket view.

Widget basket_shipments

Shows the shipments including the items grid and the drop area for multi shipments if enabled.
1"basket_shipments" : { 2 "type" : "basket_shipments" 3}
Use the DefaultShipment data provider to configure the default shipment as a gift and add a gift message. Use DefaultShipment in any of the customization pages, as long as a basket is available.
Note
Widget order_totals

Displays all basket (future order) prices.
1"order_totals" : { 2 "type" : "order_totals" 3}

Widget basket_coupons

Captures coupons and source codes and display application status.

Configuration:

Name	Type	Description
`type`	`enum (coupon, source_code, both)`	Controls whether the widget track coupons only, source codes only or both.

1"basket_coupons" : {
2  "type" : "basket_coupons",
3  "config": { "type" : "both"}
4}
5
6"basket_coupons" : {
7  "type" : "basket_coupons",
8  "config": { "type" : "coupon"}
9}
10
11"basket_coupons" : {
12  "type" : "basket_coupons",
13  "config": { "type" : "source_code"}
14}

Basket Billing Address

The basket shipping and billing address can contain a form to enter a new address.

Basket Billing Address View

The basket billing address view is a customizable area. This view shows the billing address of a basket as well as the appearance of each list-entry in the billing from the customer’s address book.

Basket billing address view showing a billing address and address book entries in the Customer Service Center

Basket Payment Instrument

The basket payment instrument lets you show a payment form that contains all values needed for a particular payment. The form appears after selecting a particular payment method and adds a payment to the order.

Widget payment_method

Provides a selection grid for a payment method.
Widget payment_totals

Shows the payment totals of a basket or an order to have an overview of subtotals and totals (which varies with payment promotions).
1"order_totals" : { 2 "type" : "order_totals" 3}

Basket Shipping Address

The basket shipping address contains a form to add an address.

Customer Address Create

The customer address is a customizable area that creates a form.

Customer Address Edit

The customer address edit form is a customizable area.

Customer Create

The customer create form is a customizable area

Customer Edit

The customer edit form is a customizable area.

Customer Summary

A customizable area that shows the customer details in the customer’s view.

Order Billing Address View

A customizable view that shows that the billing addresses are formatted correctly.

Order Payment Instrument

The order payment instrument is a customizable area that shows a payment form that contains all values needed for a particular payment. The form appears after selecting a particular payment method and adds a payment to the order.

Widget payment_method

Provides a selection grid for a payment method.
Widget payment_totals

Shows the payment totals of a basket or an order to have an overview of subtotals and totals (which varies if there are payment promotions).
1"order_totals" : { 2 "type" : "order_totals" 3}

Order Shipping Address View

A customizable view for verifying that shipping addresses are correctly formatted.

Order Summary

A customizable area atop of the items view to show arbitrary content.

Price Adjustment

This customizable area is used for adding product, shipping, or order price adjustments of a basket. Beyond the standard form widgets, a price_adjustment_value widget can be added for entering the particular value.

Widget price_adjustment_value

Shows the price adjustment value element that can be switch between amount off, percentage off and price change.

Product Detail

The Product Detail page is entirely customizable. In addition to the common widgets, other widgets are supported and can be placed anywhere in the area.

Widget gallery

Configuration

Name	Type	Description
mapping	Business Manager’s view types to client viewtypes map	Maps the Business Manager’s view types to client view types. Important are the view types for “large” and “small”. The viewtype “large” specifies all available images while viewtype “small” is responsible for the navigation images. The following example maps the Business Manager’s view type “small” to the client’s “small” view type, “large” to the client’s “large” and “hi-res” to the client’s “high” view type. It is possible to have multiple business manager view types per target view type.

1{
2  "mapping": [
3    {
4      "small": "small",
5      "large": "large",
6      "high": "hi-res"
7    },
8    {
9      "small": "swatch",
10      "large": "swatch"
11    }
12  ]
13}

Widget product_variation

Displays and allows the modification of the product’s variation attributes.
Widget product_availability

Displays stock level of a product. In case a product is out of stock (pre- or back-ordered), this component shows the expected in-stock date.
Widget product_option

Displays and allows the modification of product options.
Widget product_unit_price

Shows the unit price of a product.
Widget product_total_price

Shows the total price of a product. This widget includes all options and considers the selected quantity.
Widget product_quantity

Displays and allows modification of the quantity of a product item.
Widget product_title

Shows the product’s title. This widget consists of the product name, the product brand, and the product ID.

Product Search

Customize the product search results, for example, with attributes such as size, color, a secondary product title. This information helps agents more easily identify the correct item without having to open a product detail page.

The customizable area appears below the area where the tile content, which includes the image, product title, SKU, price, and availability. You select configurable attributes in Business Manager.