Elastic Suite 2.2.x Magento 2.1 Custom Theme compatibility issue.

acidreian666 commented 8 years ago

Installed fresh copy of Magento 2.1 with elasticsuite 2.2.x Fully Functional 2.1 with Elastic suite working correctly.

Preconditions

Magento 2.1, php7.0.8, mysql 5.7, nginx, Elastic Suite 2.2.x
Proto Magento 2.1 theme version 2.3.2
Steps to reproduce

Verify Magento 2.1 & elasticsuite 2.2.x is functioning
Copy Theme files to Magento folder
Run php bin/magento setup:upgrade
Run php bin/magento setup:di:compile
Run php bin/magento setup:static-content:deploy
Expected result

Correctly Deployed Static content of the New custom Porto theme.
Actual result

Result is a known Error with _module.less issue but not with Luma or Blank Theme
Results An issue "variable @autocomplete-item__border is undefined in file" 3.

I know this issue is known and that's the reason for using the 2.2.x version to begin using Elastic Suite but before i go complaining to the Theme dev I wanted to see what Team-Smile has to say. Also for dev purposes i can supply a custom them for your trouble shooting.

webagil-kevin commented 8 years ago

Hello,

I had the same problem today with Porto. I have found the solution:

In the file : /app/design/frontend/Smartwave/porto/Magento_CatalogSearch/web/css/source/_module.less

Replace old with new variables: @autocompletebackground-color @autocompleteborder @autocomplete-itemborder @autocomplete-itemhovercolor @autocomplete-item-amountcolor

And reload your static-content: php bin/magento setup:static-content:deploy

acidreian666 commented 8 years ago

@DogSports So I fixed the _module.less file like you said and php bin/magento setup:static-content:deploy was a success But now with any of the Demo themes selected the Auto search function does not work products are not displaying like they do when entering Text into the search box while using Luma or Blank themes..

Have you had or resolved this issue?

acidreian666 commented 8 years ago

The issue was the Theme was forcing the Default Search Block. Issue Fixed.

JSoutoP commented 7 years ago

@acidreian666 The issue was the Theme was forcing the Default Search Block. Issue Fixed.

and how did you fixed?? What file did you change? Thanks

quisse commented 7 years ago

I also would like to know how u fixed it. Any update on this? Thx! My solution: I had to add the block to the header container which didn't had the default magento header name anymore.

dharake commented 7 years ago

Hi there,

I'm using Magento 2.1.4, Porto Theme same as @DogSports and their solution fixed my compilation problem.

However, autocomplete results are not showing up properly, only as text, and not clickable. When I switch over to Luma, result is as expected.

@acidreian666 @quisse could you please give a little more information on your solutions? Thanks

quisse commented 7 years ago

@dharake I've added this file to my custom theme

MyTheme/Magento_Search/layout/default.xml

with following content:

<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"/>
        </referenceContainer>
    </body>
</page>

dharake commented 7 years ago

@quisse Thanks for getting back to me on this. Trying out your solution, but no luck so far.

Just to clarify, you are creating a new folder Magento_Search, or did you mean Magento_CatalogSearch?

So far I am getting the following output: 1 exception(s): Exception #0 (Exception): Notice: Undefined index: class in /var/www/html/magento2/vendor/magento/framework/View/Layout/Generator/Block.php on line 213

dharake commented 7 years ago

@quisse Thanks again for the help, in my case I have solved the issue by modifying

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

Line 36 replaced: <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />

with

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

quisse commented 7 years ago

@dharake Yes, I've created Magento_Search (but i don't think this really matters) What you are doing is editing the theme, which can introduce trouble when updating the theme in the future. A better approach is creating a custom theme which extends porto theme & configure all your customisations in your own theme. Glad your problem got solved!

mjamato714 commented 7 years ago

Hi, I am running into a very similar problem as @dharake @quisse and @acidreian666 where the search autocomplete results are not clickable, and no styles or images are showing in the search autocomplete results. @DogSports solution solved my earlier compilation problem with porto theme.

I am using magento CE 2.1.7 elasticsuite 2.3, and porto 2.5.1.

I have attempted @quisse solution by adding this file to my custom porto child theme in /app/design/frontend/Smartwave/custom

( i have also attempted this in /app/design/frontend/Smartwave/porto/)

MyTheme/Magento_Search/layout/default.xml with following content: `

`

This did not not result in any changes.

I have also edited /app/design/frontend/Smartwave/porto/Smartwave_Porto/layout/default.xml

by replacing <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />

with

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

However, the search autocomplete results are still not clickable and images are not showing.

I have read that there is a possibility of the form.mini.phtml template being overridden elsewhere in the theme or parent theme files, but I have yet to locate that in porto theme.

