Elasticsuite: ElasticSuite 2.3 Magento 2.1.7 autocomplete _getSectionTitle — form-mini.min.js:5:305TypeError: undefined is not an object (evaluating 'this.options.templates[type].title')

[mjamato714]

I have attempted to include the elasticsuite autocomplete block in a custom theme layout file like this:
<referenceContainer name="porto_header"> <block class="Smile\ElasticsuiteCore\Block\Search\Form\Autocomplete" name="top.search" as="topSearch" template="Smile_ElasticsuiteCore::search/form.mini.phtml"> <arguments> <argument name="rendererList" xsi:type="array"> <item name="term" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Search terms</item> <item name="template" xsi:type="string">Smile_ElasticsuiteCore/autocomplete/term</item> </item> </argument> </arguments> </block> </referenceContainer>

This results in a browser console javascript error like this:
[Error] TypeError: undefined is not an object (evaluating 'this.options.templates[type].title') _getSectionTitle (form-mini.min.js:5:305) (anonymous function) (jquery-ui.min.js:27:340) _getSectionHeader (form-mini.min.js:4:304) (anonymous function) (jquery-ui.min.js:27:340) (anonymous function) (form-mini.min.js:6:804) (anonymous function) each (9a913ab56d195c28441d18bc89341610.min.js:176:562) (anonymous function) (form-mini.min.js:6:671) proxy (9a913ab56d195c28441d18bc89341610.min.js:186) fire (9a913ab56d195c28441d18bc89341610.min.js:360:229) fireWith (9a913ab56d195c28441d18bc89341610.min.js:366:186) done (9a913ab56d195c28441d18bc89341610.min.js:776:107) callback (9a913ab56d195c28441d18bc89341610.min.js:803)

The search autocomplete box is not loaded at all.

Preconditions

Centos 7, magento 2.1.7 php 7.x elasticsuite 2.3

Magento Version : CE 2.1.7

ElasticSuite Version :2.3

Environment :Production

Third party modules : Smartwave porto theme which includes Smartwave Megamenu module. no other modules.

Steps to reproduce

1. include the elasticsuite autocomplete block in a custom theme layout file like this:
   <referenceContainer name="porto_header"> <block class="Smile\ElasticsuiteCore\Block\Search\Form\Autocomplete" name="top.search" as="topSearch" template="Smile_ElasticsuiteCore::search/form.mini.phtml"> <arguments> <argument name="rendererList" xsi:type="array"> <item name="term" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Search terms</item> <item name="template" xsi:type="string">Smile_ElasticsuiteCore/autocomplete/term</item> </item> </argument> </arguments> </block> </referenceContainer>

Expected result

1. The search autocomplete box should show on frontend and there should not be a javascript error.

Actual result

1. autocomplete box is not shown and browser console shows javascript [Error] TypeError: undefined is not an object (evaluating 'this.options.templates[type].title')

[romainruaud]

Hello,

I'm afraid that we cannot propose support for custom themes, especially since this one is not free (99$), leading me unable to test to reproduce your issue.

I am guessing that something is wrong on layouting. Please first ensure that you are using latest version of Elasticsuite (2.3.6).

Please also note that autocomplete renderers are injected into the autocomplete block in several pieces of layout :

https://github.com/Smile-SA/elasticsuite/blob/master/src/module-elasticsuite-catalog/view/frontend/layout/default.xml#L19

This one should continue to work since it references the block with "top.search" name, which should fit to your own block.

And here :

https://github.com/Smile-SA/elasticsuite/blob/master/src/module-elasticsuite-core/view/frontend/layout/default.xml#L20

Maybe this one is now missing since you re-declared the top.search block. I would suggest you dig more on this one, maybe just try to report it to your own block.

Best regards,

[mjamato714]

Hi @romainruaud,

Thank you very much for your response!

I suspect that you were correct that redeclaring the search block caused one of those two files to be missing.

There may be an alternative way of solving this by addressing module load order, but I was able to solve it in my case by including both of the contents of the linked files in your answer in my custom theme layout/default.xml file (with only the referenceContainer name edit) like this:

