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.

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

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

Closed
acidreian666 opened this issue Aug 7, 2016 · 29 comments
Closed

Comments

@acidreian666
Copy link

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

Preconditions

  1. Magento 2.1, php7.0.8, mysql 5.7, nginx, Elastic Suite 2.2.x
  2. Proto Magento 2.1 theme version 2.3.2

Steps to reproduce

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

Expected result

  1. Correctly Deployed Static content of the New custom Porto theme.

Actual result

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

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

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:
@autocomplete__background-color
@autocomplete__border
@autocomplete-item__border
@autocomplete-item__hover__color
@autocomplete-item-amount__color

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

@acidreian666
Copy link
Author

@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
Copy link
Author

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

@JSoutoP
Copy link

JSoutoP commented Feb 17, 2017

@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
Copy link

quisse commented Mar 21, 2017

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

dharake commented May 9, 2017

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

quisse commented May 9, 2017

@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
Copy link

dharake commented May 9, 2017

@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
Copy link

dharake commented May 9, 2017

@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
Copy link

quisse commented May 9, 2017

@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
Copy link

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

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

dharake commented Jul 18, 2017 via email

@mjamato714
Copy link

Thanks a lot! @dharake

@dharake
Copy link

dharake commented Jul 19, 2017

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-item__border);
31| cursor: default;
32| margin: 0;
33| padding: @indent__xs @indent__xl @indent__xs @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-item__border);
31| cursor: default;
32| margin: 0;
33| padding: @indent__xs @indent__xl @indent__xs @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
Copy link

mjamato714 commented Jul 21, 2017

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 class="control"> <input id="search" type="text" name="q" value="" placeholder="Search entire store here..." class="input-text" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete="both" autocomplete="off" data-block="autocomplete-form"> <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
Copy link

ghost commented Aug 26, 2017

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

tanolalano commented Aug 26, 2017

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

@ghost
Copy link

ghost commented Aug 27, 2017

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

dharake commented Aug 27, 2017

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

ghost commented Aug 27, 2017

@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
Copy link

dharake commented Aug 27, 2017

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

ghost commented Aug 27, 2017

@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
Copy link

dharake commented Aug 27, 2017

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

ghost commented Aug 27, 2017

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

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

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

ghost commented Aug 27, 2017

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

image

@dharake
Copy link

dharake commented Aug 27, 2017

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

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: #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
Copy link

ghost commented Aug 28, 2017

@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
Copy link

For those also having Porto issues you may wish to see the ticket (and solution) I raised and closed here :#1112

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants