Display Search Box

General ShopSite user discussion

Display Search Box

Postby MgmtSpec » Thu Feb 11, 2016 9:57 am

Hi,

We're having issues with the search UI in the navbar. Using the Fearless theme/BB template. Seems many do not understand to click the "magnifying" glass icon they get a search box. You would think this is pretty obvious but my customer is getting 1-2 calls a week that mention they can't find the search or how to search the site.

So my question is how to display the "toggled" large search box (see bottom part of image) as default on pages AND can I do this w/o having to create custom templates.
I can see the JS output from the page but honestly I never learned JS so I don't really understand. Image

Code: Select all
<script type="text/javascript">$("div.suckertreemenu").append("<a href=\"http://www.floridatorqueconverters.com\" id=\"categoriesLink\" onclick=\"openVertical(); return false;\">Categories<\/a>"); $("ul#ShopSite").append("<div id=\"bb-navfade\" onclick=\"openVertical();\"><\/div>"); $("ul#ShopSite li").each(function() {if ($(this).children("ul").length > 0) {$(this).attr("class","bb-navfolder")}});
$("#ShopSite > li").each(function() {if (/home.html/i.test($(this).html())) {$(this).addClass("subcategory"); return false;}});function rdCheck(wels) {if (wels > ($("div.olh").outerWidth())) {verticalNav();} else if ((wels <= ($("div.olh").outerWidth())) && ($("html").attr("id") === "touch")) {horizontalNavTouch();} else {regularNav();}}
$("document").ready(function() {var liwidth = "0"; $(".olhel").each(function() {liwidth = parseInt(liwidth) + parseInt($(this).outerWidth());});$( window ).resize(debouncer(function(e) {rdCheck(liwidth);}));rdCheck(liwidth);});
</script>
<!-- ***** End of Include:  BB-PageMenu-OneLineHeader.sst -->
        <span id="fl-bonuslinks"></span>
        <span id="fl-searchtoggle">Search</span><script type="text/javascript">$("#fl-searchtoggle").click(function() {$("#bb-searchform").toggleClass("fl-active");});</script>    </div>
MgmtSpec
 
Posts: 200
Joined: Mon Apr 30, 2007 8:25 am

Re: Display Search Box

Postby loren_d_c » Thu Feb 11, 2016 10:43 am

The JavaScript is just toggling on a style element for the search form that has a height of 150px so that the search form will display. The original height of the search form in the bb-fearless.css is 0. If you change the original size of the search form to 150px then it will always display. Go to Merchandising -> Custom Templates -> Includes -> Copy ShopSite Publish File and find the bb-fearless.css and copy it (you will have to choose a new name). Then edit your copy and on about line 21 change to this:

Code: Select all
form#bb-searchform {display: block; width: 100%; text-align: center; padding: 0px; margin: 0px; white-space: nowrap; background: #[-- STORE.TableShadeColor --]; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; height: 150px; overflow: hidden;}


Note that all I changed was "height: 0" to "height: 150px". Once you have saved this change, use the Copy Publish File function to copy your edited file back to the exact filename bb-fearless.css. You can then delete the original copy. Then go to Utilities -> Publish and Regenerate, which should rebuild all the store pages and the Publish files. Your custom bb-fearless.css file will now be used instead of the default ShopSite version. You may need to do a refresh of your store pages to see the result, as the old version of the .css file may be cached in your browser.

-Loren
loren_d_c
 
Posts: 2569
Joined: Fri Aug 04, 2006 12:02 pm
Location: Anywhere

Re: Display Search Box

Postby MgmtSpec » Thu Feb 18, 2016 9:53 am

Thanks Loren - worked great!

Only concern now is the background image gets hidden behind the white block that contains the search box. Not sure if there is easy solution for this.

Image

Tried seting width in CSS to pixels but it was aligned left.
Tried 90% but leaves the search area left aligned overlapping the background and on right the black from the header covers the background.
Maybe add auto margins?

Suggestions? Ideas?
MgmtSpec
 
Posts: 200
Joined: Mon Apr 30, 2007 8:25 am


Return to User Forum

Who is online

Users browsing this forum: No registered users and 34 guests

cron