Page scroll top after load or refresh, input focus

Hi,
I’m experiencing an unwanted behaviour with the use of algolia instantSearch.
I’m using it on E-shop website, and as mentionned in the title, when i load a page or refresh one, and begin scrolling down before the page is totally loaded, it jump back at top of screen.
First i thought it was a browser behaviour, but it’s not (at least, not in my case)

So i’ve search in the event listeners with Chrome dev tools, and it appears that it is due to ‘search-box.js’, giving focus to the input (i disabled algolia for testing, and the page does not jump anymore)

What i did not understand is how to override this parameter ? ‘search-box.js’ is packed (via webpack).
i have access to ‘algoliaBundle.instantsearch.widgets.searchBox’ (which is a function), but don’t know how to edit the parameter autofocus…

i’m using magento 1.x, and the website is https://www.carreblanc.com/linge-de-lit/housses-de-couette.html

Thanks for your help

Hi @oldbvr, I don’t work on the magento plugin, but from reading it, it seems like there’s an option called autofocus in the algoliaConfig

Is that set to true or false for you?

Hi haroen,
you’re right, when i console log algoliaConfig.autofocus, it returns true.
BUT, i’ve already override this parameter in ‘design/frontend/carreblanc/revamp/template/algoliasearch/internals/configuration.phtml’ with :

document.addEventListener("DOMContentLoaded", function(e) {
    algoliaBundle.$(function ($) {
        window.algoliaConfig.autofocus = false;
    });
});

I don’t get it. isn’t that the same parameter ?
By the way, if i comment out those line in common.js, page jump is still effective…

Normally the parameters in algoliaConfig are configurable from the dashboard, You could also look at the code where algoliaConfig gets defined in the first place :slight_smile:

Unfortunetly, there is no configuration available in the magento dashboard regarding autofocus.
I’ve look in the code, it is triggered by search-box.js, and scroll is triggered by :

if (autofocus === true || autofocus === 'auto' && helper.state.query === '') {
    input.focus();
    input.setSelectionRange(helper.state.query.length, helper.state.query.length);
  }

which means my configuration override is not working, and i can’t even edit those line because it is packed with webpack… thus unfindable in my source code

Hi @oldbvr!

If the idea is just to change the value of algoliaConfig.autofocus, it’s defined here, in the block: https://github.com/algolia/algoliasearch-magento-2/blob/develop/Block/Configuration.php#L189

These values can be updated with the Magento event algolia_after_create_configuration here : https://github.com/algolia/algoliasearch-magento-2/blob/develop/Block/Configuration.php#L273

Here is some documentation on this backend event : https://www.algolia.com/doc/integration/magento-2/customize/custom-back-end-events/?language=php#front-end-configuration

I hope this helps!

Hi @maria.schreiber,
unfortunately, the doc you mention is for magento 2, and i work on a magento 1 project :confused:
algoliaConfig.autofocus has been edited in “template/algoliasearch/internals/configuration.phtml” like this :

document.addEventListener("DOMContentLoaded", function(e) {
    algoliaBundle.$(function ($) {
        window.algoliaConfig.autofocus = false;
    });
});

and i can’t find how to use other magento event to deal with…

Hi,

The best I can do is share with you a link of our Magento 1 documentation: https://www.algolia.com/doc/integration/magento-1/customize/custom-back-end-events/?language=php

Please note that the Magento 1 plugin isn’t supported anymore and as a result supported on it is limited.

Hi @rayrutjes
thanks for your answer

We managed yesterday how to fix the problem :

in js/algoliasearch/instantsearch.js, you can override widgets configurations as below :

/**
         * Search box
         * Docs: https://community.algolia.com/instantsearch.js/documentation/#searchbox
         **/
        searchBox: {
            container: instant_selector,
            placeholder: '', // Add @DND
            autofocus: false
        },`/**
         * Products' hits
         * This widget renders all products into result page
         * Docs: https://community.algolia.com/instantsearch.js/documentation/#hits
         **/
        hits: {
            container: '#instant-search-results-container',
            templates: {....`

Problem solved!