Update contact page

This commit is contained in:
2026-01-22 09:37:07 +01:00
parent 11ee273b15
commit b5c2cfca18
4 changed files with 373 additions and 152 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -759,125 +759,12 @@ strong {
}
}
}
#showroom-popup.showroom-card--popup {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
backdrop-filter: blur(3px);
background: rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: all 50ms ease-in-out;
&.active {
visibility: visible;
opacity: 1;
}
.showroom-card--popup-wrapper {
width: 650px;
margin-top: 120px;
background: $cWhite;
border-radius: 30px;
display: flex;
flex-direction: column;
overflow: hidden;
.popup--head {
display: flex;
flex-direction: row;
background: #1e2832;
padding: 40px 60px 35px 60px;
p {
color: $cWhite;
font-family: $font3;
font-weight: 600;
font-size: 20px;
line-height: 1;
margin: 0;
position: relative;
&:not(:last-child) {
padding-right: 25px;
margin-right: 25px;
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 3px;
width: 1px;
background: $cWhite;
}
}
}
}
.popup--body {
padding: 20px;
.popup--body-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
p,
a {
color: $cTxtBlack;
font-family: $font3;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
strong {
font-weight: 700;
}
}
.info-name {
p {
padding-left: 11px;
border-left: 5px solid #000;
}
}
.info-time {
}
.info-products {
img {
max-height: 30px;
}
}
}
.popup--body-map {
margin-top: 20px;
line-height: 0;
border-radius: 10px;
overflow: hidden;
height: 200px;
.popup-map {
height: 100%;
}
}
}
}
}
}
}
}
.box-5 {
margin-bottom: 115px;
margin-bottom: 100px;
background: #161717;
.box-5--wrapper {
@@ -1252,16 +1139,224 @@ strong {
#box-map-showrooms {
display: flex;
height: 800px;
margin-bottom: 100px;
#showrooms-sidebar {
width: 540px;
width: 0;
transition: all 300ms ease-in-out;
opacity: 0;
visibility: hidden;
&.has-results {
width: 540px;
opacity: 1;
visibility: visible;
}
#results-list {
display: flex;
flex-direction: column;
row-gap: 12px;
padding: 12px 12px;
overflow-y: auto;
overflow-x: hidden;
height: 700px;
.sidebar-item {
// &:hover {
// .sidebar-item--wrapper {
// background: #fff;
// }
// }
&.active {
.sidebar-item--wrapper {
background: #fff;
border: 1px solid #b4aaa2;
box-shadow: -2px 2px 4.6px #b6aca3;
}
}
.sidebar-item--wrapper {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px 32px;
padding: 24px;
// border: 1px solid #b4aaa2;
border-radius: 10px;
width: 500px;
background: #f7f6f5;
transition: all 250ms ease-in-out;
border: 1px solid #f7f6f5;
.item-type {
span {
display: inline-flex;
padding: 8px 22px 7px;
color: $cWhite;
font-family: $font3;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 1;
background: #1e2832;
border-radius: 100px;
}
}
.item-location {
display: inline-flex;
border-left: 5px solid #1e2832;
padding-left: 14px;
height: fit-content;
p {
color: #1d1d1e;
font-family: $font3;
}
}
.item-working-hours {
p {
color: #1d1d1e;
font-family: $font3;
}
}
.item-contact {
ul {
list-style: none;
padding: 0;
margin: 0;
li {
a {
color: #1d1d1e;
font-family: $font3;
}
}
}
}
}
}
}
}
#showroom-popup.showroom-card--popup {
visibility: hidden;
opacity: 0;
transition: all 50ms ease-in-out;
position: absolute;
z-index: 999;
left: calc(50% + 250px);
top: 40%;
transform: translate(-50%, -50%);
&.active {
visibility: visible;
opacity: 1;
}
.showroom-card--popup-wrapper {
width: 650px;
margin-top: 120px;
background: $cWhite;
border-radius: 30px;
display: flex;
flex-direction: column;
overflow: hidden;
.popup--head {
display: flex;
flex-direction: row;
background: #1e2832;
padding: 40px 60px 35px 60px;
p {
color: $cWhite;
font-family: $font3;
font-weight: 600;
font-size: 20px;
line-height: 1;
margin: 0;
position: relative;
&:not(:last-child) {
padding-right: 25px;
margin-right: 25px;
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 3px;
width: 1px;
background: $cWhite;
}
}
}
.close-popup {
cursor: pointer;
margin: 0 0 0 auto;
width: 20px;
height: 20px;
color: #fff;
font-size: 35px;
line-height: 0.7;
}
}
.popup--body {
padding: 20px;
.popup--body-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
p,
a {
color: $cTxtBlack;
font-family: $font3;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
strong {
font-weight: 700;
}
}
.info-name {
p {
padding-left: 11px;
border-left: 5px solid #000;
}
}
.info-time {
}
.info-products {
img {
max-height: 30px;
}
}
}
.popup--body-map {
margin-top: 20px;
line-height: 0;
border-radius: 10px;
overflow: hidden;
height: 200px;
.popup-map {
height: 100%;
}
}
}
}

