Save
This commit is contained in:
Roman Pyrih
@@ -72,9 +72,10 @@
|
||||
$company_showrooms = [
|
||||
[
|
||||
'provinces' => $provinces['podkarpackie'],
|
||||
'city' => 'Rudna Mała',
|
||||
'position' => [
|
||||
'lat' => 50.1024,
|
||||
'lng' => 21.9760
|
||||
'lat' => 50.1024449780408,
|
||||
'lng' => 21.976135413360446
|
||||
],
|
||||
'data' => [
|
||||
'text' => '<strong>Rudna Mała</strong><br/> Rudna Mała 75/k. Rzeszowa<br/> 36-054 Rudna Mała',
|
||||
@@ -86,16 +87,49 @@
|
||||
'contact' => '<a href="tel:+48 18 442 19 97">+48 18 442 19 97</a><br/>
|
||||
<a href="tel:+48 502 458 992">+48 502 458 992</a><br/>
|
||||
<a href="mailto:oknobud.sacz@gmail.com">oknobud.sacz@gmail.com</a>',
|
||||
'maps' => 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2559.1425723841835!2d21.973517577050675!3d50.10233831236703!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473ce36b077ae3b5%3A0x31bb36833c20c2f0!2sVIDOK%20Sp.%20z%20o.o.%20Producent%20okien%20i%20drzwi!5e0!3m2!1spl!2spl!4v1764582571106!5m2!1spl!2spl'
|
||||
]
|
||||
],
|
||||
[
|
||||
|
||||
]
|
||||
[
|
||||
'provinces' => $provinces['malopolskie'],
|
||||
'city' => 'Kraków',
|
||||
'position' => [
|
||||
'lat' => 50.0906240891062,
|
||||
'lng' => 19.916388298016695
|
||||
],
|
||||
'data' => [
|
||||
'text' => '<strong>SALON KRAKÓW</strong><br/> ul. Opolska 12 A Kraków'
|
||||
],
|
||||
'data_popup' => [
|
||||
'text' => '<strong>SALON KRAKÓW</strong><br/> ul. Opolska 12 A Kraków',
|
||||
'time' => '<strong>Godziny otwarcia:</strong><br/> Pn-Pt: 8-17<br/> Sob.: Nieczynne<br/> Nd.: Nieczynne',
|
||||
'products' => '/upload/filemanager/icon/available-products-1.svg',
|
||||
'contact' => '<a href="tel:+48784919155">+48 784 919 155</a><br/>
|
||||
<a href="mailto:krakow@vidok.com">krakow@vidok.com</a>',
|
||||
]
|
||||
],
|
||||
];
|
||||
|
||||
$partner_showrooms = [
|
||||
|
||||
[
|
||||
'provinces' => $provinces['podkarpackie'],
|
||||
'city' => 'Rudna Mała',
|
||||
'position' => [
|
||||
'lat' => 50.1024449780408,
|
||||
'lng' => 21.976135413360446
|
||||
],
|
||||
'data' => [
|
||||
'text' => '<strong>Rudna Mała</strong><br/> Rudna Mała 75/k. Rzeszowa<br/> 36-054 Rudna Mała',
|
||||
],
|
||||
'data_popup' => [
|
||||
'text' => '<strong>Rudna Mała</strong><br/> Rudna Mała 75/k. Rzeszowa<br/> 36-054 Rudna Mała',
|
||||
'time' => '<strong>Godziny otwarcia:</strong><br/> Pn-Pt: 8-17<br/> Sob: 9-13',
|
||||
'products' => '/upload/filemanager/icon/available-products-1.svg',
|
||||
'contact' => '<a href="tel:+48 18 442 19 97">+48 18 442 19 97</a><br/>
|
||||
<a href="tel:+48 502 458 992">+48 502 458 992</a><br/>
|
||||
<a href="mailto:oknobud.sacz@gmail.com">oknobud.sacz@gmail.com</a>',
|
||||
]
|
||||
],
|
||||
];
|
||||
?>
|
||||
|
||||
@@ -155,7 +189,7 @@
|
||||
<div class="container">
|
||||
<div class="box-2--wrapper">
|
||||
<form method="POST" action="" enctype="multipart/form-data" id="contact-form-new">
|
||||
<input type="hidden" name="action" value="send-contact-form-new">
|
||||
<input type="hidden" name="action" value="send-contact-form-new-2">
|
||||
<input type="hidden" name="token" value="<?= \S::get_session('contact-form-token'); ?>">
|
||||
<input type="hidden" name="website" value="">
|
||||
<div class="c-row">
|
||||
@@ -316,48 +350,18 @@
|
||||
<div class="showrooms-list-cards">
|
||||
<ol>
|
||||
<?php foreach ($company_showrooms as $key => $value) : ?>
|
||||
<li class="showroom-card" data-province='<?= $value['provinces']['name']; ?>'>
|
||||
<li
|
||||
class="showroom-card"
|
||||
data-province='<?= $value['provinces']['name']; ?>'
|
||||
data-type="company"
|
||||
data-index="<?= $key; ?>"
|
||||
>
|
||||
<div class="showroom-card-text">
|
||||
<p><?= $value['data']['text']; ?></p>
|
||||
</div>
|
||||
<div class="showroom-card-action">
|
||||
<input type="button" value="więcej o salonie">
|
||||
</div>
|
||||
|
||||
<div class="showroom-card--popup">
|
||||
<div class="showroom-card--popup-wrapper">
|
||||
<div class="popup--head">
|
||||
<p>SALON FIRMOWY</p>
|
||||
<p>VIDOK Okna i Drzwi</p>
|
||||
</div>
|
||||
<div class="popup--body">
|
||||
<div class="popup--body-info">
|
||||
<div class="info-name">
|
||||
<p>
|
||||
<?= $value['data_popup']['text']; ?>
|
||||
</p>
|
||||
</div>
|
||||
<div class="info-time">
|
||||
<p>
|
||||
<?= $value['data_popup']['time']; ?>
|
||||
</p>
|
||||
</div>
|
||||
<div class="info-products">
|
||||
<p>Dostępne produkty</p>
|
||||
<img src="<?= $value['data_popup']['products']; ?>" alt="">
|
||||
</div>
|
||||
<div class="info-contact">
|
||||
<p>
|
||||
<?= $value['data_popup']['contact']; ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup--body-map">
|
||||
<iframe src="<?= $value['data_popup']['maps']; ?>" width="100%" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ol>
|
||||
@@ -370,34 +374,57 @@
|
||||
</div>
|
||||
<div class="showrooms-list-cards">
|
||||
<ol>
|
||||
<li class="showroom-card">
|
||||
<div class="showroom-card-text">
|
||||
<p>
|
||||
<strong>Rudna Mała</strong><br/>
|
||||
Rudna Mała 75/k. Rzeszowa<br/>
|
||||
36-054 Rudna Mała
|
||||
</p>
|
||||
</div>
|
||||
<div class="showroom-card-action">
|
||||
<input type="button" value="więcej o salonie">
|
||||
</div>
|
||||
</li>
|
||||
<li class="showroom-card">
|
||||
<div class="showroom-card-text">
|
||||
<p>
|
||||
<strong>Rudna Mała</strong><br/>
|
||||
Rudna Mała 75/k. Rzeszowa<br/>
|
||||
36-054 Rudna Mała
|
||||
</p>
|
||||
</div>
|
||||
<div class="showroom-card-action">
|
||||
<input type="button" value="więcej o salonie">
|
||||
</div>
|
||||
</li>
|
||||
<?php foreach ($partner_showrooms as $key => $value) : ?>
|
||||
<li
|
||||
class="showroom-card"
|
||||
data-province='<?= $value['provinces']['name']; ?>'
|
||||
data-type="partner"
|
||||
data-index="<?= $key; ?>"
|
||||
>
|
||||
<div class="showroom-card-text">
|
||||
<p><?= $value['data']['text']; ?></p>
|
||||
</div>
|
||||
<div class="showroom-card-action">
|
||||
<input type="button" value="więcej o salonie">
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="showroom-popup" class="showroom-card--popup">
|
||||
<div class="showroom-card--popup-wrapper">
|
||||
<div class="popup--head">
|
||||
<p class="text"></p>
|
||||
<p>VIDOK Okna i Drzwi</p>
|
||||
</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>
|
||||
<div class="info-contact">
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup--body-map">
|
||||
<div id="popup-map" class="popup-map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -405,8 +432,33 @@
|
||||
</section>
|
||||
|
||||
<section class="box-5">
|
||||
<div class="container">
|
||||
<div class="box-5--wrapper">
|
||||
<div class="c-row">
|
||||
<div class="box-title">
|
||||
<h2>Sprawdź, gdzie kupisz produkty <strong>VIDOK</strong></h2>
|
||||
</div>
|
||||
<div class="box-form">
|
||||
<form action="">
|
||||
<div class="form-search">
|
||||
<div class="row-input">
|
||||
<label for="place">
|
||||
<img src="/upload/filemanager/icon/search-black.svg" alt="">
|
||||
</label>
|
||||
<input type="text" name="place" id="place" placeholder="wpisz miejscowość">
|
||||
</div>
|
||||
<button type="submit">Znajdź salon</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="box-6">
|
||||
<div class="container">
|
||||
<div class="box-5--wrapper">
|
||||
<div class="box-6--wrapper">
|
||||
<div class="c-row c-row-1">
|
||||
<div class="c-col c-col-1">
|
||||
<div class="text-1">
|
||||
@@ -431,7 +483,7 @@
|
||||
</div>
|
||||
<div class="c-col c-col-2">
|
||||
<div class="box-map">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2559.1425723841835!2d21.973517577050675!3d50.10233831236703!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473ce36b077ae3b5%3A0x31bb36833c20c2f0!2sVIDOK%20Sp.%20z%20o.o.%20Producent%20okien%20i%20drzwi!5e0!3m2!1spl!2spl!4v1764582571106!5m2!1spl!2spl" width="100%" height="260" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
<div id="big-map" style="width: 100%;"></div>
|
||||
</div>
|
||||
<div class="box-info">
|
||||
<div class="box-info-left">
|
||||
@@ -513,8 +565,182 @@
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<link class="footer" href="/plugins/fileuploader/jquery.fileuploader.min.css" rel="stylesheet" type="text/css">
|
||||
<link class="footer" href="/plugins/fileuploader/font/font-fileuploader.css" rel="stylesheet" type="text/css">
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo $google_map_api; ?>&callback=initMap" defer></script>
|
||||
<script class="footer" type="text/javascript" src="/plugins/fileuploader/jquery.fileuploader.min.js"></script>
|
||||
|
||||
<script class="footer" type="text/javascript">
|
||||
const companyShowrooms = <?= json_encode($company_showrooms, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT); ?>;
|
||||
const partnerShowrooms = <?= json_encode($partner_showrooms, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT); ?>;
|
||||
let popupMap;
|
||||
|
||||
function initMap() {
|
||||
const mapOptions = {
|
||||
center: {
|
||||
lat: 51.9194,
|
||||
lng: 19.1451
|
||||
},
|
||||
zoom: 6,
|
||||
styles: [
|
||||
{
|
||||
"featureType": "all",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "administrative",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape.man_made",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"visibility": "on"
|
||||
},
|
||||
{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"gamma": "1"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"visibility": "simplified"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels",
|
||||
"stylers": [{
|
||||
"visibility": "simplified"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"weight": "6.61"
|
||||
},
|
||||
{
|
||||
"lightness": "0"
|
||||
},
|
||||
{
|
||||
"gamma": "1.5"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"gamma": "1.5"
|
||||
},
|
||||
{
|
||||
"weight": "0.01"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "labels.text",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const bigMap = new google.maps.Map(
|
||||
document.getElementById("big-map"),
|
||||
{
|
||||
...mapOptions,
|
||||
center: {lat: 50.0411, lng: 21.9991},
|
||||
zoom: 11.2,
|
||||
}
|
||||
);
|
||||
|
||||
const popupMapElement = document.getElementById("popup-map");
|
||||
if (popupMapElement) {
|
||||
popupMap = new google.maps.Map(
|
||||
popupMapElement,
|
||||
{
|
||||
...mapOptions,
|
||||
zoom: 12.5,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$('body').on('click', '.box-5 .box-info .box-info-right', function(e){
|
||||
e.preventDefault()
|
||||
@@ -578,7 +804,6 @@ $(document).ready(function() {
|
||||
let boxShowrooms = $('#box-showrooms');
|
||||
let showroomsNav = $('#showrooms-nav', boxShowrooms)
|
||||
|
||||
|
||||
$(document).on('click', '.showroom-card--popup', function(e) {
|
||||
if (e.target === this) {
|
||||
$(this).removeClass('active');
|
||||
@@ -621,15 +846,121 @@ $(document).ready(function() {
|
||||
}
|
||||
}
|
||||
|
||||
function showMoreInfoPopup(item){
|
||||
function showMoreInfoPopup2(item) {
|
||||
$(item).parent().siblings('.showroom-card--popup').addClass('active')
|
||||
$('body').addClass('fixed')
|
||||
}
|
||||
|
||||
function showMoreInfoPopup(item) {
|
||||
const card = $(item).closest('.showroom-card');
|
||||
const type = card.data('type');
|
||||
const index = card.data('index');
|
||||
const mapPointIcon = "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png";
|
||||
|
||||
let showroom;
|
||||
let popupHeadText;
|
||||
|
||||
|
||||
if (type === 'company') {
|
||||
showroom = companyShowrooms[index];
|
||||
popupHeadText = 'SALON FIRMOWY';
|
||||
} else if (type === 'partner') {
|
||||
showroom = partnerShowrooms[index];
|
||||
popupHeadText = 'SALON PARTNERSKI';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
const popup = $('#showroom-popup');
|
||||
|
||||
// HTML to popup
|
||||
$('.popup--head .text', popup).html(popupHeadText || '');
|
||||
$('.info-name p', popup).html(showroom.data_popup.text || '');
|
||||
$('.info-time p', popup).html(showroom.data_popup.time || '');
|
||||
$('.info-products img', popup).attr('src', showroom.data_popup.products || '');
|
||||
$('.info-contact p', popup).html(showroom.data_popup.contact || '');
|
||||
|
||||
popup.addClass('active');
|
||||
$('body').addClass('fixed');
|
||||
|
||||
// popup map init
|
||||
if (popupMap && showroom.position) {
|
||||
const pos = {
|
||||
lat: parseFloat(showroom.position.lat),
|
||||
lng: parseFloat(showroom.position.lng)
|
||||
};
|
||||
popupMap.setCenter(pos);
|
||||
popupMap.setZoom(13);
|
||||
|
||||
if (window.popupMarker) {
|
||||
window.popupMarker.setMap(null);
|
||||
}
|
||||
window.popupMarker = new google.maps.Marker({
|
||||
map: popupMap,
|
||||
position: pos,
|
||||
icon: mapPointIcon
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// MARK: auto load functions
|
||||
defaultProvinces();
|
||||
})
|
||||
|
||||
$(document).ready(function () {
|
||||
const allShowrooms = [...companyShowrooms, ...partnerShowrooms];
|
||||
|
||||
function normalizeString(str) {
|
||||
return str
|
||||
.toString()
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.normalize("NFD")
|
||||
.replace(/[\u0300-\u036f]/g, "");
|
||||
}
|
||||
|
||||
function findProvinceByPlace(place) {
|
||||
const normalizedPlace = normalizeString(place);
|
||||
|
||||
for (let showroom of allShowrooms) {
|
||||
if (!showroom.city) continue;
|
||||
|
||||
if (normalizeString(showroom.city) === normalizedPlace) {
|
||||
return showroom.provinces.name;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
$('.box-5 .box-form form').on('submit', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const place = $('#place').val();
|
||||
if (!place) return;
|
||||
|
||||
const provinceName = findProvinceByPlace(place);
|
||||
|
||||
if (!provinceName) {
|
||||
alert('Nie znaleziono salonu w podanej miejscowości.');
|
||||
return;
|
||||
}
|
||||
|
||||
const targetBtn = $('#showrooms-nav input.js-showrooms-nav-btn').filter(function () {
|
||||
return $(this).attr('data-province') === provinceName;
|
||||
});
|
||||
|
||||
if (!targetBtn.length) {
|
||||
alert('Znaleziono miejscowość, ale nie udało się dopasować województwa w nawigacji.');
|
||||
return;
|
||||
}
|
||||
|
||||
targetBtn.trigger('click');
|
||||
|
||||
$('html, body').animate({
|
||||
scrollTop: $('.box-4').offset().top - 200
|
||||
}, 600);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user