Skip to content

Commit e438dba

Browse files
gabrieldagamagabrieldagama
authored
ENGCOM-8464: Fix minisearch not appear when disable suggestions search #30634 
2 parents 7ffd42a + b0d30c2 commit e438dba

File tree

5 files changed

+156
-77
lines changed

5 files changed

+156
-77
lines changed

‎app/code/Magento/Search/Test/Mftf/Section/StorefrontQuickSearchSection.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@
1414
<element name="searchMiniForm" type="input" selector="#search_mini_form"/>
1515
<element name="searchDropDownSuggestion" type="text" selector="//div[@id='search_autocomplete']/ul/li/span"/>
1616
<element name="searchDropDownName" type="text" selector="//div[@id='search_autocomplete']//span[contains(., '{{searchQuery}}')]" parameterized="true"/>
17+
<element name="searchMagnifierIcon" type="text" selector="//*[@id='search_mini_form']//label[@data-role='minisearch-label']"/>
1718
</section>
1819
</sections>

‎app/code/Magento/Search/Test/Mftf/Test/StorefrontVerifySearchFieldVisibilityWhenSuggestionDisabledTest.xml‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
9+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
10+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
11+
<test name="StorefrontVerifySearchFieldVisibilityWhenSuggestionDisabledTest">
12+
<annotations>
13+
<stories value="Search Term"/>
14+
<title value="Mini search field appears if suggestions was disabled"/>
15+
<description value="Mini search field appears if suggestions was disabled"/>
16+
<severity value="AVERAGE"/>
17+
<testCaseId value="MC-39443"/>
18+
<group value="mtf_migrated"/>
19+
</annotations>
20+
21+
<before>
22+
<!-- Login as admin -->
23+
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
24+
<!-- Disable search suggestion -->
25+
<magentoCLI command="config:set catalog/search/search_suggestion_enabled 0" stepKey="disableSearchSuggestion"/>
26+
27+
<actionGroup ref="CliCacheCleanActionGroup" stepKey="cleanCacheFirst">
28+
<argument name="tags" value="config full_page"/>
29+
</actionGroup>
30+
</before>
31+
32+
<after>
33+
<!-- Enable search suggestion back -->
34+
<magentoCLI command="config:set catalog/search/search_suggestion_enabled 1" stepKey="disableSearchSuggestion"/>
35+
36+
<actionGroup ref="CliCacheCleanActionGroup" stepKey="cleanCacheSecond">
37+
<argument name="tags" value="config full_page"/>
38+
</actionGroup>
39+
40+
<!-- Admin logout -->
41+
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
42+
</after>
43+
44+
<!-- Go to storefront home page -->
45+
<actionGroup ref="StorefrontOpenHomePageActionGroup" stepKey="openStoreFrontHomePage"/>
46+
47+
<resizeWindow width="767" height="720" stepKey="resizeWindowToMobileView"/>
48+
49+
<click selector="{{StorefrontQuickSearchSection.searchMagnifierIcon}}" stepKey="clickOnMagnifierSearchIcon"/>
50+
51+
<waitForElementVisible selector="{{StorefrontQuickSearchSection.searchPhrase}}" after="clickOnMagnifierSearchIcon" stepKey="seeInputSearchActive"/>
52+
53+
</test>
54+
</tests>

‎app/code/Magento/Search/ViewModel/ConfigProvider.php‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
use Magento\Framework\App\Config\ScopeConfigInterface;
1111
use Magento\Framework\View\Element\Block\ArgumentInterface;
1212
use Magento\Store\Model\ScopeInterface;
13+
use Magento\Search\Helper\Data as SearchHelper;
1314

1415
/**
1516
* View model for search
@@ -26,13 +27,31 @@ class ConfigProvider implements ArgumentInterface
2627
*/
2728
private $scopeConfig;
2829

30+
/**
31+
* @var SearchHelper
32+
*/
33+
private $searchHelper;
34+
2935
/**
3036
* @param ScopeConfigInterface $scopeConfig
37+
* @param SearchHelper $searchHelper
3138
*/
3239
public function __construct(
33-
ScopeConfigInterface $scopeConfig
40+
ScopeConfigInterface $scopeConfig,
41+
SearchHelper $searchHelper
3442
) {
3543
$this->scopeConfig = $scopeConfig;
44+
$this->searchHelper = $searchHelper;
45+
}
46+
47+
/**
48+
* Retrieve search helper instance for template view
49+
*
50+
* @return SearchHelper
51+
*/
52+
public function getSearchHelperData(): SearchHelper
53+
{
54+
return $this->searchHelper;
3655
}
3756

