...
In order to ensure that vendors have the opportunity to define custom styles for specific elements, it is possible to specify custom styles in the URL of the iframe. At the moment the following element can be styled:
| Element name | Element key |
|---|---|
| Product name | productName |
| Product price | productPrice |
| "Add to Cart" Button | addToCartButton |
| "Buy now" Button | buyNowButton |
The mapping of the element keys to the elements is illustrated in the following diagrams:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
"buyNowButtonbuy-now-button": {
"backgroundColorbackground-color": "red"
},
"addToCartButtonadd-to-cart-button": {
"color": "green",
"backgroundColorbackground-color": "yellow"
},
"productNameproduct-name": {
"color": "blue"
},
"productPriceproduct-price": {
"color": "magenta"
}
} |
...
Some of the possible properties are:
| Property name | Description |
|---|---|
color | Font color of the element |
background-color | Background color of the element (for example, button) |
In this fashion you can specify any CSS property of the element. Notice that CSS properties that contain a hyphen ('-') should be specified in camel case (i.e. for the CSS property font-size one should write fontSize).
In order to pass these properties to the iframe, they have to be serialized (URL-encoded). For example, one can use the following tool: http://www.url-encode-decode.com/. On the left side one specifies the custom styles as in the code block above, then clicks "Encode URL", and then one gets a serialized string on the right hand side. Then one has to copy the string and pass it as the customStyles parameter to the iframe (see break-down of the iframe URL above for reference).
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
https://secure.affilibank.de/widget/cart/add?productIdcountryId=102de&countryIdvendor=dekonstantins-dev&locale=de_DE&formConfig=1&customStyles=%7B%0D%0A%20%20"buyNowButton":%20%7B%0D%0A%20%20%20%20"backgroundColor":%20"red" %0D%0A%20%20%7D,%0D%0A%20%20"addToCartButton":%20%7B%0D%0A%20%20%20%20"color":%20"green",%0D%0A%20%20%20%20"backgroundColor":%20"yellow"%0D%0A%20%20%7D,%0D%0A%20%20 "productName":%20%7B%0D%0A%20%20%20%20"color":%20"blue"%0D%0A%20%20%7D,%0D%0A%20%20"productPrice":%20%7B%0D%0A%20%20%20%20"color":%20"magenta"%0D%0A%20%20%7D%0D%0A%7D%7B%0D%0A%20%20%22buy-now-button%22:%20%7B%0D%0A%20%20%20%20%22background-color%22:%20%22red%22%0D%0A%20%20%7D,%0D%0A%20%20%22add-to-cart-button%22:%20%7B%0D%0A%20%20%20%20%22color%22:%20%22green%22,%0D%0A%20%20%20%20%22background-color%22:%20%22yellow%22%0D%0A%20%20%7D,%0D%0A%20%20%22product-name%22:%20%7B%0D%0A%20%20%20%20%22color%22:%20%22blue%22%0D%0A%20%20%7D,%0D%0A%20%20%22product-price%22:%20%7B%0D%0A%20%20%20%20%22color%22:%20%22magenta%22%0D%0A%20%20%7D%0D%0A%7D |