View File

@@ -86,6 +86,14 @@
'products' => '/upload/filemanager/icon/available-products-1.svg',
'contact' => '<a href="tel:+48 17 859 56 71">+48 17 859 56 71</a><br/>
<a href="mailto:zapytania@vidok.com">zapytania@vidok.com</a>',
],
'contact' => [
'phone' => [
'+48 17 859 56 71',
],
'email' => [
'zapytania@vidok.com'
]
]
],
[
@@ -108,6 +116,18 @@
<a href="mailto:l.paczkowska@vidok.com">l.paczkowska@vidok.com</a><br/>
<a href="mailto:r.obrocki@vidok.com">r.obrocki@vidok.com</a><br/>
<a href="mailto:s.szela@vidok.com">s.szela@vidok.com</a>',
],
'contact' => [
'phone' => [
'+48 17 853 93 62',
'+48 17 853 94 32',
'+48 735 209 241',
],
'email' => [
'l.paczkowska@vidok.com',
'r.obrocki@vidok.com',
's.szela@vidok.com'
]
]
],
[
@@ -126,6 +146,14 @@
'products' => '/upload/filemanager/icon/available-products-1.svg',
'contact' => '<a href="tel:+48 15 822 98 94">+48 15 822 98 94</a><br/>
<a href="mailto:tarnobrzeg@vidok.com">tarnobrzeg@vidok.com</a>',
],
'contact' => [
'phone' => [
'+48 15 822 98 94',
],
'email' => [
'tarnobrzeg@vidok.com'
]
]
],
[
@@ -144,6 +172,14 @@
'products' => '/upload/filemanager/icon/available-products-1.svg',
'contact' => '<a href="tel:+48 17 225 26 45,">+48 17 225 26 45,</a><br/>
<a href="mailto:lancut@vidok.com">lancut@vidok.com</a>',
],
'contact' => [
'phone' => [
'+48 17 225 26 45,'
],
'email' => [
'lancut@vidok.com'
]
]
],
[
@@ -163,6 +199,15 @@
'contact' => '<a href="tel:+48 882 035 893,">+48 882 035 893,</a><br/>
<a href="tel:+48 13 464 03 38,">+48 13 464 03 38,</a><br/>
<a href="mailto:sanok@vidok.com">sanok@vidok.com</a>',
],
'contact' => [
'phone' => [
'+48 882 035 893,',
'+48 13 464 03 38,'
],
'email' => [
'sanok@vidok.com'
]
]
],
[
@@ -181,6 +226,14 @@
'products' => '/upload/filemanager/icon/available-products-1.svg',
'contact' => '<a href="tel:+48 16 676 02 27,">+48 16 676 02 27,</a><br/>
<a href="mailto:przemysl@vidok.com">przemysl@vidok.com</a>',
],
'contact' => [
'phone' => [
'+48 16 676 02 27,'
],
'email' => [
'przemysl@vidok.com'
]
]
],
@@ -201,6 +254,15 @@
'contact' => '<a href="tel:+48 784 919 155">+48 784 919 155</a><br/>
<a href="tel:12 415 95 49">12 415 95 49</a><br/>
<a href="mailto:krakow@vidok.com">krakow@vidok.com</a>',
],
'contact' => [
'phone' => [
'+48 784 919 155',
'12 415 95 49'
],
'email' => [
'krakow@vidok.com'
]
]
],
[
@@ -220,6 +282,15 @@
'contact' => '<a href="tel:+48 661 804 867">+48 661 804 867</a><br/>
<a href="tel:+48 18 447 68 96">+48 18 447 68 96</a><br/>
<a href="mailto:zakopane@vidok.com">zakopane@vidok.com</a>',
],
'contact' => [
'phone' => [
'+48 661 804 867',
'+48 18 447 68 96'
],
'email' => [
'zakopane@vidok.com'
]
]
],
@@ -241,6 +312,15 @@
'contact' => '<a href="tel:+48 511 071 485">+48 511 071 485</a><br/>
<a href="tel:+48 516 499 983">+48 516 499 983</a><br/>
<a href="mailto:nowytarg@vidok.com">nowytarg@vidok.com</a>',
],
'contact' => [
'phone' => [
'+48 511 071 485',
'+48 516 499 983'
],
'email' => [
'nowytarg@vidok.com'
]
]
],
[
@@ -259,6 +339,14 @@
'products' => '/upload/filemanager/icon/available-products-1.svg',
'contact' => '<a href="tel:+48 13 432 73 11">+48 13 432 73 11</a><br/>
<a href="mailto:krosno@vidok.com">krosno@vidok.com</a>',
],
'contact' => [
'phone' => [
'+48 13 432 73 11'
],
'email' => [
'krosno@vidok.com'
]
]
],
];
@@ -655,7 +743,7 @@
];
?>
<div class="main-page">
<div class="main-page" id="contactApp">
<div class="container">
<div class="row">
<div class="col-12">
@@ -838,20 +926,20 @@
</section>
<section class="box-7" id="box-map-showrooms" style="position: relative; display: flex; height: 700px;">
<div id="showrooms-sidebar" style="width: 350px; overflow-y: auto; background: #f9f9f9; border-right: 1px solid #ddd; padding: 15px;">
<div id="showrooms-sidebar">
<div id="results-list">
<p>Wpisz miasto</p>
<!-- <p>Wpisz miasto</p> -->
</div>
</div>
<div id="map" style="flex-grow: 1; height: 100%;"></div>
<div id="showroom-popup" class="showroom-card--popup" style="display:none; position: absolute; z-index: 999; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; padding: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); width: 450px;">
<div id="showroom-popup" class="showroom-card--popup">
<div class="showroom-card--popup-wrapper">
<span class="close-popup" style="float:right; cursor:pointer;">&times;</span>
<div class="popup--head">
<p class="text"></p>
<strong>VIDOK Okna i Drzwi</strong>
<p class="text">PUNKT SPRZEDAŻY</p>
<p>VIDOK Okna i Drzwi</p>
<span class="close-popup">&times;</span>
</div>
<div class="popup--body">
<div class="popup--body-info">
@@ -859,7 +947,7 @@
<div class="info-time"><p></p></div>
<div class="info-products">
<p>Dostępne produkty</p>
<img src="" alt="" style="max-width: 100px;">
<img src="" alt="">
</div>
<div class="info-contact"><p></p></div>
</div>
@@ -992,6 +1080,8 @@
let map, markerCluster;
let markers = [];
const mapPointIcon = "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png";
/**
* Inicjalizacja mapy Google
*/
@@ -1005,6 +1095,14 @@
map = new google.maps.Map(document.getElementById("map"), mapOptions);
const bigMap = new google.maps.Map(
document.getElementById("big-map"),
{
...mapOptions,
center: {lat: 50.0411, lng: 21.9991},
zoom: 11.2,
}
);
// Utworzenie markerów dla wszystkich salonów
renderMarkers();
@@ -1024,7 +1122,8 @@
markers = showrooms.map((item) => {
const marker = new google.maps.Marker({
position: { lat: parseFloat(item.position.lat), lng: parseFloat(item.position.lng) },
title: item.city
title: item.city,
icon: mapPointIcon
});
marker.addListener("click", () => openShowroomPopup(item));
@@ -1092,6 +1191,7 @@
// 1. Czyszczenie kontenera
$resultsContainer.empty();
$('#results-list').parent().addClass('has-results');
// 2. Filtrowanie i obliczanie dystansu
let filtered = showrooms
@@ -1125,44 +1225,66 @@
const itemType = 'SALON SPRZEDAŻY';
console.log('item: ', item);
const $el = `
<div class="sidebar-item" data-lat="${lat}" data-lng="${lng}">
<div class="sidebar-item--wrapper">
<div class="item-type"><span>${itemType}</span></div>
<div class="item-type"><span>${itemType}<\/span><\/div>
<div class="item-working-hours">
<p>
<strong>Godziny otwarcia:</strong><br/>
Pn-Pt: 7:30-16:30<br/>
Sob-Nd: nieczynne
</p>
</div>
${item.data_popup.time}
<\/p>
<\/div>
<div class="item-location">
<p>
<strong>Rudna Mała<br/>Centrala, Rzeszów</strong>
<br/> Rudna Mała 75/k. Rzeszowa<br/>
36-054 Rudna Mała<br/>
gm. Głogów Małopolski
</p>
</div>
${item.data.text}
<\/p>
<\/div>
<div class="item-contact">
<ul>
<li>
<img src="/upload/filemanager/icon/iphone.svg" alt="">
<a href="tel:+48 17 859 56 71">+48 17 859 56 71</a>
</li>
<li>
<img src="/upload/filemanager/icon/envelope.svg" alt="">
<a href="mailto:zapytania@vidok.com">zapytania@vidok.com</a>
</li>
</ul>
</div>
</div>
</div>
${renderContacts(item)}
<\/ul>
<\/div>
<\/div>
<\/div>
`;
return $el;
}
function renderContacts(item) {
if (item.contact) {
let html = '';
if (Array.isArray(item.contact.phone)) {
item.contact.phone.forEach(phone => {
html += `
<li>
<img src="/upload/filemanager/icon/iphone.svg" alt="">
<a href="tel:${phone.replace(/\s+/g, '')}">${phone}<\/a>
<\/li>
`;
});
}
if (Array.isArray(item.contact.email)) {
item.contact.email.forEach(email => {
html += `
<li>
<img src="/upload/filemanager/icon/envelope.svg" alt="">
<a href="mailto:${email}">${email}<\/a>
<\/li>
`;
});
}
return html;
}
return '';
}
/**
* Globalna obsługa kliknięcia w elementy listy (Event Delegation)
*/
@@ -1170,6 +1292,8 @@
// Pobieramy współrzędne z atrybutów data-
const lat = $(this).data('lat');
const lng = $(this).data('lng');
$(this).addClass('active').siblings().removeClass('active');
if (lat && lng) {
focusOnMarker(lat, lng);
@@ -1185,7 +1309,8 @@
$popup.find('.info-time p').html(item.data_popup.time);
$popup.find('.info-contact p').html(item.data_popup.contact);
$popup.find('.info-products img').attr('src', item.data_popup.products);
$popup.fadeIn();
// $popup.fadeIn();
$popup.addClass('active');
}
/**
@@ -1227,7 +1352,8 @@
}
$(document).on('click', '.close-popup', function() {
$('#showroom-popup').fadeOut();
// $('#showroom-popup').fadeOut();
$('#showroom-popup').removeClass('active');
});
});
</script>