It is very clear from /app/design/frontend/Smartwave/porto/Smartwave_Porto/layout/default.xml file that porto is removing the header-wrapper which smile elasticsuite seems to depend on.

I have been struggling with this for quite some time. Any help or advice would be greatly appreciated, especially from anyone who can provide specific instructions on how to make this extension work with Porto theme. I am sure many will run into this issue as almost everyone uses a custom theme!

Thank you! I look forward to successfully installing this great module!

dharake commented 7 years ago

Hi @mjato, will send you the solution in the morning. I'm running latest magento and Porto, hope you can hold out until then. :)

On 18 Jul 2017 9:37 pm, "mjamato714" notifications@github.com wrote:

Hi, I am running into a very similar problem as @dharake https://github.com/dharake @quisse https://github.com/quisse and @acidreian666 https://github.com/acidreian666 where the search autocomplete results are not clickable, and no styles or images are showing in the search autocomplete results. @DogSports https://github.com/dogsports solution solved my earlier compilation problem with porto theme.

I am using magento CE 2.1.7 elasticsuite 2.3, and porto 2.5.1.

I have attempted @quisse https://github.com/quisse solution by adding this file to my custom porto child theme in /app/design/frontend/ Smartwave/custom

( i have also attempted this in /app/design/frontend/Smartwave/porto/)

MyTheme/Magento_Search/layout/default.xml with following content: <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/ Layout/etc/page_configuration.xsd"> <referenceContainer name="porto_header"> <block class="Smile\ElasticsuiteCore\ Block\Search\Form\Autocomplete" name="top.search" as="topSearch" template="Smile_ElasticsuiteCore::search/form.mini.phtml"/>

This did not not result in any changes.

I have also edited /app/design/frontend/Smartwave/porto/Smartwave_ Porto/layout/default.xml

by replacing <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />

with

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

However, the search autocomplete results are still not clickable and images are not showing.

I have read that there is a possibility of the form.mini.phtml template being overridden elsewhere in the theme or parent theme files, but I have yet to locate that in porto theme.

It is very clear from /app/design/frontend/Smartwave/porto/Smartwave_Porto/layout/default.xml file that porto is removing the header-wrapper which smile elasticsuite seems to depend on.

I have been struggling with this for quite some time. Any help or advice would be greatly appreciated, especially from anyone who can provide specific instructions on how to make this extension work with Porto theme. I am sure many will run into this issue as almost everyone uses a custom theme!

Thank you! I look forward to successfully installing this great module!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Smile-SA/elasticsuite/issues/91#issuecomment-316158048, or mute the thread https://github.com/notifications/unsubscribe-auth/AV1NbV6aTqNw-lgHYYAHyttlBI_vj0Fjks5sPPtcgaJpZM4JenYV .

mjamato714 commented 7 years ago

Thanks a lot! @dharake

dharake commented 7 years ago

Good morning @mjamato714 . So to resolve this issue, please perform the step as I described in the previous post 9th May.

At this point, if you run php bin/magento setup:static-cotent:deploy you should still be getting some errors in the output like:

=== frontend -> Smartwave/porto -> en_US === Compilation from source: /var/www/html/magento2/vendor/magento/theme-frontend-blank/web/css/styles-m.less

Compilation from source: frontend/Smartwave/porto_rtl/en_US/css/styles-m.less variable @autocomplete-item__border is undefined in file /var/www/html/magento2/var/view_preprocessed/css/frontend/Smartwave/porto/en_US/Smile_ElasticsuiteCore/css/source/_module.less in _module.less on line 30, column 34 28| border-bottom: 0; 29| } 30| .lib-css(border-top, @autocomplete-itemborder); 31| cursor: default; 32| margin: 0; 33| padding: @indentxs @indentxl @indentxs @indent__s;

Compilation from source: /var/www/html/magento2/vendor/magento/theme-frontend-blank/web/css/styles-l.less

Compilation from source: frontend/Smartwave/porto_rtl/en_US/css/styles-l.less variable @autocomplete-item__border is undefined in file /var/www/html/magento2/var/view_preprocessed/css/frontend/Smartwave/portol/en_US/Smile_ElasticsuiteCore/css/source/_module.less in _module.less on line 30, column 34 28| border-bottom: 0; 29| } 30| .lib-css(border-top, @autocomplete-itemborder); 31| cursor: default; 32| margin: 0; 33| padding: @indentxs @indentxl @indentxs @indent__s;

Therein lies the remaining issue. To resolve that we need to edit classes in the 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.

Once you save the changes, flush the cache, rerun php bin/magento setup:static-cotent:deploy and you should be good to go!

In summary, the only 2 files that need to be modified are app/design/frontend/Smartwave/porto/Magento_CatalogSearch/web/css/source/module.less & app/design/frontend/Smartwave/porto/Smartwave_Porto/layout/default.xml.

