From 4fb24e3fe54df8b133eebde6a58b99149ac45327 Mon Sep 17 00:00:00 2001 From: Mathis <60252816+Neox63@users.noreply.github.com> Date: Fri, 20 Sep 2024 10:05:27 +0200 Subject: [PATCH] Feat/search dropdown live (#58) * test search dropdown live * working searchbar * live SearchDropdown * live SearchDropdown wip * live SearchDropdown wip --------- Co-authored-by: Lucanis --- base.html.twig | 8 +-- components/Layout/Header/Header.html.twig | 38 +++++----- .../Molecules/SearchBar/SearchBar.html.twig | 57 +++++++++++++-- components/Molecules/SearchBar/searchBar.css | 71 +++++++++++++++++++ index.html.twig | 41 +++++------ src/Twig/SearchBar.php | 52 ++++++++++++++ 6 files changed, 217 insertions(+), 50 deletions(-) create mode 100644 src/Twig/SearchBar.php diff --git a/base.html.twig b/base.html.twig index d3829eb..61f81b0 100644 --- a/base.html.twig +++ b/base.html.twig @@ -2,10 +2,10 @@ - - {% block meta %}{% endblock %} + {% block meta %}{% endblock %} - {% block title %}Welcome!{% endblock %} + {% block title %}Welcome! + {% endblock %} {% block stylesheets %} @@ -17,7 +17,7 @@ {% block header %} - {% include '@components/Layout/Header/Header.html.twig' %} + {% include '@components/Layout/Header/Header.html.twig' with { type: "searchbar" } %} {% endblock %} {% block body %}{% endblock %} diff --git a/components/Layout/Header/Header.html.twig b/components/Layout/Header/Header.html.twig index a1804a4..3e7ea64 100644 --- a/components/Layout/Header/Header.html.twig +++ b/components/Layout/Header/Header.html.twig @@ -5,33 +5,31 @@
{% if type == "searchbar" %} {% endif %}
+ {{ ux_icon('thelia') }} +
{% if type == "searchbar" %} - + {{ component('Flexy:SearchBar') }} {% else %} {% endif %} @@ -41,15 +39,15 @@ {% if type == "searchbar" %} {% endif %} diff --git a/components/Molecules/SearchBar/SearchBar.html.twig b/components/Molecules/SearchBar/SearchBar.html.twig index 4dbdc70..444ddb6 100644 --- a/components/Molecules/SearchBar/SearchBar.html.twig +++ b/components/Molecules/SearchBar/SearchBar.html.twig @@ -1,10 +1,55 @@ -{% set type = type|default('classic') %} {# type: 'classic'|'white' #} +{% set type = type|default('classic') %} +{# type: 'classic'|'white' #} {% set value = value|default('') %} {% set classes = '' %} -{% if type != 'classic' %}{% set classes = classes ~ ' SearchBar--' ~ type %}{% endif %} +{% if type != 'classic' %} + {% set classes = classes ~ ' SearchBar--' ~ type %} +{% endif %} - +
+ + + {% if this.products|length > 0 or this.categories|length > 0 %} +
+
+
+
+ Produits +
+ + {% if this.products|length == 0 %} +
Aucun résultat pour cette recherche
+ {% else %} +
+ {% for product in this.products %} + {% include '@components/Organisms/ProductCard/ProductCard.html.twig' with product %} + {% endfor %} +
+ {% endif %} +
+
+
Catégories
+ +
+
+ {% for category in this.categories %} + + {{category.i18ns.title}} + + {% endfor %} +
+
+
+ {% if this.products|length > 4 %} + + Voir tous les produits + + {% endif %} +
+
+ {% endif %} +
diff --git a/components/Molecules/SearchBar/searchBar.css b/components/Molecules/SearchBar/searchBar.css index 22a677e..d84986c 100644 --- a/components/Molecules/SearchBar/searchBar.css +++ b/components/Molecules/SearchBar/searchBar.css @@ -5,6 +5,7 @@ outline: 1px solid var(--grey-lighter); border-radius: rem-convert(50px); padding: 1rem 1.25rem; + z-index: 1000; button { margin-right: rem-convert(10px); @@ -56,3 +57,73 @@ } } } + +.SearchDropdown { + position: absolute; + top: var(--header-height); + padding-top: 35px; + padding-bottom: 59px; + width: 100vw; + left: 0; + z-index: 1000; + background-color: white; + + &-results { + &-categories { + display: flex; + flex-direction: column; + @screen md { + padding-left: rem-convert(24px); + border-left: 1px solid var(--grey-lighter); + } + + &-list { + display: flex; + flex-direction: column; + gap: rem-convert(24px); + } + } + + &-products { + padding-left: rem-convert(24px); + } + + &-grid { + display: grid; + grid-template-columns: 1fr; + @screen md { + grid-template-columns: 2fr 1fr; + } + } + + --min-height-cartitem: rem-convert(50px); + + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 0.5rem; + + @screen sm { + grid-template-columns: repeat(2, 1fr); + } + + .CartItem { + margin-top: 0; + padding: rem-convert(12px); + display: flex; + gap: 1rem; + + &-img { + flex-shrink: 0; + max-width: 100px; + max-height: 100px; + } + + &-contain { + display: flex; + flex-direction: column; + gap: rem-convert(10px); + justify-content: center; + } + } + } +} diff --git a/index.html.twig b/index.html.twig index 33d9495..23f12f1 100644 --- a/index.html.twig +++ b/index.html.twig @@ -1,11 +1,12 @@ {% extends 'base.html.twig' %} -{% block title %}index{% endblock %} +{% block title %}index +{% endblock %} {% block body %} -{% + {% set blocks = [ { "image": asset("dist/images/placeholder.webp"), @@ -31,22 +32,22 @@ ] %} - {% include '@components/Layout/Hero/Hero.html.twig' with { blocks: blocks } %} + {% include '@components/Layout/Hero/Hero.html.twig' with { blocks: blocks } %} - {{ component('Flexy:CrossSelling', {categoryId: 1, title: 'Last seen products' | trans}) }} + {{ component('Flexy:CrossSelling', {categoryId: 1, title: 'Last seen products' | trans}) }} -
- {{ component('Flexy:CrossSelling', {categoryId: 2, title: 'Popular products' | trans}) }} -
-
- {{ component('Flexy:CrossSelling', {categoryId: 3, title: 'Promotions' | trans}) }} -
+
+ {{ component('Flexy:CrossSelling', {categoryId: 2, title: 'Popular products' | trans}) }} +
+
+ {{ component('Flexy:CrossSelling', {categoryId: 3, title: 'Promotions' | trans}) }} +
- {{ component('Flexy:ProductCategory', {title: 'Our product categories' | trans}) }} + {{ component('Flexy:ProductCategory', {title: 'Our product categories' | trans}) }} - {% + {% set reviews = [4,2,3]|map((note) => ({ author: 'Prénom N.', review:"“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”", @@ -55,22 +56,22 @@ })) %} -
- {% include '@components/Layout/Review/Review.html.twig' with {title: 'Our customers speak about us' | trans, reviews: reviews, button: {label: "See all reviews" | trans, href: "#"}} %} -
+
+ {% include '@components/Layout/Review/Review.html.twig' with {title: 'Our customers speak about us' | trans, reviews: reviews, button: {label: "See all reviews" | trans, href: "#"}} %} +
- {% set news = resources('/api/front/contents', {itemsPerPage:3}) %} + {% set news = resources('/api/front/contents', {itemsPerPage:3}) %} - {% set newsFiltered = news|map((n) => ({ + {% set newsFiltered = news|map((n) => ({ title: n.i18ns.title, date: n.createdAt|date("d/m/Y"), url: '#', img: {url: '/images/placeholder.webp', alt: n.i18ns.title} })) %} -
- {% include '@components/Layout/SimilarContent/SimilarContent.html.twig' with {title: 'Our news' | trans, similarContents: newsFiltered, button: {label: "See all news" | trans, href: "#"}} %} -
+
+ {% include '@components/Layout/SimilarContent/SimilarContent.html.twig' with {title: 'Our news' | trans, similarContents: newsFiltered, button: {label: "See all news" | trans, href: "#"}} %} +
{% endblock %} {#
{{ format_money(number={$TOTAL_TAXED_AMOUNT}, currency_id=$CURRENCY) }}
#} diff --git a/src/Twig/SearchBar.php b/src/Twig/SearchBar.php new file mode 100644 index 0000000..83f66d1 --- /dev/null +++ b/src/Twig/SearchBar.php @@ -0,0 +1,52 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace FlexyBundle\Twig; + +use Symfony\UX\LiveComponent\Attribute\AsLiveComponent; +use Symfony\UX\LiveComponent\Attribute\LiveProp; +use Symfony\UX\LiveComponent\DefaultActionTrait; +use TwigEngine\Service\DataAccess\DataAccessService; + +#[AsLiveComponent(template: '@components/Molecules/SearchBar/SearchBar.html.twig')] +class SearchBar +{ + use DefaultActionTrait; + + #[LiveProp(writable: true)] + public string $query = ''; + + private DataAccessService $dataAccessService; + + public function __construct(DataAccessService $dataAccessService) + { + $this->dataAccessService = $dataAccessService; + } + + public function getProducts(): array + { + if (empty($this->query)) { + return []; + } + + return $this->dataAccessService->resources('/api/front/products', ['title' => $this->query, "limit" => 4]); + } + + public function getCategories(): array + { + if (empty($this->query)) { + return []; + } + + return $this->dataAccessService->resources('/api/front/categories', ['title' => $this->query, "limit" => 4]); + } +}