Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mini Search Form requiring header-wrapper container #297

Closed
chunyianliew opened this issue Jan 17, 2017 · 5 comments
Closed

Mini Search Form requiring header-wrapper container #297

chunyianliew opened this issue Jan 17, 2017 · 5 comments
Labels
question

Comments

@chunyianliew
Copy link

chunyianliew commented Jan 17, 2017 •
edited
Loading

I am currently having a hard time to get elasticsuite up and running in combination with a 3rd party Magento 2 theme. This is my first time to get an Magento 2 shop up and running, so please bear with me as I am not too experienced with some of the new concepts used.

The theme used is Ultimo from Infortis. After some debugging with the comments provided here from @nikonratm I discovered the following:

In the file app/design/frontend/Infortis/base/Magento_Theme/layout/default.xml several elements are moved to the container "base-header-container", header-wrapper being one of them.

<move element="header-wrapper" destination="base-header-container" />

In the same file I also read the following comment:

 <!-- Note: "header-wrapper" is a default container for default blocks: logo, top links, search, minicart.
             All these blocks were moved to the new base header container.
             But we may still need to display "header-wrapper" in case custom code adds there some blocks. -->

But elasticsuite seems to rely on the header-wrapper container when I look at vendor/smile/elasticsuite/src/module-elasticsuite-core/view/frontend/layout/default.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header-wrapper">
            <block class="Smile\ElasticsuiteCore\Block\Search\Form\Autocomplete" name="top.search" as="topSearch" template="Smile_ElasticsuiteCore::search/form.mini.phtml"/>
        </referenceContainer>
    </body>
</page>

and in the referenced form.mini.phtml the following is stated as comment:

/**
 * Template for quick search mini form.
 * Overriden to manage template injection for the rendering of autocomplete results.
 *
 * @var $block \Smile\ElasticsuiteCore\Block\Search\Form\Mini
 */

So it seems that the Elasticsuite module tries to override the default mini search box functionality by making use of the header-wrapper element that is available in the default Magento 2 Theme. But the header-wrapper container is not available as such in the Infortis Ultimo Theme. And because the theme is quite "fluid" because of a lot of floating elements creating a custom module (solution which worked out for @nikonratm, but unfortunately not for me) turned out to be disastrous for the layout of the theme.

I have submitted a request for support to the Ultimo Theme developer as I read the following in app/design/frontend/Infortis/base/Infortis_Base/templates/html/header.phtml

    //Get HTML of header blocks
    //**************************************************************
    //TODO: print main containers: "header.container" and "header-wrapper"

But pending on the answer from the developer, does anybody of you here have a bright idea how this can be resolved? Any help is highly appreciated.
@chunyianliew chunyianliew mentioned this issue Jan 17, 2017
Closed
@romainruaud
Copy link
Collaborator

Hello @webshopessentials

I'm afraid but we cannot provide support for third-party modules integration.

I have studied what you describe and for me the problem is clear : the Infortis team made the "header-wrapper" block disappear, and they should fix this so you will be able to retrieve any blocks that are child of this one.

As a workaround you may try to include the ElasticSuite mini search box elsewhere in your layout : on a container which you are sure that is displayed on the Infortis theme.

You just have to add this syntax where you want to include the block :

<block class="Smile\ElasticsuiteCore\Block\Search\Form\Autocomplete" name="top.search" as="topSearch" template="Smile_ElasticsuiteCore::search/form.mini.phtml"/>

@chunyianliew
Copy link
Author

Hi @romainruaud, thank you for taking the time to look into my issue. Unfortunately the Infortis team informed me that they do not support third party modules ;)
Next time I will ask any other Magento 2 Theme supplier first if they support the header-wrapper block.
But at least I now know how I can resolve it myself. Thank you.

@mjamato714
Copy link

mjamato714 commented Jul 24, 2017 •
edited
Loading

Hi @romainruaud , can you please provide any more insight into adding the elasticsuite mini search box elsewhere on a layout in the latest elasticsuite version. This is applicable information for both custom themes as well as adding the search autocomplete box anywhere else on any layout.

The layout file located in vendor/smile/elasticsuite/src/module-elasticsuite-core/view/frontend/layout/default.xml looks like this in the version I have installed.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <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> </body> </page>

After attempting to edit the layout in my custom theme file in app/design/frontend/Smartwave/custom/Smartwave_Porto/layout/default.xml with only the line
<block class="Smile\ElasticsuiteCore\Block\Search\Form\Autocomplete" name="top.search" as="topSearch" template="Smile_ElasticsuiteCore::search/form.mini.phtml"/>

The search autocomplete box does not properly load any styles and links are not clickable.

After viewing the current version default layout file in
vendor/smile/elasticsuite/src/module-elasticsuite-core/view/frontend/layout/default.xml, I have attempted to add the block like the following in my custom layout file: app/design/frontend/Smartwave/custom/Smartwave_Porto/layout/default.xml

<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>

But I am currently getting an error like this in var/report preventing frontend from showing at all:

main.CRITICAL: Magento\Framework\Exception\LocalizedException: Object DOMDocument should be created. in /var/www/html/magento2/magento2/vendor/magento/framework/View/Element/UiComponent/Config/DomMerger.php:408

What is the correct approach to add the autocomplete block to another place on the layout besides header-container in the current version. Has this changed since your previous answer?

Thank you for any and all suggestions!

@tanolalano
Copy link

tanolalano commented Aug 22, 2017 •
edited
Loading

Hi,
@webshopessentials I'm able to display search box with custom module as described in FAQ and in #272 but now the issue is that the search result only display search terms and they are not clickable.
Any help to resolve?
Thank you
schermata 2017-08-22 alle 15 39 37

@deckside
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@tanolalano @deckside @romainruaud @mjamato714 @chunyianliew