Search Autocomplete Categories go to "Actual" Category Page

Completed

Comments

6 comments

  • Official comment
    Travis Musgrave

    We're correcting the behavior for this (category search page) but also for PDP, manufacturer or attribute. If a shopper clicks on any of the respective options, they will be take to that page, not a search page.

     

    We'll roll this out early to mid-Q2

  • Karen

    I asked about this same thing around 3+ years ago, and was told basically, "sorry, that's how it works, use Thesaurus or Directed Search."

    Categories (I think) need some improvement tweaks:

    1) As per Trevor's original post, to go to the relevant category if selected via the search box
    2) to allow category keywords and search phrases, so that a relevant category can display on the search results page. Example: I have a category named "Rockers and Components", which contains products such as "rocker covers", "rocker assemblies", etc. But, the category won't display in search results for "rocker covers", for example, because as far as I know, the catalog search only queries the category name

    0
  • Joshua Artman

    We actually have overridden the builtin "/store/inc/ac.autocomplete.js" with a slightly modified version so it directly goes to the product or category clicked.  

    The autocomplete script makes a request to /store/Autocomplete.aspx and that page returns the following variables for each item match:

    • ID
    • ItemNumber
    • Name
    • Type (Product / Category / Attribute / Manufacturer)

    Rather than sending the customer to the search page for any of the items that are displayed in the autocomplete for the search, we just use the AmeriCommerce ID for the item/category found and the type in order to take customers directly to the right product page or category page for the matched item.

    Here is the code that the built in script uses when you click on an item in the autocomplete results:

     select: function(event, ui) {
    event.target.value = ui.item.value;
    $("input[id$='" + event.target.getAttribute("data-button-id") + "'").click();
    }

    We modified that section to be:

        select: function(event, ui) {
    if(ui.item.type=="Category"){
    var cat_id=ui.item.id;
    window.location='/store/Category.aspx?catID='+cat_id;
    }
    else{
    var item_id=ui.item.id;
    window.location='/store/ProductDetails.aspx?itemID='+item_id;
    }
    }

    The above script allows you to take customers directly to the product or category page without the need of redirecting through the search page to get there. Our autocomplete is only set to search Products and Categories not Attributes/Manufacturers, so the above script does not address the Attributes/Manufacturers, but could be easily modified to account for those as well.

    It seems like AmeriCommerce could easily make a similar modification to the ac.autocomplete.js script in order to avoid having to redirect customers through the search page and improve the customer experience. 

    This would not however address Karen's concerns about not being able to search anything other than the title itself for categories. 

    You can see a working example by going to our site https://secure.cougarpartscatalog.com, and enter into the search box: "throttle bracket".  This should give you the following 6 results:

    Clicking the first 4 item will take you directly to the product page, clicking the last 2 item will take directly to the category page.

    1
  • Trevor Gonzales

    That's a solid solution Joshua 👍 I considered modifying that file in the past, but my concern was functionality breaking "IF" it was updated by AC or someone decided to alter the autocomplete to show more (ex. attributes) and weren't aware I modified it lol. 

    However, I'm going to modify it as you did because that meets our needs. Later I'll try to break it before adding note for any future dev. Thanks man!

    0
  • Joshua Artman

    Hi Trevor,

    Since the builtin "/store/inc/ac.autocomplete.js" is added to our site outside of the templates, we can not directly replace that script. So in order to avoid my script and the built in autocomplete conflicting, I wrapped my script in a function:

    function initiate_autocomplete(element){

    element.autocomplete({

    //your custom autocomplete script

    });

    }

    Then used the following to remove the auto complete added by the AmeriCommerce script and initialize my override:

    function override_autosearch(){
    $('input:text.AutocompleteSearchBox').autocomplete( "destroy" ); //remove any previously defined autocomplete
    $('input:text.AutocompleteSearchBox').each(function(){initiate_autocomplete($(this));});// for each autocomplete enabled search box
    }//end function to override built in autocomplete

    $(function(){
    setTimeout(override_autosearch(),250);//wait for 250 milliseconds to make sure page is loaded then override the default autocomplete
    });

     

    0
  • Trevor Gonzales

    Thanks. I noticed that when going over your site code. Didn't realize until looking into it that Autocomplete was from jQuery UI which made sense for the destroy method. Thanks again Josh

    0

Please sign in to leave a comment.

We're Here To Help


Standard Support Hours: Monday-Friday 8AM-5PM CST
Looking for Premium Support? Just ask!

Speak to a live person
1 (800) 936-9006
Submit A Support Ticket
Submit Your Ticket Here