3857
/**

‎app/code/Magento/Search/view/frontend/templates/form.mini.phtml‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,42 @@
44
* See COPYING.txt for license details.
55
*/
66

7-
// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis
87
?>
98
<?php
109
/** @var $block \Magento\Framework\View\Element\Template */
11-
/** @var $helper \Magento\Search\Helper\Data */
10+
/** @var $escaper \Magento\Framework\Escaper */
1211
/** @var $configProvider \Magento\Search\ViewModel\ConfigProvider */
13-
$helper = $this->helper(\Magento\Search\Helper\Data::class);
1412
$configProvider = $block->getData('configProvider');
13+
/** @var $helper \Magento\Search\Helper\Data */
14+
$helper = $configProvider->getSearchHelperData();
15+
$allowedSuggestion = $configProvider->isSuggestionsAllowed();
16+
$quickSearchUrl = $allowedSuggestion ? $escaper->escapeUrl($helper->getSuggestUrl()) : '';
1517
?>
1618
<div class="block block-search">
17-
<div class="block block-title"><strong><?= $block->escapeHtml(__('Search')) ?></strong></div>
19+
<div class="block block-title"><strong><?= $escaper->escapeHtml(__('Search')) ?></strong></div>
1820
<div class="block block-content">
1921
<form class="form minisearch" id="search_mini_form"
20-
action="<?= $block->escapeUrl($helper->getResultUrl()) ?>" method="get">
22+
action="<?= $escaper->escapeUrl($helper->getResultUrl()) ?>" method="get">
2123
<div class="field search">
2224
<label class="label" for="search" data-role="minisearch-label">
23-
<span><?= $block->escapeHtml(__('Search')) ?></span>
25+
<span><?= $escaper->escapeHtml(__('Search')) ?></span>
2426
</label>
2527
<div class="control">
2628
<input id="search"
27-
<?php if ($configProvider->isSuggestionsAllowed()):?>
28-
data-mage-init='{"quickSearch":{
29-
"formSelector":"#search_mini_form",
30-
"url":"<?= $block->escapeUrl($helper->getSuggestUrl())?>",
31-
"destinationSelector":"#search_autocomplete",
32-
"minSearchLength":"<?= $block->escapeHtml($helper->getMinQueryLength()) ?>"}
33-
}'
34-
<?php endif;?>
29+
data-mage-init='{
30+
"quickSearch": {
31+
"formSelector": "#search_mini_form",
32+
"url": "<?= /* @noEscape */ $quickSearchUrl ?>",
33+
"destinationSelector": "#search_autocomplete",
34+
"minSearchLength": "<?= $escaper->escapeHtml($helper->getMinQueryLength()) ?>"
35+
}
36+
}'
3537
type="text"
36-
name="<?= $block->escapeHtmlAttr($helper->getQueryParamName()) ?>"
38+
name="<?= $escaper->escapeHtmlAttr($helper->getQueryParamName()) ?>"
3739
value="<?= /* @noEscape */ $helper->getEscapedQueryText() ?>"
38-
placeholder="<?= $block->escapeHtmlAttr(__('Search entire store here...')) ?>"
40+
placeholder="<?= $escaper->escapeHtmlAttr(__('Search entire store here...')) ?>"
3941
class="input-text"
40-
maxlength="<?= $block->escapeHtmlAttr($helper->getMaxQueryLength()) ?>"
42+
maxlength="<?= $escaper->escapeHtmlAttr($helper->getMaxQueryLength()) ?>"
4143
role="combobox"
4244
aria-haspopup="false"
4345
aria-autocomplete="both"
@@ -49,11 +51,11 @@ $configProvider = $block->getData('configProvider');
4951
</div>
5052
<div class="actions">
5153
<button type="submit"
52-
title="<?= $block->escapeHtml(__('Search')) ?>"
53-
class="action search"
54-
aria-label="Search"
54+
title="<?= $escaper->escapeHtml(__('Search')) ?>"
55+
class="action search"
56+
aria-label="Search"
5557
>
56-
<span><?= $block->escapeHtml(__('Search')) ?></span>
58+
<span><?= $escaper->escapeHtml(__('Search')) ?></span>
5759
</button>
5860
</div>
5961
</form>

‎app/code/Magento/Search/view/frontend/web/js/form-mini.js‎