N.B. If you want all the errors to disappear when deploying content, you must also replace the classes in the corresponding file for porto RTL folder.

I hope that resolves your issue.

mjamato714 commented 7 years ago

Thank you very much @dharake for a great summary of these steps.

I have edited the two files: app/design/frontend/Smartwave/porto/Magento_CatalogSearch/web/css/source/module.less & app/design/frontend/Smartwave/porto/Smartwave_Porto/layout/default.xml. as you have described.

While I am no longer getting any errors from php bin/magento setup:static-cotent:deploy, the search autocomplete still seems to be picking up the Magento's Default implementation of item.phtml which uses li tags. Here is what I am seeing in my browser console:

`

                <div id="search_autocomplete" class="search-autocomplete" style="position: absolute; width: 300px; display: none;"><div class="smile-elasticsuite-autocomplete-result"><dl role="listbox" class="autocomplete-list"><li class="" id="qs-option-0" role="option"><span class="qs-option-name"> brake caliper</span><span aria-hidden="true" class="amount">498</span></li></dl><dl role="listbox" class="autocomplete-list"><li class="" id="qs-option-1" role="option"><span class="qs-option-name"> Nugeon Remanufactured Disc Brake Caliper 540 06072 783 Rear Brake Caliper</span><span aria-hidden="true" class="amount"></span></li><li class="" id="qs-option-2" role="option"><span class="qs-option-name"> Nugeon Remanufactured Disc Brake Caliper 540 06071 783 Rear Brake Caliper</span><span aria-hidden="true" class="amount"></span></li><li class="" id="qs-option-3" role="option"><span class="qs-option-name"> Centric 141.20011 Remanufactured Semi-loaded Front Passenger Side Brake Caliper</span><span aria-hidden="true" class="amount"></span></li><li class="" id="qs-option-4" role="option"><span class="qs-option-name"> Disc Brake Caliper Bracket-service Plus Caliper Bracket Fits 02-05 Jaguar X-type</span><span aria-hidden="true" class="amount"></span></li><li class="" id="qs-option-5" role="option"><span class="qs-option-name"> Beck Arnley 077-1940s - True Calipers Rear Passenger Side Brake Caliper</span><span aria-hidden="true" class="amount"></span></li></dl></div></div>
                                </div>`

@dharake did you have to create a custom module in app/code as described here: https://github.com/Smile-SA/elasticsuite/wiki/FAQ under the "The autocomplete box is not showing up / does only display search terms." heading?

Did you have to implement @quisse 's solution in addition to the steps you have described?

Another question I have is do you have smartwave megamenu enabled? I am wondering if this could be interfering somehow.

Thank you again for your help.

ghost commented 7 years ago

Hi @dharake

After modifying files i am getting these errors

Compilation from source: /var/www/magento/vendor/magento/theme-frontend-blank/web/css/styles-m.less

