Skip to content

Commit f55e562

Browse files
PierreGauthierPierreGauthier
committed
Make autoicomplete box and filters responsive
1 parent 2706a22 commit f55e562

File tree

11 files changed

+114
-98
lines changed

11 files changed

+114
-98
lines changed

‎src/Controller/Shop/SearchController.php‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ public function __construct(
3434
) {
3535
}
3636

37-
public function getForm(RequestStack $requestStack): Response
37+
public function getForm(Request $request, RequestStack $requestStack): Response
3838
{
3939
/** @var string $query */
4040
$query = $requestStack->getMainRequest()?->get('query');
@@ -52,7 +52,10 @@ public function getForm(RequestStack $requestStack): Response
5252

5353
return $this->render(
5454
'@GallySyliusPlugin/shop/shared/components/header/search/form.html.twig',
55-
['searchForm' => $searchForm->createView()]
55+
[
56+
'searchForm' => $searchForm->createView(),
57+
'mobileMode' => $request->get('mobile_mode'),
58+
]
5659
);
5760
}
5861

‎src/Resources/config/app/twig_hooks.yml‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
sylius_twig_hooks:
22
hooks:
33
'sylius_shop.base.header.content':
4-
search:
5-
template: '@GallySyliusPlugin/shop/shared/components/header/search/hook.html.twig'
4+
search_bar:
5+
template: '@GallySyliusPlugin/shop/shared/components/header/search/search_bar.html.twig'
66
priority: 250
7+
8+
'sylius_shop.base.header':
9+
search_bar:
10+
template: '@GallySyliusPlugin/shop/shared/components/header/search/search_bar_mobile.html.twig'
11+
priority: 150
712

813
'sylius_shop.product.search.content':
914
breadcrumbs:
@@ -18,10 +23,18 @@ sylius_twig_hooks:
1823
component: ~
1924
props: ~
2025
priority: 350
26+
27+
'sylius_shop.product.index.content.body.main.filters':
28+
filter_button:
29+
template: '@GallySyliusPlugin/shop/product/search/content/body/main/filters/filter_button.html.twig'
30+
priority: 100
2131

2232
'sylius_shop.product.search.content.body.main.filters':
2333
search:
2434
template: '@GallySyliusPlugin/shop/product/search/content/body/main/filters/search.html.twig'
35+
filter_button:
36+
template: '@GallySyliusPlugin/shop/product/search/content/body/main/filters/filter_button.html.twig'
37+
priority: 100
2538

2639
'sylius_shop.product.search.content.body.sidebar':
2740
taxonomy:

‎src/Resources/public/search.js‎