<referenceContainer name="porto_header">
                   <block class="Smile\ElasticsuiteCore\Block\Search\Form\Autocomplete" name="top.search" as="topSearch" template="Smile_ElasticsuiteCore::search/form.mini.phtml">
                       <arguments>
                           <argument name="rendererList" xsi:type="array">
                               <item name="term" xsi:type="array">
                                   <item name="title" xsi:type="string" translate="true">Search terms</item>
                                   <item name="template" xsi:type="string">Smile_ElasticsuiteCore/autocomplete/term</item>
                               </item>
                           </argument>
                       </arguments>
                   </block>
               </referenceContainer>
                <referenceBlock name="top.search">
                    <arguments>
                        <argument name="rendererList" xsi:type="array">
                            <item name="product" xsi:type="array">
                                <item name="title" xsi:type="string" translate="true">Products</item>
                                <item name="template" xsi:type="string">Smile_ElasticsuiteCatalog/autocomplete/product</item>
                            </item>
                            <item name="category" xsi:type="array">
                                <item name="title" xsi:type="string" translate="true">Categories</item>
                                <item name="template" xsi:type="string">Smile_ElasticsuiteCatalog/autocomplete/category</item>
                            </item>
                            <item name="product_attribute" xsi:type="array">
                                <item name="title" xsi:type="string" translate="true">Attributes</item>
                                <item name="template" xsi:type="string">Smile_ElasticsuiteCore/autocomplete/term</item>
                                <item name="titleRenderer" xsi:type="string">Smile_ElasticsuiteCatalog/js/autocomplete/product-attribute</item>
                            </item>
                        </argument>
                    </arguments>
                </referenceBlock>

This should work with porto theme and should be similar for other themes that are hiding/replacing the header-wrapper container.

Thanks again @romainruaud and the Smile team for a great extension!

[romainruaud]

Hello @mjamato714

Glad to see you managed to fix your instance !

You're welcome, thank you for using our extension,

I close the issue since it's solved, feel free to reopen it if needed,

Best regards

[inelukipg]

Hi @mjamato714 I'm using Porto and plan to install elasticsuite on my site.
Was that the only problem that you faced in the Porto-elasticsuite combination?

[mjamato714]

@inelukipg

Hi,

Sorry for the wait, I was away the last few days. The issues I faced were:

1. Error during static content deploy both the issue and solution is discussed in this thread:https://github.com/Smile-SA/elasticsuite/issues/91#issuecomment-325209166

2. Search autocomplete results not displaying correctly and unclickable as is discussed in this current thread.

Let me know if you have any questions or issues getting elasticsuite up and running with porto.

Good luck!

[inelukipg]

@mjamato714

Thank you!
Ok for (1) you mean this solution?
in file:
/var/www/html/magento2/app/design/frontend/Smartwave/porto/Magento_CatalogSearch/web/css/source/module.less

_Replace the lines 6-10 with the following:
@autocomplete__background-color: @color-white;
@autocomplete__border: 1px solid @form-element-input__border-color;
@autocomplete-item__border: 1px solid @color-gray90;
@autocomplete-item__hover__color: @color-gray91;
@autocomplete-item-amount__color: @color-gray60;

You then need to go through the file and replace the old classes with these new ones._

I don't want to override the core theme files, could I place this in my child theme?

[mjamato714]

Hi @inelukipg,

Yes I am referring to that solution. You could include an edited version of the module.less file in your child theme which will override the core theme file. Just place the edited file in your custom theme directory within app/design like this:

app/design/frontend/Custom/Theme/Magento_CatalogSearch/web/css/source/module.less

You may still get static content deploy errors for the themes where you have not updated the module.less file, but the child theme should deploy without errors. I have not extensively tested this as I have updated the module.less file in all themes currently to remove all static content deploy errors. I would be interested to hear whether or not you run into any major issues using porto and elasticsuite by overriding the module.less file with the edits in only your child theme.

[deckside]

I have Magento 2.2 with Elasticsuite & Ultimo theme and I'm trying to get the search box to display while using both.

I have tried all the suggestions but I must be missing something.

I do not mind modifying the Ultimo theme,

Any suggestions would be helpful.

[mjamato714]

Hi @deckside,

What does your layout/default.xml look like?

[ukomiljon]

Hi guys, it works!.

After this:
Create file app/design/frontend/Infortis/base/Smile_ElasticsuiteCore/templates/search/form.mini.phtml
and paste the content. flush cache.

thank you very much to all. :)