Search results page customization per display mode [CSS Handles]

Improved

July, 14

{"base64":" ","img":{"width":105,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":951,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/new-1-0.png"}}

It became possible to apply CSS classes to search results according to the way they are displayed on the interface!

This release marvel is all thanks to the way galleryItem CSS Handle (exported by the Search Result app) presently behaves when inspected.

It now accepts an HTML modifier ({displayMode}) meaning that the handle name changes according to the display mode used to render search results.

{"base64":" ","img":{"width":1562,"height":733,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":197376,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/new-1-1.png"}}

In the example above, the CSS Handle galleryItem presents itself as galleryItem-inline when inspected. Notice that the new Handle name is defined according to the display mode set in the search results page.