Search Autocomplete Categories go to "Actual" Category Page

Completed

Trevor Gonzales

• October 14, 2020 18:23

Search fields with Autocomplete Categories turned on should take a visitor to the actual category page which offers attribute filtering.

Instead, when the autocompleted category is selected from the search field, the customer is taken to a search result page, where the Category, was actually a search string???

Images below show the current result when I select Polycarbonate Enclosures (Category) - noted as "Bad ❌" on the image.

Along with image of the actual Polycarbonate Enclosures Category Page it should take you to - noted as "Good ✔️"

Please update this feature to take visitors to the category they are expecting to visit.

 

5

• Official comment

  

  Travis Musgrave

  • March 24, 2022 18:01

  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

  • January 27, 2021 17:43

  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

  • January 28, 2021 02:37
  • Edited

  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

  • January 28, 2021 18:12
  • Edited

  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

  • January 29, 2021 01:42

  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

  • January 29, 2021 16:20

  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.