Specific Search Bar Format Component Help Needed

I don't know the answer to this personally, but I've reached out to one of our product owners for help to get your question answered.  Stay tuned...

-Doug

Hello,

This is a default component of the marketing communitiy product, but there are some steps you can take to replicate the functionality.

A word of warning. This uses the search form usually found at the top right of the community. You'll notice on the Sephora community that it doesn't have a search box on every page, it's absent from the message pages and other key pages. If you'd like to retain both search boxes, creating a custom component, or work to have duplicate forms play well on the same page would be required.

1. We use the "Search Form" component found under "Common" in studio and place it in the desired position on the page, and remove it from the header. If you leave it in the header, make the CSS selectors stronger so that you're not styling both.

2. The location dropdown between the input field and the button is actually still present, but we hide it to create a cleaner look at the expense of the context functionality.

#lia-body .lia-content .lia-quilt .lia-component-common-widget-search-form select { display: none; }

3. The search box is a static 670x40 in Sephora's case, although you may want to use a different static or variable width. We'll also remove the space between the search field and search button.

#lia-body .lia-content .lia-quilt .lia-component-common-widget-search-form .lia-form .lia-search-input-message { 
  width: 670px; 
  height: 40px; 
  line-height: 40px;
  margin: 0; /* remove the space between the button and search field */
}

4. We want to replace the "search" text with an image by shifting the text and adding a background image and square the button

#lia-body .lia-content .lia-quilt .lia-component-common-widget-search-form .lia-form .lia-button-wrapper input { 
  height: 40px;
  width: 40px;
  border-radius: 0; /* remove the rounded corners */
  -webkit-border-radius: 0; /* remove the rounded corners */
  text-indent: -9999px; /* shift the text off the page */
  background: transparent url('http://some/search/image/url.png') no-repeat scroll center center; /* add a background image for the search button */
}
#lia-body .lia-content .lia-quilt .lia-component-common-widget-search-form .lia-form .lia-button-wrapper input:hover { 
  background: transparent url('http://some/search/image/url-hover.png') no-repeat scroll center center; /* add a background image for the hover state, or replace both images with your favorite sprite generator */
}

 5. Now the part that may take lithium's assistance is showing the post button below the suggested search results. I don't believe this is exposed in the admin, so this part would require filing a ticket.  The first disables the auto-suggestion and the second adds auto-suggestion with the post button.

search.enable_autocomplete_toggle  = false 
search.enable_post_from_autocomplete = true

That should get you a resonable way toward making it look and behave like Sephora's search bar. If you decide to retain the search granularity dropdown, there will be additional styling needed, the search input fields are all different input fields for the various types (user search, tkb search).

Hope that helps,

mikey

I've been searching for documentation of the Javascript events which are being fired within the search component.

Are there docs for the Lithium 'common' components? Or a way to clone and customize? 

I have been reading through the lia-scripts-body-min.js but since its minified its quite challenging to comprehend exactly what is going on.  Is there a way to get access to a non-minified version of the core JS? 

Any ideas? 

sainejob