Skip to content

Commit 92b1b29

Browse files
committed
search template
1 parent fb758ce commit 92b1b29

File tree

7 files changed

+114
-72
lines changed

7 files changed

+114
-72
lines changed

category.html.twig

Lines changed: 1 addition & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -8,75 +8,7 @@
88
{% set totalProducts = resources('/api/front/products', {'productCategories.category.id': attr('category', 'id'), itemsPerPage:9, page: page}) %}
99

1010
{% include '@components/Layout/Subheader/Category/SubheaderCategory.twig' with {title: attr('category', 'title'), description: attr('category', 'description'), nbProducts: products|length} %}
11-
12-
<section class="px-6 lg:px-[120px] py-6 lg:flex lg:gap-[115px] lg:justify-between">
13-
<div class="w-[310px] lg:block hidden mt-[44px] sticky top-20">
14-
<div class="h4 mb-[22px]">{{ 'Filter'|trans }}</div>
15-
16-
<div>
17-
{% include '@components/Molecules/Accordion/Accordion.twig' with {
18-
title: "Size" | trans,
19-
content: ""
20-
} %}
21-
{% include '@components/Molecules/Accordion/Accordion.twig' with {
22-
title: "Color" | trans,
23-
content: "test"
24-
} %}
25-
{% include '@components/Molecules/Accordion/Accordion.twig' with {
26-
title: "Material" | trans,
27-
content: "test"
28-
} %}
29-
</div>
30-
</div>
31-
32-
<div>
33-
<div class="lg:justify-between lg:items-center mb-[29px] hidden lg:flex">
34-
<span>{{ products|length }}
35-
{{ 'item(s)'|trans }}</span>
36-
37-
<div class="w-[250px]">
38-
{% include '@components/Molecules/Fields/FieldSelect/FieldSelect.twig' with {
39-
label: "Sort by" | trans,
40-
tooltip: "Sort the products" | trans,
41-
placeholder: "Sort by" | trans,
42-
options: [{
43-
value: "priceASC",
44-
label: "Price ascending" | trans
45-
}, {
46-
value: "priceDESC",
47-
label: "Price descending" | trans
48-
}, {
49-
value: "newness",
50-
label: "New arrivals" | trans
51-
}, {
52-
value: "promo",
53-
label: "Promotions" | trans
54-
}],
55-
} %}
56-
</div>
57-
58-
</div>
59-
60-
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8 mb-[40px]">
61-
{% for product in products %}
62-
{% include '@components/Organisms/ProductCard/ProductCard.twig' with product|merge({displayWishButton: true}) %}
63-
{% endfor %}
64-
</div>
65-
66-
<div class='mx-auto lg:mx-0 lg:ml-auto w-max'>
67-
{% include '@components/Molecules/Pagination/Pagination.twig' with {
68-
prevText: 'Previous' | trans,
69-
nextText: 'Next' | trans,
70-
currentPage: page,
71-
totalPages: 3
72-
} %}
73-
</div>
74-
75-
<p class="paragraph-4 lg:paragraph-2 lg:pt-[56px] lg:pb-[96px] max-w-[664px] pt-[102px] pb-[52px] mx-auto">
76-
{{ attr('category', 'description') }}
77-
</p>
78-
</div>
79-
</section>
11+
{% include '@components/Layout/CategoryProduct/CategoryProduct.html.twig' with {products: products, totalProducts:totalProducts} %}
8012

