Smile-SA / elasticsuite

Smile ElasticSuite - Magento 2 merchandising and search engine built on ElasticSearch
https://elasticsuite.io
Open Software License 3.0
760 stars 339 forks source link

Autocomplete template broken #1112

Closed george-vlahakis closed 5 years ago

george-vlahakis commented 5 years ago

In latest version the autocomplete is broken due to wrong element types being expected in the list.

In specific the items are rendered wrongly due to missing styling and they are not clickable due to incorrect selector.

Preconditions

Magento 2.2 ElasticSuite 2.6 Environment : Development

Third party modules : (too many to mention - none of which should or is effecting this) Porto and Destino theme however

Steps to reproduce

  1. Install and deploy as normal
  2. Test autocomplete
  3. List of candidates shown

Expected result

  1. List of candidates rendered properly and with click functionality

Actual result

  1. Improper rendering (missing styling) and no click functionality.

The source behind the issue: smile/elasticsuite/src/module-elasticsuite-core/view/frontend/web/js/form-mini.js : 31

    $.widget('smileEs.quickSearch', $.mage.quickSearch, {
        options: {
            autocomplete: 'off',
            minSearchLength: 2,
            responseFieldElements: 'dl dd',
            selectClass: 'selected',
            submitBtn: 'button[type="submit"]',
            searchLabel: '[data-role=minisearch-label]'
        },

Above the responseFieldElements is set to dl dd when the QuickSearch widget is actually passing the template of li.

Through the specified file there are references to dl and dd as well causing breakage.

What I do not understand is that ES seems to have kept the pattern of dl dd throughout all versions of this file and Magento is not matching them anywhere so what am I missing here?! How can I confirm this is in fact an error or another element is not correctly being overwritten?

george-vlahakis commented 5 years ago

Found the issue. It was Porto related (no surprises here I suppose). For those interested in solving I had to change the code in

app/design/frontend/Smartwave/porto/Smartwave_Porto/layout/default.xml

replacing the old block with the ElasticSuite block but also adding all the arguments (other posts suggest only the replacing of the block:

                <!--<block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" /> -->
                <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>
                            <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_ElasticsuiteCatalog/autocomplete/product-attribute</item>
                                <item name="titleRenderer" xsi:type="string">Smile_ElasticsuiteCatalog/js/autocomplete/product-attribute</item>
                            </item>
                        </argument>
                    </arguments>
                </block>

Following this change autocomplete now works.

Closing ticket