Lines changed: 65 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,83 @@
1-
const gallySearchFormHandler = function (event) {
2-
const gallySearchFormContainer = document.querySelector('#searchFormContainer');
3-
if (null !== gallySearchFormContainer) {
4-
const gallyPreviewUrl = gallySearchFormContainer.dataset.previewUrl;
5-
const gallySearchForm = gallySearchFormContainer.querySelector('form');
6-
const gallySearchInput = gallySearchForm.querySelector('input');
7-
const gallySearchResult = gallySearchFormContainer.querySelector('#collapsedSearchResults');
1+
const gallySearchFormHandler = function () {
2+
const gallySearchFormContainers = document.querySelectorAll('.searchFormContainer');
83

9-
let abortController = null;
10-
const gallySearchResultCollapsible = bootstrap.Collapse.getOrCreateInstance(gallySearchResult, {
11-
toggle: false
12-
});
4+
gallySearchFormContainers.forEach(container => {
5+
const gallyPreviewUrl = container.dataset.previewUrl;
6+
const gallySearchForm = container.querySelector('form');
7+
const gallySearchInput = gallySearchForm.querySelector('input');
8+
const gallySearchResult = container.querySelector('.collapsedSearchResults');
139

14-
gallySearchInput.addEventListener('input', (event) => {
15-
const queryText = event.target.value;
10+
let abortController = null;
1611

17-
if (queryText.length >= 3) {
18-
let formData = new FormData(gallySearchForm);
19-
const plainFormData = Object.fromEntries(formData.entries());
12+
gallySearchInput.addEventListener('input', (event) => {
13+
const queryText = event.target.value;
2014

21-
let formDataArray = [];
22-
for (const [key, value] of Object.entries(plainFormData)) {
23-
formDataArray.push(`${encodeURIComponent(key)}=${value}`);
24-
}
25-
let formDataString = formDataArray.join('&');
15+
if (queryText.length >= 3) {
16+
const formData = new FormData(gallySearchForm);
17+
const plainFormData = Object.fromEntries(formData.entries());
18+
const formDataString = new URLSearchParams(plainFormData).toString();
2619

27-
gallySearchResult.querySelector('.loading-results').classList.remove('d-none')
28-
gallySearchResult.querySelector('.results').classList.add('d-none')
29-
gallySearchResult.querySelector('.results').textContent = '';
30-
gallySearchResultCollapsible.show();
20+
gallySearchResult.querySelector('.loading-results').classList.remove('d-none');
21+
gallySearchResult.querySelector('.results').classList.add('d-none');
22+
gallySearchResult.querySelector('.results').textContent = '';
23+
gallySearchResult.classList.add('show');
3124

32-
if (null !== abortController) {
33-
abortController.abort();
34-
abortController = null;
35-
}
25+
if (abortController) {
26+
abortController.abort();
27+
}
3628

37-
abortController = new AbortController();
29+
abortController = new AbortController();
3830

39-
(async () => {
40-
const rawResponse = await fetch(gallyPreviewUrl, {
41-
method: 'POST',
42-
headers: {
43-
'Content-Type': 'application/x-www-form-urlencoded'
44-
},
45-
body: formDataString,
46-
signal: abortController.signal
47-
}).catch((error) => {
48-
// If the request was aborted, do nothing
49-
if (error.name === 'AbortError') {
50-
return;
51-
}
31+
(async () => {
32+
try {
33+
const rawResponse = await fetch(gallyPreviewUrl, {
34+
method: 'POST',
35+
headers: {
36+
'Content-Type': 'application/x-www-form-urlencoded'
37+
},
38+
body: formDataString,
39+
signal: abortController.signal
40+
});
5241

53-
// Otherwise, handle the error here or throw it back to the console
54-
throw error;
55-
});
42+
const content = await rawResponse.json();
5643

57-
// On aborted calls, rawResponse will be undefined
58-
if (rawResponse !== undefined) {
59-
const content = await rawResponse.json();
60-
// Do something with the results here
44+
gallySearchResult.querySelector('.loading-results').classList.add('d-none');
45+
gallySearchResult.querySelector('.results').classList.remove('d-none');
46+
gallySearchResult.querySelector('.results').innerHTML = content.htmlResults;
6147

62-
gallySearchResult.querySelector('.loading-results').classList.add('d-none');
63-
gallySearchResult.querySelector('.results').classList.remove('d-none');
64-
gallySearchResult.querySelector('.results').innerHTML = content.htmlResults;
65-
}
66-
})();
67-
} else {
68-
gallySearchResultCollapsible.hide();
48+
if (!content.htmlResults) {
49+
gallySearchResult.classList.remove('show');
6950
}
70-
});
7151

72-
//
73-
gallySearchInput.addEventListener('focus', (event) => {
74-
const queryText = event.target.value;
75-
if (queryText.length >= 3) {
76-
// If there are already some results, display them
77-
if (gallySearchResult.querySelector('.loading-results').classList.contains('d-none')) {
78-
gallySearchResultCollapsible.show();
79-
}
80-
// Otherwise, trigger a search
81-
else {
82-
gallySearchInput.dispatchEvent(new Event('input'));
83-
}
52+
} catch (error) {
53+
if (error.name !== 'AbortError') {
54+
console.error(error);
8455
}
85-
});
56+
}
57+
})();
58+
} else {
59+
gallySearchResult.classList.remove('show');
60+
}
61+
});
8662

87-
// Add a listener to close the searchResult container
88-
document.addEventListener('click', function (event) {
89-
const gallySearchResult = event.target.closest('#collapsedSearchResults');
90-
if (null === gallySearchResult) {
91-
gallySearchResultCollapsible.hide();
92-
}
93-
});
63+
gallySearchInput.addEventListener('focus', (event) => {
64+
const queryText = event.target.value;
65+
if (queryText.length >= 3) {
66+
if (gallySearchResult.querySelector('.loading-results').classList.contains('d-none')) {
67+
gallySearchResult.classList.add('show');
68+
} else {
69+
gallySearchInput.dispatchEvent(new Event('input'));
70+
}
71+
}
72+
});
73+
});
74+
75+
// Close when clicking outside
76+
document.addEventListener('click', function (event) {
77+
if (!event.target.closest('.collapsedSearchResults')) {
78+
document.querySelectorAll('.collapsedSearchResults').forEach(element => element.classList.remove('show'));
9479
}
95-
}
80+
});
81+
};
9682

9783
window.addEventListener("DOMContentLoaded", gallySearchFormHandler);

‎src/Resources/views/shop/product/index/content/body/sidebar/filters.html.twig‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
{% import '@SyliusShop/shared/buttons.html.twig' as buttons %}
22
{% if is_gally_enabled() %}
33
{% set products = hookable_metadata.context.products %}
4-
<div {{ sylius_test_html_attribute('vertical-filters') }}>
5-
<div class="d-flex flex-column">
4+
<div {{ sylius_test_html_attribute('vertical-filters') }} class="offcanvas-lg offcanvas-start offcanvas-wide p-0" id="searchFilters">
5+
<div class="d-lg-none position-absolute end-0 p-2">
6+
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#searchFilters" aria-label="Close"></button>
7+
</div>
8+
<div class="d-flex flex-column overflow-auto my-2 my-lg-2 px-4 px-lg-2">
69
<form method="get" action="{{ path('sylius_shop_product_index', {'slug': app.request.attributes.get('slug')}) }}">
710
{# Keep the current search in the query on filtering #}
811
{% if products.parameters.get('criteria').search is defined %}

‎src/Resources/views/shop/product/search/content/body/main/filters/filter_button.html.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="col-auto d-lg-none">
2+
<button class="btn btn-icon btn-outline-secondary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#searchFilters" aria-controls="searchFilters" aria-expanded="false" aria-label="Toggle filter">
3+
{{ ux_icon('tabler:filter') }}
4+
</button>
5+
</div>

‎src/Resources/views/shop/product/search/content/body/sidebar/filters.html.twig‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22
{% if is_gally_enabled() %}
33
{% set products = hookable_metadata.context.products %}
44
{% set query = products.parameters.get('query')|default(products.parameters.get('criteria').search.value|default(false)) %}
5-
<div {{ sylius_test_html_attribute('vertical-filters') }}>
6-
<div class="d-flex flex-column">
5+
<div {{ sylius_test_html_attribute('vertical-filters') }} class="offcanvas-lg offcanvas-start offcanvas-wide p-0" id="searchFilters">
6+
<div class="d-lg-none position-absolute end-0 p-2">
7+
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#searchFilters" aria-label="Close"></button>
8+
</div>
9+
<div class="d-flex flex-column overflow-auto my-2 my-lg-2 px-4 px-lg-2">
710
<form method="get" action="{{ path('gally_search_result_page') }}">
811
{# Keep the current search in the query on filtering #}
912
{% if query %}

‎src/Resources/views/shop/shared/components/header/search/autocomplete/results.html.twig‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{% import "@SyliusShop/shared/macro/money.html.twig" as money %}
2+
{% if categories|length or attributes|length or products|length %}
23
<div class="row">
34
{% if categories|length or attributes|length %}
45
{% if products|length %}
5-
<div class="col-md-3 pe-2 border-end">
6+
<div class="col-md-3 pe-2 border -end">
67
{% else %}
78
<div class="col-md-12 pe-2">
89
{% endif %}
@@ -43,6 +44,8 @@
4344
<small>{{ option_label }}</small>
4445
</a>
4546
{% endfor %}
47+
48+
<hr class="d-lg-none"/>
4649
{% endif %}
4750
</div>
4851

@@ -74,4 +77,4 @@
7477
{% endif %}
7578
</div>
7679
</div>
77-
80+
{% endif %}

‎src/Resources/views/shop/shared/components/header/search/form.html.twig‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
1-
<div class="col" id="searchFormContainer" data-preview-url="{{ path('gally_search_result_preview_ajax') }}">
1+
<div class="searchFormContainer col pt-1 {{ mobileMode ? 'd-lg-none' : 'd-none d-lg-block' }}" data-preview-url="{{ path('gally_search_result_preview_ajax') }}">
22
{{ form_start(searchForm) }}
3-
<div class="input-group mb-1 accordion-header">
3+
<div class="input-group mb-2 mt-2 mt-lg-0 mb-lg-1 px-2 px-lg-0">
44
{{ form_widget(searchForm.query) }}
55
<button type="submit" id="search" class="btn btn-outline-secondary btn-sm collapsed" data-bs-toggle="collapse" data-bs-target="#collapsedSearchResults" aria-expanded="false" aria-controls="collapsedSearchResults">
66
{{ ux_icon('tabler:search') }}
77
</button>
8-
98
</div>
10-
<div id="collapsedSearchResults" class="collapse" style="width: 930px; position: absolute; z-index: 10000; margin-left: -250px">
11-
<div class="card p-3">
12-
<div class="loading-results text-center">
9+
{{ form_end(searchForm) }}
10+
<div class="position-absolute start-0 d-flex justify-content-center" style="width: 100%; z-index: 10000">
11+
<div class="card collapsedSearchResults collapse mx-2 p-3" style="max-width: 930px">
12+
<div class="loading-results text-center d-none">
1313
<div class="spinner-border" role="status">
1414
<span class="visually-hidden">Loading...</span>
1515
</div>
1616
</div>
17-
<div class="results d-none">
17+
<div class="results">
1818
</div>
1919
</div>
2020
</div>
21-
{{ form_end(searchForm) }}
2221
</div>

‎src/Resources/views/shop/shared/components/header/search/hook.html.twig‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/Resources/views/shop/shared/components/header/search/search_bar.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{{ render(path('gally_search_form')) }}

0 commit comments

Comments
 (0)