8113
{% include '@components/Layout/Reinsurance/Reinsurance.twig' with { data: [
8214
{
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{% set products = products|default([]) %}
2+
{% set totalProducts = totalProducts|default("") %}
3+
4+
<section class="px-6 lg:px-[120px] py-6 lg:flex lg:gap-[115px] lg:justify-between">
5+
<div class="w-[310px] lg:block hidden mt-[44px] sticky top-20">
6+
<div class="h4 mb-[22px]">{{ 'Filter'|trans }}</div>
7+
8+
<div>
9+
{% include '@components/Molecules/Accordion/Accordion.twig' with {
10+
title: "Size" | trans,
11+
content: ""
12+
} %}
13+
{% include '@components/Molecules/Accordion/Accordion.twig' with {
14+
title: "Color" | trans,
15+
content: "test"
16+
} %}
17+
{% include '@components/Molecules/Accordion/Accordion.twig' with {
18+
title: "Material" | trans,
19+
content: "test"
20+
} %}
21+
</div>
22+
</div>
23+
24+
<div>
25+
<div class="lg:justify-between lg:items-center mb-[29px] hidden lg:flex">
26+
<span>{{ products|length }}
27+
{{ 'item(s)'|trans }}</span>
28+
29+
<div class="w-[250px]">
30+
{% include '@components/Molecules/Fields/FieldSelect/FieldSelect.twig' with {
31+
label: "Sort by" | trans,
32+
tooltip: "Sort the products" | trans,
33+
placeholder: "Sort by" | trans,
34+
options: [{
35+
value: "priceASC",
36+
label: "Price ascending" | trans
37+
}, {
38+
value: "priceDESC",
39+
label: "Price descending" | trans
40+
}, {
41+
value: "newness",
42+
label: "New arrivals" | trans
43+
}, {
44+
value: "promo",
45+
label: "Promotions" | trans
46+
}],
47+
} %}
48+
</div>
49+
50+
</div>
51+
52+
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8 mb-[40px]">
53+
{% for product in products %}
54+
{% include '@components/Organisms/ProductCard/ProductCard.twig' with product|merge({displayWishButton: true}) %}
55+
{% endfor %}
56+
</div>
57+
58+
<div class='mx-auto lg:mx-0 lg:ml-auto w-max'>
59+
{% include '@components/Molecules/Pagination/Pagination.twig' with {
60+
prevText: 'Previous' | trans,
61+
nextText: 'Next' | trans,
62+
currentPage: page,
63+
totalPages: 3
64+
} %}
65+
</div>
66+
67+
<p class="paragraph-4 lg:paragraph-2 lg:pt-[56px] lg:pb-[96px] max-w-[664px] pt-[102px] pb-[52px] mx-auto">
68+
{{ attr('category', 'description') }}
69+
</p>
70+
</div>
71+
</section>

components/Layout/Subheader/Category/SubheaderCategory.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
{% set nbProducts = nbProducts|default(0) %}
44

55
<div class='Subheader Subheader--category'>
6-
<div class='container flex flex-col mx-auto'>
6+
<div class='max-w-[600px] w-full flex flex-col mx-auto'>
77
<h1 class='Subheader-title'>{{ title }}</h1>
88
<div class='Subheader-description'>
99
{{ description }}

components/Layout/Subheader/SearchResult/SubheaderSearch.twig

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22
{% set nbProducts = nbProducts|default(0) %}
33

44
<div class='Subheader Subheader--search'>
5-
<div class='container flex flex-col mx-auto'>
5+
<div class='max-w-[600px] w-full flex flex-col mx-auto'>
66
<h1 class='Subheader-title Subheader-title--search'>{{ title }}</h1>
77
<div>
88
{% include '@components/Molecules/SearchBar/SearchBar.twig' with { label: "Find a delivery address"|trans, classes: 'SearchBar--white ',placeholder: "e.g. City, Postcode"|trans,iconButtonLeft:true, iconButton: "search" } %}
9-
109
</div>
1110
<div class='Subheader-info'>
1211
<div>{{ nbProducts}} {{ 'product(s)'|trans }}</div>

search.html.twig

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{% extends 'base.html.twig' %}
2+
{% set page = app.request.get('page')|default(1) %}
3+
{% set searchString = app.request.get('query')|default("") %}
4+
5+
{% block title %}{{ 'Search'|trans }}
6+
{% endblock %}
7+
8+
{% block body %}
9+
{% set products = resources('/api/front/products', {itemsPerPage:9, page: page}) %}
10+
{% set totalProducts = resources('/api/front/products', {itemsPerPage:9, page: page}) %}
11+
12+
{% include '@components/Layout/Subheader/SearchResult/SubheaderSearch.twig' with {title: "Search results" | trans, } %}
13+
{% include '@components/Layout/CategoryProduct/CategoryProduct.html.twig' with {products: products, totalProducts:totalProducts} %}
14+
15+
{% include '@components/Layout/Reinsurance/Reinsurance.twig' with { data: [
16+
{
17+
strongText: 'Free delivery' | trans,
18+
text: 'For any order over €100' | trans,
19+
linkLabel: 'See conditions' | trans,
20+
link: '#',
21+
icon: 'reinsurance-delivery'
22+
},
23+
{
24+
strongText: 'Secure payment' | trans,
25+
text: 'Credit card, Paypal' | trans,
26+
linkLabel: 'See conditions' | trans,
27+
link: '#',
28+
icon: 'reinsurance-payment'
29+
},
30+
{
31+
strongText: 'Satisfied or refunded' | trans,
32+
text: 'Exchange or refund offered within 30 days' | trans,
33+
linkLabel: 'See conditions' | trans,
34+
link: '#',
35+
icon: 'reinsurance-satisfied'
36+
}
37+
] } %}
38+
{% endblock %}

translations/messages.en.yaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ Your password: Your password
102102
Forgot password?: Forgot password?
103103
Don’t have an account yet?: Don’t have an account yet?
104104
Sign up: Sign up
105+
Search results: Search results
105106
Description: Description
106107
Features: Features
107108
Shipping & Returns: Shipping & Returns

translations/messages.fr.yaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ Your password: Votre mot de passe
103103
Forgot password?: Mot de passe oublié ?
104104
Don’t have an account yet?: Vous n'avez pas encore de compte ?
105105
Sign up: S'inscrire
106+
Search results: Résultat de recherche
106107
Description: Description
107108
Features: Caractéristiques
108109
Shipping & Returns: Expédition & Retours

0 commit comments

Comments
 (0)