Lines changed: 58 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ define([
3535
selectClass: 'selected',
3636
template:
3737
'<li class="<%- data.row_class %>" id="qs-option-<%- data.index %>" role="option">' +
38-
'<span class="qs-option-name">' +
39-
' <%- data.title %>' +
40-
'</span>' +
41-
'<span aria-hidden="true" class="amount">' +
42-
'<%- data.num_results %>' +
43-
'</span>' +
38+
'<span class="qs-option-name">' +
39+
' <%- data.title %>' +
40+
'</span>' +
41+
'<span aria-hidden="true" class="amount">' +
42+
'<%- data.num_results %>' +
43+
'</span>' +
4444
'</li>',
4545
submitBtn: 'button[type="submit"]',
4646
searchLabel: '[data-role=minisearch-label]',
@@ -300,60 +300,63 @@ define([
300300

301301
if (value.length >= parseInt(this.options.minSearchLength, 10)) {
302302
this.submitBtn.disabled = false;
303-
$.getJSON(this.options.url, {
304-
q: value
305-
}, $.proxy(function (data) {
306-
if (data.length) {
307-
$.each(data, function (index, element) {
308-
var html;
309-
310-
element.index = index;
311-
html = template({
312-
data: element
313-
});
314-
dropdown.append(html);
315-
});
316-
317-
this._resetResponseList(true);
318303

319-
this.responseList.indexList = this.autoComplete.html(dropdown)
320-
.css(clonePosition)
321-
.show()
322-
.find(this.options.responseFieldElements + ':visible');
323-
324-
this.element.removeAttr('aria-activedescendant');
304+
if (this.options.url !== '') { //eslint-disable-line eqeqeq
305+
$.getJSON(this.options.url, {
306+
q: value
307+
}, $.proxy(function (data) {
308+
if (data.length) {
309+
$.each(data, function (index, element) {
310+
var html;
311+
312+
element.index = index;
313+
html = template({
314+
data: element
315+
});
316+
dropdown.append(html);
317+
});
325318

326-
if (this.responseList.indexList.length) {
327-
this._updateAriaHasPopup(true);
319+
this._resetResponseList(true);
320+
321+
this.responseList.indexList = this.autoComplete.html(dropdown)
322+
.css(clonePosition)
323+
.show()
324+
.find(this.options.responseFieldElements + ':visible');
325+
326+
this.element.removeAttr('aria-activedescendant');
327+
328+
if (this.responseList.indexList.length) {
329+
this._updateAriaHasPopup(true);
330+
} else {
331+
this._updateAriaHasPopup(false);
332+
}
333+
334+
this.responseList.indexList
335+
.on('click', function (e) {
336+
this.responseList.selected = $(e.currentTarget);
337+
this.searchForm.trigger('submit');
338+
}.bind(this))
339+
.on('mouseenter mouseleave', function (e) {
340+
this.responseList.indexList.removeClass(this.options.selectClass);
341+
$(e.target).addClass(this.options.selectClass);
342+
this.responseList.selected = $(e.target);
343+
this.element.attr('aria-activedescendant', $(e.target).attr('id'));
344+
}.bind(this))
345+
.on('mouseout', function (e) {
346+
if (!this._getLastElement() &&
347+
this._getLastElement().hasClass(this.options.selectClass)) {
348+
$(e.target).removeClass(this.options.selectClass);
349+
this._resetResponseList(false);
350+
}
351+
}.bind(this));
328352
} else {
353+
this._resetResponseList(true);
354+
this.autoComplete.hide();
329355
this._updateAriaHasPopup(false);
356+
this.element.removeAttr('aria-activedescendant');
330357
}
331-
332-
this.responseList.indexList
333-
.on('click', function (e) {
334-
this.responseList.selected = $(e.currentTarget);
335-
this.searchForm.trigger('submit');
336-
}.bind(this))
337-
.on('mouseenter mouseleave', function (e) {
338-
this.responseList.indexList.removeClass(this.options.selectClass);
339-
$(e.target).addClass(this.options.selectClass);
340-
this.responseList.selected = $(e.target);
341-
this.element.attr('aria-activedescendant', $(e.target).attr('id'));
342-
}.bind(this))
343-
.on('mouseout', function (e) {
344-
if (!this._getLastElement() &&
345-
this._getLastElement().hasClass(this.options.selectClass)) {
346-
$(e.target).removeClass(this.options.selectClass);
347-
this._resetResponseList(false);
348-
}
349-
}.bind(this));
350-
} else {
351-
this._resetResponseList(true);
352-
this.autoComplete.hide();
353-
this._updateAriaHasPopup(false);
354-
this.element.removeAttr('aria-activedescendant');
355-
}
356-
}, this));
358+
}, this));
359+
}
357360
} else {
358361
this._resetResponseList(true);
359362
this.autoComplete.hide();

0 commit comments

Comments
 (0)