Querying appearance
Query appearance to get the templates and variables used to render HTML block and banner widgets.
Note
You can use the API to query appearance only in the html block and banner widget types. You cannot use the API to query appearance in merchandising widgets like search results, recommendations, and preview searches.
HTML and CSS sections determine a widget's appearance .
A section consists of several templates, each containing content in a format specific to that section. For example, a template for an HTML section has content in HTML format.
A template uses variables that Discover substitutes at runtime. Some examples of common variables are title, subtitle, padding, font size, and color. You use these variables to create a widget with a specific appearance or style.
You can define templates for a specific device like a PC, a mobile, or a tablet.
The Search and Recommendation API has an extensive appearance interface to get default, specific, or all templates and variables for all sections and devices.
The following sections show some examples of appearance queries.
Getting appearance templates for all sections
The following code shows a request to get appearance templates for all sections for the default device:
RequestResponse
{
"context": {
"page": {
"uri": "/"
}
},
"widget": {
"rfkid": "hs_home_hb"
},
"appearance": {
"templates": {}
}
}The following code shows the corresponding response:
RequestResponse
{
"widget": {
"rfkid": "hs_home_hb",
"type": "banner",
"variation_id": "530651"
},
"url": "...",
"appearance": {
"templates": {
"html": {
"devices": {
"pc": {
"content": "\n<div class=\"banner\">\n <div class=\"column\">\n <a class=\"image_box\" href=\"/rfk/\"> \n <div class=\"background\">\n <div class=\"content\">\n <div class=\"title\">NEW ARRIVALS</div> \n <div class=\"subtitle\">New fall styles are hitting the stores 11/21</div> \n <div class=\"square\">SHOP NOW</div> \n </div>\n </div>\n </a>\n </div>\n</div>\n"
}
}
},
"css": {
"devices": {
"pc": {
"content": "[data-rfkid].rfk2_banner.rfk2_hs_home_hb .banner{-webkit-box-sizing:border-box;border:none;box-sizing:border-box;margin:0;padding:0;width:100%}
...
[data-rfkid].rfk2_banner.rfk2_hs_home_hb .square{border:1px solid #FFFFFF;display:inline-block;font-family:'DIN';font-size:16px;padding:26px 32px;text-align:center;text-rendering:geometricPrecision}"
}
}
}
},
"css_names": [
"rfk2_banner",
"rfk2_hs_home_hb"
],
"html_names": [
"banner",
"hs_home_hb"
]
},
"ts": 1618370786846,
"rid": "response_id:125757321:a7d76cf8a2a6e656b60e4322360db3b5ce4cf9d4",
"dt": 104
}Getting appearance templates for all sections and devices
The following code shows a request to get the appearance templates for all sections and devices. In this example, the response does not substitute variables in the templates and does not add CSS selectors to the CSS.
RequestResponse
{
"context": {
"page": {
"uri": "/"
}
},
"widget": {
"rfkid": "rfkid_pb"
},
"appearance": {
"templates": {
"devices": [],
"keep_variables": true,
"keep_original_css": true
}
}
}The following code shows the corresponding response:
RequestResponse
{
"widget": {
"rfkid": "rfkid_pb",
"used_in": "page",
"variation_id": "683733",
"type": "banner"
},
"url": "?data%3D%7B%22content%22%3A%20%7B%22product%22%3A%20%7B%22max%22%3A%2010%7D%7D%2C%20%22widget%22%3A%20%7B%22rfkid%22%3A%20%22rfkid_pb%22%2C%20%22used_in%22%3A%20%22page%22%2C%20%22variation_id%22%3A%20%22683733%22%2C%20%22type%22%3A%20%22banner%22%7D%2C%20%22appearance%22%3A%20%7B%22templates%22%3A%20%7B%22keep_original_css%22%3A%20true%2C%20%22keep_variables%22%3A%20true%2C%20%22sections%22%3A%20%5B%22html%22%2C%20%22css%22%2C%20%22js%22%5D%2C%20%22devices%22%3A%20%5B%22pc%22%2C%20%22mobile%22%2C%20%22tablet%22%5D%7D%7D%2C%20%22context%22%3A%20%7B%22page%22%3A%20%7B%22locale_country%22%3A%20%22us%22%2C%20%22locale_language%22%3A%20%22en%22%2C%20%22uri%22%3A%20%22/mywheelspage%22%7D%2C%20%22user%22%3A%20%7B%22uuid%22%3A%20%22test%22%7D%7D%2C%20%22force_v2_specs%22%3A%20true%7D",
"appearance": {
"templates": {
"html": {
"devices": {
"mobile": {
"content": "\n<div class=\"banner\">\n <div class=\"column\">\n <a class=\"image_box\" href=\"{{$image_href}}\"> \n <div class=\"background\">\n <div class=\"content\">\n <div class=\"title\">{{$image_overlay_title,}}</div> \n <div class=\"subtitle\">{{$image_overlay_subtitle,}}</div> \n <div class=\"square\">{{$image_overlay_button,}}</div> \n </div>\n </div>\n </a>\n </div>\n</div>\n"
},
"pc": {
"content": "\n<div class=\"banner\">\n <div class=\"column\">\n <a class=\"image_box\" href=\"{{$image_href}}\"> \n <div class=\"background\">\n <div class=\"content\">\n <div class=\"title\">{{$image_overlay_title,}}</div> \n <div class=\"subtitle\">{{$image_overlay_subtitle,}}</div> \n <div class=\"square\">{{$image_overlay_button,}}</div> \n </div>\n </div>\n </a>\n </div>\n</div>\n"
},
"tablet": {
"content": "\n<div class=\"banner\">\n <div class=\"column\">\n <a class=\"image_box\" href=\"{{$image_href}}\"> \n <div class=\"background\">\n <div class=\"content\">\n <div class=\"title\">{{$image_overlay_title,}}</div> \n <div class=\"subtitle\">{{$image_overlay_subtitle,}}</div> \n <div class=\"square\">{{$image_overlay_button,}}</div> \n </div>\n </div>\n </a>\n </div>\n</div>\n"
}
}
},
"css": {
"devices": {
"mobile": {
"content": "\n.banner {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n padding: {{$padding}};\n margin: {{$margin}};\n border: {{$border}}; \n}\n.banner:before{\n content: \"\";\n display: block;\n padding-top: {{$image_height_mobile}};\n}\n.banner > .column {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n\n.column {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n}\n\n.background {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-size: cover;\n background-position: center;\n background-image: url({{$image_url_mobile, $image_url}}); \n}\n\n.content {\n text-transform: uppercase;\n color: #FFFFFF;\n font-family: {{$font_family_light}};\n text-rendering: geometricPrecision;\n position: absolute;\n width: 100%;\n max-width: {{$image_overlay_max_width_mobile}};\n padding: 0 calc((100% - {{$image_overlay_max_width_mobile}}) / 2);\n top: {{$image_overlay_top_position_mobile}};\n left: {{$image_overlay_left_position_mobile}}; \n}\n.content > *:empty {\n display: none; \n}\n\n.title {\n margin-bottom: 1%;\n font-size: 64px;\n line-height: 64px;\n font-weight: bolder;\n}\n\n.subtitle {\n margin-bottom: 10%;\n font-size: 32px;\n line-height: 32px;\n}\n\n.square {\n font-family: {{$font_family_bold}};\n text-align: center;\n text-rendering: geometricPrecision;\n border: 1px solid #FFFFFF;\n padding: 24px 28px;\n padding: 26px 32px;\n display: inline-block;\n font-size: 16px;\n}\n"
},
"pc": {
"content": "\n.banner {\n width: 100%;\n padding: {{$padding}};\n margin: {{$margin}};\n border: {{$border}};\n -webkit-box-sizing: border-box;\n box-sizing: border-box; \n}\n\n.column {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n}\n\n.image_box {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n padding-top: {{$image_height}};\n}\n.image_box:before {\n content: \"\";\n display: block;\n}\n\n.background {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-size: cover;\n background-position: center;\n background-image: url({{$image_url}}); \n}\n\n.content {\n text-transform: uppercase;\n color: #FFFFFF;\n font-family: {{$font_family_light}};\n text-rendering: geometricPrecision;\n position: absolute;\n width: 100%;\n max-width: {{$image_overlay_max_width}};\n padding: 0 calc((100% - {{$image_overlay_max_width}}) / 2); \n top: {{$image_overlay_top_position}};\n left: {{$image_overlay_left_position}};\n}\n.content > *:empty {\n display: none; \n}\n\n.title {\n margin-bottom: 1%;\n font-size: 96px;\n line-height: 96px;\n font-weight: bolder;\n}\n.subtitle {\n margin-bottom: 5%;\n font-size: 40px;\n line-height: 40px;\n}\n\n.square {\n font-family: {{$font_family_bold}};\n text-align: center;\n text-rendering: geometricPrecision;\n border: 1px solid #FFFFFF;\n padding: 26px 32px;\n display: inline-block;\n font-size: 16px;\n}\n"
},
"tablet": {
"content": "\n.banner {\n width: 100%;\n padding: {{$padding}};\n margin: {{$margin}};\n border: {{$border}};\n -webkit-box-sizing: border-box;\n box-sizing: border-box; \n}\n\n.column {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n}\n\n.image_box {\n position: relative;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n padding-top: {{$image_height}};\n}\n.image_box:before {\n content: \"\";\n display: block;\n}\n\n.background {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-size: cover;\n background-position: center;\n background-image: url({{$image_url}}); \n}\n\n.content {\n text-transform: uppercase;\n color: #FFFFFF;\n font-family: {{$font_family_light}};\n text-rendering: geometricPrecision;\n position: absolute;\n width: 100%;\n max-width: {{$image_overlay_max_width}};\n padding: 0 calc((100% - {{$image_overlay_max_width}}) / 2); \n top: {{$image_overlay_top_position}};\n left: {{$image_overlay_left_position}};\n}\n.content > *:empty {\n display: none; \n}\n\n.title {\n margin-bottom: 1%;\n font-size: 96px;\n line-height: 96px;\n font-weight: bolder;\n}\n.subtitle {\n margin-bottom: 5%;\n font-size: 40px;\n line-height: 40px;\n}\n\n.square {\n font-family: {{$font_family_bold}};\n text-align: center;\n text-rendering: geometricPrecision;\n border: 1px solid #FFFFFF;\n padding: 26px 32px;\n display: inline-block;\n font-size: 16px;\n}\n"
}
}
}
},
"css_names": [
"rfk2_banner",
"rfk2_rfkid_pb"
],
"html_names": [
"banner",
"rfkid_pb"
]
},
"ts": 1663815954591,
"rid": "response_id:125757327:ebbdf2fce0f31bde97895f130af6bae8901d60cf",
"dt": 40
}