How do I troubleshoot Magento front-end issues? – Algolia

These are our most common front-end issues:

You are seeing unexpected results

It is possible to see unexpected results while you’re fetching your products. The best way to understand where it’s coming from is to compare them to the results you get with the same search in your Algolia dashboard: go to Indices then search for your default product index (by default : magento_default_products).

If you see the same behavior on the dashboard and on the front end, and it looks unexpected to you, this probably means that there’s an issue with how you configured your index. You can have a look at the online documentation about this topic.

If you see differences between your front end and your dashboard, you should: Check the attributes “visibility_search” and “visibility_catalog” of the records. If they are set to 0, they won’t appear in related pages on the front end.

Have a look at the “Query Rules” tab of the index. The results might be affected by facet query rules or by category merchandising.

Use your favorite browser to help you

Some of the web browsers, like Mozilla Firefox or Google Chrome, have very useful tools to help you investigate the issues on the front end. As the extension loads files and templates that are the same in every Magento 2 website, first thing you can do is to check is everything is fine in the source code of your web pages.

Checking the source code#

To display the source code, press Ctrl + U (or Cmd + U on MacOS) .

If you didn’t turn on the JavaScript merging in the Magento configuration, you can check if the 3 JavaScript files embedded by the extension are loaded in the <head> div (common.js, instantsearch.js and autocomplete.js). These 3 files are mandatory for the search to work.
Search if the variable window.algoliaConfig is defined just below. This variable fetches all the configuration related to Algolia coming from the Magento back-office.
Check if the native search input on the header has been replaced by the Algolia search input.
In the products listing pages powered by InstantSearch.js, search for the DOM selector defined in the back-office in Stores > Algolia Search > Instant Search Results Page > DOM selector (by default, it’s .columns). This selector has to be on the page for the results to be injected in the page.

Keep in mind that all these file injections and template modifications use the standard Magento layout system.

Note that this layout update has been developed to work with the native Magento Luma Theme, so it’s possible that if you made some customization on your front end, you may have to override the Magento layout update as well.

Your browser offers other useful tools situated in the developer tools. To open it, press F12 (or fn + F12 on MacOS).

Using the console

In the console tab, you can type “algoliaConfig” then press Enter, you will see all the configuration contained in the object (coming from your Magento configuration). It is useful to check if your front end is up to date with the latest modifications you made in the back office and perhaps remind you to clear the cache.

Checking the calls made

In the network tab, you can filter the results with the “XHR” sub-tab. Then you can monitor each call to Algolia’s servers when you type your search. By clicking on a call, you will get all the information relative to the request and the response, which can be very useful to verify if the search is working as it should.

Investigating the autocomplete HTML code

If you want to investigate the HTML code of the autocomplete menu with the developer tools, you can activate the debug mode in Stores > Algolia Search > Autocomplete Menu > Enable autocomplete menu’s debug mode. If you do so, the dropdown won’t disappear anymore when you click outside the menu, which is very useful to have a closer look at the HTML generated by the extension.