Compilation from source:
frontend/Smartwave/porto_rtl/en_US/css/styles-m.less
variable @product-name-link__color is undefined in file /var/www/magento/var/view_preprocessed/css/frontend/Smartwave/porto_rtl/en_US/css/source/_extends.less in _extends.less on line 252, column 23
250|     > a {
251|         .lib-link(
252|         @_link-color: @product-name-link__color,
253|         @_link-text-decoration: @product-name-link__text-decoration,
254|         @_link-color-visited: @product-name-link__color__visited,
255|         @_link-text-decoration-visited: @product-name-link__text-decoration__visited,

..

Compilation from source: /var/www/magento/vendor/magento/theme-frontend-blank/web/css/styles-m.less

Compilation from source:
frontend/Smartwave/porto/en_US/css/styles-m.less
variable @product-name-link__color is undefined in file /var/www/magento/var/view_preprocessed/css/frontend/Smartwave/porto/en_US/css/source/_extends.less in _extends.less on line 252, column 23
250|     > a {
251|         .lib-link(
252|         @_link-color: @product-name-link__color,
253|         @_link-text-decoration: @product-name-link__text-decoration,
254|         @_link-color-visited: @product-name-link__color__visited,
255|         @_link-text-decoration-visited: @product-name-link__text-decoration__visited,

.................................................................

Compilation from source: /var/www/magento/vendor/magento/theme-frontend-blank/web/css/styles-l.less

Compilation from source:
frontend/Smartwave/porto/en_US/css/styles-l.less
variable @product-name-link__color is undefined in file /var/www/magento/var/view_preprocessed/css/frontend/Smartwave/porto/en_US/css/source/_extends.less in _extends.less on line 252, column 23
250|     > a {
251|         .lib-link(
252|         @_link-color: @product-name-link__color,
253|         @_link-text-decoration: @product-name-link__text-decoration,
254|         @_link-color-visited: @product-name-link__color__visited,
255|         @_link-text-decoration-visited: @product-name-link__text-decoration__visited,

..

Compilation from source: /var/www/magento/vendor/magento/theme-frontend-blank/web/css/styles-l.less

Compilation from source:
frontend/Smartwave/porto_rtl/en_US/css/styles-l.less
variable @product-name-link__color is undefined in file /var/www/magento/var/view_preprocessed/css/frontend/Smartwave/porto_rtl/en_US/css/source/_extends.less in _extends.less on line 252, column 23
250|     > a {
251|         .lib-link(
252|         @_link-color: @product-name-link__color,
253|         @_link-text-decoration: @product-name-link__text-decoration,
254|         @_link-color-visited: @product-name-link__color__visited,
255|         @_link-text-decoration-visited: @product-name-link__text-decoration__visited,

Could you please help me. Regards,

tanolalano commented 7 years ago

Hi @suryawomshi, you have to replace all the old class in the _module.less Regards

ghost commented 7 years ago

Hi, @tanolalano Thanks for the reply,
I have tried replacing all the old class. Search results are plan text, not clickable, complete site css works incorrectly

dharake commented 7 years ago

Hi there, I'm not sure about solutions to your issues, but I can confirm that if you are running M2.1.7 and the latest version of smile elastic suite, my previous solution no longer works. I will update when I solve the issue.

ghost commented 7 years ago

@dharake ,

Thanks for the reply, I thought i am doing something wrong. Yes i am running 2.1.8 with Porto 2.6.

Regards

dharake commented 7 years ago

Yes, as you can see from the output, the error here is occuring in the blank theme, and Porto. So I think it's a magento version compatibility issue but I am not sure. @afoucret maybe can help?

ghost commented 7 years ago

@dharake, I was doing trial and error on my development vm, now the content is getting deployed and search is working, still search results are below mega menu. I will have to see which of the files i have modified.

I will post the changes i have done once i compare them. search

dharake commented 7 years ago

Ah fantastic! Yes if you can post the changes that would be amazing. For your remaining issue that is easy. You need to change the z-index in css for the menu to have a lower value than the autocomplete results.

Example: .autocomplete-div { z-index:10; }

Replace the example class with the actual class. Try in chrome inspector and keep raising the value until the autocomplete appears over the menu.

ghost commented 7 years ago

Hi @dharake

Below steps will achieve working result

Reset Theme Files (whatever we had modified as above) Switch to Luma Theme, Disable All Cache, Install elasticsuite, add below declaration

@autocompletebackground-color: @color-white; @autocompleteborder: 1px solid @form-element-inputborder-color; @autocomplete-itemborder: 1px solid @color-gray90; @autocomplete-itemhovercolor: @color-gray91; @autocomplete-item-amount__color: @color-gray60;

In magento\app\design\frontend\Smartwave\porto\Magento_CatalogSearch\web\css\source_module.less

upgrade, clean & flush cache, compile, content-deploy

Check In Luma Theme, Switch Theme Clean Cache

thats it.

Let me know if it is working for you.

ghost commented 7 years ago

@dharake

In my Live server, the search contents are not clickable, I can see the search response is proper. I cant find the settings causing this behavior.

dharake commented 7 years ago

Most certainly related to :

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

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

mjamato714 commented 7 years ago

Hi @suryawomshi ,

I ran into the issue you are having with autocomplete results not showing properly and are not clickable. My solution is discussed in this thread: https://github.com/Smile-SA/elasticsuite/issues/477

The only difference for you may be the referenceContainer name depending on your theme/ desired position on layout.

Let me know if you have any other questions regarding this and best of luck!

ghost commented 7 years ago

@mjamato714 ,

I was reading issue you had discussed, while you posted here, yes you were right I had replace this

with this

Search terms Smile_ElasticsuiteCore/autocomplete/term

and add this

Products Smile_ElasticsuiteCatalog/autocomplete/product Categories Smile_ElasticsuiteCatalog/autocomplete/category Attributes Smile_ElasticsuiteCore/autocomplete/term Smile_ElasticsuiteCatalog/js/autocomplete/product-attribute

in this file app/design/frontend/Smartwave/porto/Smartwave_Porto/layout/default.xml

Thanks a ton to you and @dharake

george-vlahakis commented 6 years ago

For those also having Porto issues you may wish to see the ticket (and solution) I raised and closed here :https://github.com/Smile-SA/elasticsuite/issues/1112

Smile-SA / elasticsuite

Elastic Suite 2.2.x Magento 2.1 Custom Theme compatibility issue. #91

Preconditions

Steps to reproduce

Expected result

Actual result