Browse code
Add phone number to header
Martin Filipovic Hinrichs authored on01/02/2026 10:36:00 Showing4 changed files
- src/Resources/app/storefront/src/scss/areas/_header.scss
- src/Resources/snippet/de_DE/storefront.de-DE.json
- src/Resources/views/storefront/layout/header/header.html.twig
- src/Resources/views/storefront/layout/header/search.html.twig
| ... | ... |
@@ -35,20 +35,49 @@ header.header-main {
|
| 35 | 35 |
padding: 2rem .25rem 0; |
| 36 | 36 |
} |
| 37 | 37 |
|
| 38 |
+.header-row {
|
|
| 39 |
+ display: flex; |
|
| 40 |
+} |
|
| 41 |
+ |
|
| 38 | 42 |
.header-search {
|
| 43 |
+ display: grid; |
|
| 44 |
+ width: max-content; |
|
| 45 |
+ max-width: 100%; |
|
| 46 |
+ margin-left: auto; |
|
| 47 |
+ |
|
| 39 | 48 |
.header-search-btn i[class*="fa-"] {
|
| 40 | 49 |
font-size: 1.6rem; |
| 41 | 50 |
} |
| 42 | 51 |
|
| 43 |
- .header-search-input, .header-search-btn {
|
|
| 52 |
+ .header-search-input {
|
|
| 53 |
+ border: 0; |
|
| 54 |
+ } |
|
| 55 |
+ |
|
| 56 |
+ .header-search-btn {
|
|
| 44 | 57 |
border: 0; |
| 45 | 58 |
} |
| 46 | 59 |
|
| 60 |
+ .input-group {
|
|
| 61 |
+ flex-wrap: nowrap; |
|
| 62 |
+ min-width: 500px; |
|
| 63 |
+ } |
|
| 64 |
+ |
|
| 47 | 65 |
#header-main-search-input::placeholder {
|
| 48 | 66 |
color: var(--bs-body-color); |
| 49 | 67 |
} |
| 50 | 68 |
} |
| 51 | 69 |
|
| 70 |
+.header-phone {
|
|
| 71 |
+ color: $primary; |
|
| 72 |
+ padding: 0.5625rem; |
|
| 73 |
+ font-size: rfs-value(18px); |
|
| 74 |
+ |
|
| 75 |
+ .phone-number {
|
|
| 76 |
+ padding-left: 0.5rem; |
|
| 77 |
+ font-size: rfs-value(22px); |
|
| 78 |
+ } |
|
| 79 |
+} |
|
| 80 |
+ |
|
| 52 | 81 |
|
| 53 | 82 |
|
| 54 | 83 |
// |
| ... | ... |
@@ -3,20 +3,20 @@ |
| 3 | 3 |
{% block layout_top_bar %}{% endblock %}
|
| 4 | 4 |
|
| 5 | 5 |
{% block layout_header_navigation %}
|
| 6 |
- <div class="row align-items-center header-row animate-fadeIn justify-content-between"> |
|
| 6 |
+ <div class="row align-items-center header-row justify-content-between"> |
|
| 7 | 7 |
{% block layout_header_logo %}
|
| 8 | 8 |
{{ parent() }}
|
| 9 | 9 |
{% endblock %}
|
| 10 | 10 |
|
| 11 | 11 |
{% block layout_header_search %}
|
| 12 |
- <div class="col-12 col-sm col-lg-4 header-search-col"> |
|
| 12 |
+ <div class="col-auto header-search-col"> |
|
| 13 | 13 |
<div class="row align-items-center"> |
| 14 | 14 |
<div class="col-sm-auto d-none d-sm-block d-lg-none"> |
| 15 | 15 |
{% block layout_header_navigation_toggle_tablet %}
|
| 16 | 16 |
{{ parent() }}
|
| 17 | 17 |
{% endblock %}
|
| 18 | 18 |
</div> |
| 19 |
- <div class="col"> |
|
| 19 |
+ <div> |
|
| 20 | 20 |
{% sw_include '@Storefront/storefront/layout/header/search.html.twig' %}
|
| 21 | 21 |
</div> |
| 22 | 22 |
</div> |
| ... | ... |
@@ -1,4 +1,20 @@ |
| 1 | 1 |
{% sw_extends '@Storefront/storefront/layout/header/search.html.twig' %}
|
| 2 |
+{% block layout_header_search %}
|
|
| 3 |
+ <div class="collapse" |
|
| 4 |
+ id="searchCollapse"> |
|
| 5 |
+ <div class="header-search my-2 m-sm-auto"> |
|
| 6 |
+ {% block layout_header_search_form %}
|
|
| 7 |
+ {{ parent() }}
|
|
| 8 |
+ <div class="header-phone"> |
|
| 9 |
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone-icon lucide-phone"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg> |
|
| 10 |
+ {{ 'header.phone.text'|trans }}
|
|
| 11 |
+ <span class="phone-number">{{ 'header.phone.number'|trans }}</span>
|
|
| 12 |
+ </div> |
|
| 13 |
+ {% endblock %}
|
|
| 14 |
+ </div> |
|
| 15 |
+ |
|
| 16 |
+ </div> |
|
| 17 |
+{% endblock %}
|
|
| 2 | 18 |
|
| 3 | 19 |
{% block layout_header_search_button %}
|
| 4 | 20 |
<button type="submit" |