Project-Pro/vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Making new "salony" page

Browse Source
This commit is contained in:
Roman Pyrih
2026-01-28 13:27:14 +01:00
parent cecfe792a7
commit 8c809ab084
4 changed files with 657 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
templates_user/pages/salony-sprzedazy.php
View File

@@ -3,31 +3,46 @@
?>
<div class="main-page" id="places-contact-maps">
<section class="box-1" id="box-map-showrooms" style="position: relative; display: flex; height: 700px;">
<section class="box-1" id="box-map-showrooms">
<div id="showrooms-sidebar">
<div id="results-list">
<!-- <p>Wpisz miasto</p> -->
<div id="showrooms-sidebar--header">
<form id="search-showrooms-form">
<input type="text" id="place" placeholder="wpisz miejscowość" />
<button type="submit">FILTRUJ</button>
</form>
</div>
<div id="showrooms-sidebar--body">
<div id="results-list"></div>
</div>
</div>
<div id="map" style="flex-grow: 1; height: 100%;"></div>
<div id="showrooms-data-box">
<div id="map" style="flex-grow: 1; height: 100%;"></div>
<div id="showroom-popup" class="showroom-card--popup">
<div class="showroom-card--popup-wrapper">
<div class="popup--head">
<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">
<div class="info-name"><p></p></div>
<div class="info-time"><p></p></div>
<div class="info-products">
<p>Dostępne produkty</p>
<img src="" alt="">
<div id="showroom-popup" class="showroom-card--popup">
<div class="showroom-card--popup-wrapper">
<div class="popup--head">
<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">
<div class="info-name"><p></p></div>
<div class="info-time">
<strong>Godziny otwarcia</strong><br/>
<div class="info-time--data"></div>
</div>
<div class="info-products">
<p>Dostępne produkty</p>
<ul>
</ul>
</div>
<div class="info-contact"></div>
</div>
<div class="popup--body-footer">
</div>
<div class="info-contact"><p></p></div>
</div>
</div>
</div>
@@ -48,13 +63,16 @@
/**
* Fetch showroom data from API
*/
fetch('/api/kontakt-mapa')
const showroomsPromise = fetch('/api/kontakt-mapa')
.then(response => response.json())
.then(data => {
showrooms = data.data;
showrooms = (data && data.data) ? data.data : [];
return showrooms;
})
.catch(error => {
console.error('Error fetching showroom data:', error);
showrooms = [];
return showrooms;
});
@@ -72,27 +90,29 @@
map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Utworzenie markerów dla wszystkich salonów
renderMarkers();
showroomsPromise.then(() => {
// Utworzenie markerów dla wszystkich salonów
renderMarkers();
// Inicjalizacja klastrów (grupowanie markerów)
if (typeof markerClusterer !== 'undefined') {
markerCluster = new markerClusterer.MarkerClusterer({ map, markers });
}
// Inicjalizacja klastrów (grupowanie markerów)
if (typeof markerClusterer !== 'undefined') {
markerCluster = new markerClusterer.MarkerClusterer({ map, markers });
}
// Inicjalizacja wyszukiwarki
initSearchLogic();
// Inicjalizacja wyszukiwarki
initSearchLogic();
});
}
/**
* Renderowanie markerów na mapie
*/
function renderMarkers() {
console.log(showrooms);
if (markerCluster) markerCluster.clearMarkers();
markers.forEach(m => m.setMap(null));
markers = [];
markers = showrooms.map((item) => {
console.log('item: ', item);
const marker = new google.maps.Marker({
position: { lat: parseFloat(item.position.lat), lng: parseFloat(item.position.lng) },
title: item.city,
@@ -149,7 +169,7 @@
function handleLocationSelection(location) {
map.setCenter(location);
map.setZoom(11);
updateSidebarList(location);
scrollToMap();
}
@@ -165,7 +185,7 @@
// 1. Czyszczenie kontenera
$resultsContainer.empty();
$('#results-list').parent().addClass('has-results');
// 2. Filtrowanie i obliczanie dystansu
let filtered = showrooms
.map(item => ({
@@ -173,7 +193,14 @@
distance: calculateDistance(searchLat, searchLng, item.position.lat, item.position.lng)
}))
.filter(item => item.distance <= MAX_DISTANCE_KM)
.sort((a, b) => a.distance - b.distance);
.sort((a, b) => {
const aIsSales = a.salon_type === 'sales' ? 0 : 1;
const bIsSales = b.salon_type === 'sales' ? 0 : 1;
if (aIsSales !== bIsSales) return aIsSales - bIsSales;
return a.distance - b.distance;
});
// 3. Sprawdzenie wyników
if (filtered.length === 0) {
@@ -196,42 +223,48 @@
const lng = item.position.lng;
const distance = item.distance.toFixed(1);
const itemType = 'SALON SPRZEDAŻY';
const itemType = item.salon_type;
let itemTypeText = '';
console.log('item: ', item);
const $el = `
switch (itemType) {
case 'sales':
itemTypeText = 'SALON SPRZEDAŻY';
break;
case 'partner':
itemTypeText = 'SALON PARTNERSKI';
break;
}
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 ${itemType}"><span>${itemTypeText}<\/span><\/div>
<div class="item-working-hours">
<p>
${item.data_popup.time}
<\/p>
<strong>Godziny otwarcia:<\/strong><br/>
${item.opening_hours}
<\/div>
<div class="item-location">
<p>
${item.data.text}
<\/p>
<strong>${item.salon_name}<\/strong><br/>
${item.address}
<\/div>
<div class="item-contact">
<ul>
${renderContacts(item)}
<\/ul>
${renderContacts(item.contact)}
<\/div>
<\/div>
<\/div>
`;
`);
$el.on('click', () => openShowroomPopup(item));
return $el;
}
function renderContacts(item) {
if (item.contact) {
let html = '';
if (item) {
let html = '<ul>';
if (Array.isArray(item.contact.phone)) {
item.contact.phone.forEach(phone => {
if (Array.isArray(item.phones)) {
item.phones.forEach(phone => {
html += `
<li>
<img src="/upload/filemanager/icon/iphone.svg" alt="">
@@ -241,8 +274,8 @@
});
}
if (Array.isArray(item.contact.email)) {
item.contact.email.forEach(email => {
if (Array.isArray(item.emails)) {
item.emails.forEach(email => {
html += `
<li>
<img src="/upload/filemanager/icon/envelope.svg" alt="">
@@ -252,6 +285,7 @@
});
}
html += '</ul>';
return html;
}
@@ -278,11 +312,35 @@
*/
function openShowroomPopup(item) {
const $popup = $('#showroom-popup');
$popup.find('.info-name p').html(item.data_popup.text);
$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();
let itemType = item.salon_type;
let itemTypeText = '';
switch (itemType) {
case 'sales':
itemTypeText = 'SALON SPRZEDAŻY';
break;
case 'partner':
itemTypeText = 'SALON PARTNERSKI';
break;
}
console.log('item: ', item);
$popup.find('.popup--head').attr('data-type', itemType);
$popup.find('.popup--head p.text').html(itemTypeText);
$popup.find('.info-name').html(`<strong>${item.salon_name}<\/strong><br/>${item.address}`);
$popup.find('.info-time .info-time--data').html(item.opening_hours);
$popup.find('.info-contact').html(`
${renderContacts(item.contact)}
${item.button.url ? `<a href="${item.button.url}" class="showroom-contact-btn">${item.button.label || 'SKONTAKTUJ SIĘ Z NAMI'}</a>` : ''}
`);
$popup.find('.info-products ul').html(
item.products.map(product => `<li>${product.name}<img src="/${product.icon}"></li>`)
);
$popup.find('.popup--body-footer').empty().html(`
<div class="popup--body-footer--baner">
<img src="${item.banner_image}">
<\/div>
`);
$popup.addClass('active');
}
@@ -320,10 +378,6 @@
* Uruchomienie po załadowaniu DOM
*/
$(document).ready(function() {
if (typeof google !== 'undefined') {
initMap();
}
$(document).on('click', '.close-popup', function() {
// $('#showroom-popup').fadeOut();
$('#showroom-popup').removeClass('active');