Search Results

New design for the search results page.

In this page

Prototype

June 27th, 2020

Vrbo Search Results

SEE PROTOTYPE

Design Specs

General

Branding

We need to careful how we brand the VRBO product. The word 'VRBO' must always be capitilize. See screenshot for reference.

Filter Sidebar

Filter Container
  • If open, the container should only display 3 items; this is the default setting
  • If container contains more than 3 items, then the ‘+more’ should display
  • When the ‘+more’ link is clicked, then it will change to the ‘-less’ link
  • When the '-less' link is clicked, then the container will show 3 items.

Product Listings

Hotel Images
  • The hover has been disabled for the property images
  • Only show 1 property image per listing
  • Code: Line 448 to 473 in style sheet ‘commented’
Heart Icon

We have enhanced the heart icon so that it is clearly visible. The heart is encased in a white opaque circle.

What happens when the user clicks on the heart icon? This is not shown on the prototype. But the following needs to occur when the user clicks on the heart.

Tooltip

To understand this fix, on the second product listing. Move cursor over the Rare 2 Find label, and the tooltip will appear over the image.

Code
Instructions

js/cc-search-results.js > has the “+ more” and “- less toggle” logic for the filters

  • will require the addition of an extra class (content-box in this case) around the radio and checkbox-groups, the +More and -Less links are still inside the tt-collapse-content tag but outside the content-box tag

js/cc-search-results-json.js > json version javascript

  • will require the addition of an extra class (content-box in this case) around the radio and checkbox-groups, the +More and -Less links are still inside the tt-collapse-content tag but outside the content-box tag

css/styles-product-listings.css > fix for badge pop up showing up behind image

  • .label-rare-find { background-color: #e1e2e4; color: #202124; cursor: pointer; z-index: 5; position: relative; }
  • Lines 350-356

css/styles-vertical-filter.css > added style tags that is used in cc-search-results.js for the +More and -Less toggle in the filter.t

  • Lines 1364 – 1372

Annotations

Photo Slider

There are two items on the Search Results page not addressed on the protoypes. The Annotations below provide instructions for the following:

  • Product Listing Photo Slider
  • Search Result 'View on Map'

Photo Slider & Map Annotations

Border: #c3c6c9

There are two items on the Search Results page not addressed on the protoypes. The Annotations below provide instructions for the following:

See Border Adjustments