Your Name
2 months ago
commit
11337a4754
@ -1,502 +1,136 @@ |
||||
<?php |
||||
/* |
||||
Template Name: Where to byu |
||||
Template Name: Where to Buy |
||||
Template Post Type: page |
||||
*/ |
||||
|
||||
wp_enqueue_style( 'gp-wtb-style', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-core.css?v=1.14' ); |
||||
wp_enqueue_style( 'gp-wtb-style-dt', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-desktop.css?v=1.22' ); |
||||
wp_enqueue_style( 'gp-wtb-style-tb', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-tablet.css?v=1.22' ); |
||||
wp_enqueue_style( 'gp-wtb-style-mb', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-mobile?v=1.122' ); |
||||
|
||||
get_header('gp_eng'); |
||||
// wp_head(); |
||||
// Инициализация Timber |
||||
$context = Timber::context(); |
||||
|
||||
// Подключение стилей |
||||
wp_enqueue_style('gp-wtb-style', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-core.css?v=1.14'); |
||||
wp_enqueue_style('gp-wtb-style-dt', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-desktop.css?v=1.22'); |
||||
wp_enqueue_style('gp-wtb-style-tb', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-tablet.css?v=1.22'); |
||||
wp_enqueue_style('gp-wtb-style-mb', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-mobile.css?v=1.122'); |
||||
|
||||
// Получение данных маркеров из ACF |
||||
$locations = get_field('location_markers') ?: []; |
||||
$acf_locations = array_map(function($location) { |
||||
return [ |
||||
'title' => $location['title'], |
||||
'address' => $location['address'], |
||||
'url' => $location['website'], |
||||
'latitude' => isset($location['latitude']) ? (float)$location['latitude'] : null, |
||||
'longitude' => isset($location['longitude']) ? (float)$location['longitude'] : null |
||||
]; |
||||
}, $locations); |
||||
|
||||
// Предопределенные данные локаций |
||||
$predefined_locations = [ |
||||
[ |
||||
'title' => 'Roots Supermarket', |
||||
'address' => 'Waves Grande, Retail unit 1-2 Shobha Hartland, Dubai DU United Arab Emirates', |
||||
'position' => ['lat' => 25.1896, 'lng' => 55.3662], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => 'Pawdy Neighbors', |
||||
'address' => 'Souk Al Manzil - Old Town Downtown, Dubai, United Arab Emirates', |
||||
'position' => ['lat' => 25.1915, 'lng' => 55.2758], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => 'The Pet Co', |
||||
'address' => 'Tower A, Shop 01, Prime Business Centre, JVC, Dubai, UAE', |
||||
'position' => ['lat' => 25.0580, 'lng' => 55.2282], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => 'Ivy Secret Garden', |
||||
'address' => 'Al Wasl Warehouse Complex, Unit 14 - 26th St - Al Quoz Industrial Area 4 - Dubai', |
||||
'position' => ['lat' => 25.1416, 'lng' => 55.2358], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => 'Petzone', |
||||
'address' => 'Petzone Sheikh Zayed Road - Petzone Umm Suqeim', |
||||
'position' => ['lat' => 25.1530, 'lng' => 55.2145], |
||||
'url' => 'https://petzone.com/uae/en/' |
||||
], |
||||
[ |
||||
'title' => 'Pet Corner', |
||||
'address' => 'Pet Corner Sheikh Zayed Road, Al Fardan Building 1, Sheikh Zayed Road, Next to Deals on Wheels & Business Bay Metro Station', |
||||
'position' => ['lat' => 25.1868, 'lng' => 55.2527], |
||||
'url' => 'https://petcornerdubai.com/' |
||||
], |
||||
[ |
||||
'title' => 'Pet Corner Motor City - Dubai', |
||||
'address' => 'Unit R7, Fox Hill 8, Motor City, Opposite Arabian Ranches', |
||||
'position' => ['lat' => 25.0499, 'lng' => 55.2350], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => 'Pet Corner Jumeirah Golf Estates - Dubai', |
||||
'address' => 'Shop No. 7, The Fairway Mall Jumeirah Golf Estates Dubai', |
||||
'position' => ['lat' => 25.0394, 'lng' => 55.2269], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => 'Pet Corner Khalifa City - Abu Dhabi', |
||||
'address' => 'Shop No 5, Al Raha Gardens, Khalifa City Abu Dhabi', |
||||
'position' => ['lat' => 24.4243, 'lng' => 54.5754], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => 'Pet Corner- Sharjah Al Mamsha', |
||||
'address' => 'Al Sharjah, University Road', |
||||
'position' => ['lat' => 25.3126, 'lng' => 55.4783], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => 'Pet Corner Fujairah- Lulu Mall', |
||||
'address' => 'Al - Korthabah Road - Fujairah City Center - Fujairah', |
||||
'position' => ['lat' => 25.1221, 'lng' => 56.3244], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => 'Tail Waggin Al Quoz', |
||||
'address' => 'Warehouse 7, Street 8, Al Khail Road, Al Quoz 1, Dubai, United Arab Emirates', |
||||
'position' => ['lat' => 25.1368, 'lng' => 55.2364], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => "Tail Waggin' Pet Spa Dubai Hills", |
||||
'address' => 'SWAY Residences, Retail 2 - near Kings College Hospital Dubai Hills Estate - Dubai - United Arab Emirates', |
||||
'position' => ['lat' => 25.1276, 'lng' => 55.2714], |
||||
'url' => '' |
||||
], |
||||
[ |
||||
'title' => 'Goofy Groom', |
||||
'address' => 'Dubai, UAE Midtown Central Majan, Shop G-17', |
||||
'position' => ['lat' => 25.0834, 'lng' => 55.1743], |
||||
'url' => '' |
||||
] |
||||
]; |
||||
|
||||
// Получение изображений из галереи ACF |
||||
$partners_logos = get_field('partners_logos') ?: []; |
||||
$partners_logos_formatted = array_map(function($image) { |
||||
return [ |
||||
'url' => esc_url($image['title']), |
||||
'src' => esc_url($image['sizes']['medium']), |
||||
'alt' => esc_attr($image['alt']) |
||||
]; |
||||
}, $partners_logos); |
||||
|
||||
// Добавление данных в контекст |
||||
$context['acf_locations'] = $acf_locations; |
||||
$context['predefined_locations'] = $predefined_locations; |
||||
$context['partners_logos'] = $partners_logos_formatted; |
||||
|
||||
// Отключение автопараграфов для Contact Form 7 |
||||
add_filter('wpcf7_autop_or_not', '__return_false'); |
||||
?> |
||||
|
||||
<div class="body-wrap"> |
||||
|
||||
<main class="wrapper" style="padding-top: 0;"> |
||||
|
||||
<!-- Where home --> |
||||
<section class="where-home"> |
||||
<div class="container"> |
||||
<h1>Where to Buy</h1> |
||||
<p>Looking for Cosmopet products in stores? You can find our premium pet treats in select pet shops and retail stores across the UAE.</p> |
||||
</div> |
||||
</section> |
||||
<!-- Where home end --> |
||||
<div class="container"> |
||||
<?php |
||||
// Get marker data from ACF |
||||
$locations = get_field('location_markers'); |
||||
?> |
||||
|
||||
<div class="locations-map-container"> |
||||
<div id="map" style="width: 100%; height: 600px; border-radius: 20px; overflow: hidden;"></div> |
||||
</div> |
||||
|
||||
<script> |
||||
// Array of locations with predefined coordinates |
||||
const locationData = [ |
||||
{ |
||||
title: "Roots Supermarket", |
||||
address: "Waves Grande, Retail unit 1-2 Shobha Hartland, Dubai DU United Arab Emirates", |
||||
position: { lat: 25.1896, lng: 55.3662 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "Pawdy Neighbors", |
||||
address: "Souk Al Manzil - Old Town Downtown, Dubai, United Arab Emirates", |
||||
position: { lat: 25.1915, lng: 55.2758 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "The Pet Co", |
||||
address: "Tower A, Shop 01, Prime Business Centre, JVC, Dubai, UAE", |
||||
position: { lat: 25.0580, lng: 55.2282 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "Ivy Secret Garden", |
||||
address: "Al Wasl Warehouse Complex, Unit 14 - 26th St - Al Quoz Industrial Area 4 - Dubai", |
||||
position: { lat: 25.1416, lng: 55.2358 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "Petzone", |
||||
address: "Petzone Sheikh Zayed Road - Petzone Umm Suqeim", |
||||
position: { lat: 25.1530, lng: 55.2145 }, |
||||
url: "https://petzone.com/uae/en/" |
||||
}, |
||||
{ |
||||
title: "Pet Corner", |
||||
address: "Pet Corner Sheikh Zayed Road, Al Fardan Building 1, Sheikh Zayed Road, Next to Deals on Wheels & Business Bay Metro Station", |
||||
position: { lat: 25.1868, lng: 55.2527 }, |
||||
url: "https://petcornerdubai.com/" |
||||
}, |
||||
{ |
||||
title: "Pet Corner Motor City - Dubai", |
||||
address: "Unit R7, Fox Hill 8, Motor City, Opposite Arabian Ranches", |
||||
position: { lat: 25.0499, lng: 55.2350 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "Pet Corner Jumeirah Golf Estates - Dubai", |
||||
address: "Shop No. 7, The Fairway Mall Jumeirah Golf Estates Dubai", |
||||
position: { lat: 25.0394, lng: 55.2269 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "Pet Corner Khalifa City - Abu Dhabi", |
||||
address: "Shop No 5, Al Raha Gardens, Khalifa City Abu Dhabi", |
||||
position: { lat: 24.4243, lng: 54.5754 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "Pet Corner- Sharjah Al Mamsha", |
||||
address: "Al Sharjah, University Road", |
||||
position: { lat: 25.3126, lng: 55.4783 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "Pet Corner Fujairah- Lulu Mall", |
||||
address: "Al - Korthabah Road - Fujairah City Center - Fujairah", |
||||
position: { lat: 25.1221, lng: 56.3244 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "Tail Waggin Al Quoz", |
||||
address: "Warehouse 7, Street 8, Al Khail Road, Al Quoz 1, Dubai, United Arab Emirates", |
||||
position: { lat: 25.1368, lng: 55.2364 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "Tail Waggin' Pet Spa Dubai Hills", |
||||
address: "SWAY Residences, Retail 2 - near Kings College Hospital Dubai Hills Estate - Dubai - United Arab Emirates", |
||||
position: { lat: 25.1276, lng: 55.2714 }, |
||||
url: '' |
||||
}, |
||||
{ |
||||
title: "Goofy Groom", |
||||
address: "Dubai, UAE Midtown Central Majan, Shop G-17", |
||||
position: { lat: 25.0834, lng: 55.1743 }, |
||||
url: '' |
||||
} |
||||
]; |
||||
|
||||
// Get data from ACF with added latitude and longitude fields |
||||
const acfLocations = <?php
|
||||
if ($locations && !empty($locations)) { |
||||
echo json_encode(array_map(function($location) { |
||||
return [ |
||||
'title' => $location['title'], |
||||
'address' => $location['address'], |
||||
'url' => $location['website'], |
||||
'latitude' => isset($location['latitude']) ? (float)$location['latitude'] : null, |
||||
'longitude' => isset($location['longitude']) ? (float)$location['longitude'] : null |
||||
]; |
||||
}, $locations)); |
||||
} else { |
||||
echo 'null'; |
||||
} |
||||
?>; |
||||
|
||||
// Map initialization function |
||||
function initMap() { |
||||
console.log("Map is initializing"); |
||||
|
||||
// Map center - approximately Dubai center |
||||
const dubai = { lat: 25.2048, lng: 55.2708 }; |
||||
|
||||
// Create map |
||||
const map = new google.maps.Map(document.getElementById("map"), { |
||||
zoom: 11, |
||||
center: dubai, |
||||
styles: [ |
||||
{ |
||||
"featureType": "water", |
||||
"elementType": "geometry", |
||||
"stylers": [ |
||||
{ |
||||
"color": "#93d5eb" |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
"featureType": "landscape", |
||||
"elementType": "geometry", |
||||
"stylers": [ |
||||
{ |
||||
"color": "#f5f5f5" |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}); |
||||
|
||||
// Info window for markers |
||||
const infoWindow = new google.maps.InfoWindow(); |
||||
|
||||
// If ACF data exists, use it for markers |
||||
if (acfLocations && acfLocations.length > 0) { |
||||
console.log("Using ACF data:", acfLocations.length, "locations"); |
||||
|
||||
const geocoder = new google.maps.Geocoder(); |
||||
|
||||
// Create and place markers |
||||
acfLocations.forEach((location, i) => { |
||||
// Check if we have manual coordinates |
||||
if (location.latitude && location.longitude) { |
||||
console.log(`Using manual coordinates for: ${location.title}`); |
||||
const position = { lat: location.latitude, lng: location.longitude }; |
||||
createMarker(location, position, map, infoWindow); |
||||
} else { |
||||
// No coordinates provided, try geocoding |
||||
console.log(`Geocoding address: ${location.address}`); |
||||
|
||||
geocoder.geocode({ address: location.address }, (results, status) => { |
||||
if (status === "OK") { |
||||
console.log(`Geocoding successful for: ${location.title}`); |
||||
createMarker(location, results[0].geometry.location, map, infoWindow); |
||||
} else { |
||||
console.error(`Geocode failed for address: ${location.address}. Reason: ${status}`); |
||||
|
||||
// If geocoding fails, try to find matching location in predefined data |
||||
const predefinedLocation = locationData.find(item => |
||||
item.title.toLowerCase() === location.title.toLowerCase() || |
||||
item.address.toLowerCase().includes(location.address.toLowerCase()) |
||||
); |
||||
|
||||
if (predefinedLocation) { |
||||
console.log(`Using predefined coordinates for: ${location.title}`); |
||||
createMarker(location, predefinedLocation.position, map, infoWindow); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
} else { |
||||
// Use predefined data |
||||
console.log("Using predefined data:", locationData.length, "locations"); |
||||
|
||||
locationData.forEach((location) => { |
||||
createMarker(location, location.position, map, infoWindow); |
||||
}); |
||||
} |
||||
|
||||
// Marker creation function |
||||
function createMarker(location, position, map, infoWindow) { |
||||
// Create marker |
||||
const marker = new google.maps.Marker({ |
||||
map: map, |
||||
position: position, |
||||
animation: google.maps.Animation.DROP, |
||||
icon: { |
||||
url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png' |
||||
} |
||||
}); |
||||
|
||||
// Add click event handler for marker |
||||
marker.addListener("click", () => { |
||||
let content = `<div><h3>${location.title}</h3><p>${location.address}</p>`; |
||||
|
||||
if (location.url) { |
||||
content += `<p><a href="${location.url}" target="_blank">Visit website</a></p>`; |
||||
} |
||||
|
||||
content += `</div>`; |
||||
|
||||
infoWindow.setContent(content); |
||||
infoWindow.open(map, marker); |
||||
}); |
||||
|
||||
// Add slight delay for animation |
||||
setTimeout(() => { |
||||
marker.setAnimation(null); |
||||
}, 750); |
||||
} |
||||
} |
||||
|
||||
// Check if Google Maps API is loaded |
||||
window.addEventListener('load', function() { |
||||
if (typeof google === 'undefined' || typeof google.maps === 'undefined') { |
||||
console.error('Google Maps API failed to load'); |
||||
document.getElementById('map').innerHTML = '<div style="padding: 20px; text-align: center;">Map loading error. Please check your internet connection and refresh the page.</div>'; |
||||
} else { |
||||
console.log('Google Maps API loaded successfully'); |
||||
} |
||||
}); |
||||
</script> |
||||
|
||||
<!-- Google Maps API connection with your key --> |
||||
<script async defer |
||||
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQVXQyGsqWmUdJ84UgKOPymFlISaKoiuw&callback=initMap&libraries=places"> |
||||
</script> |
||||
</div> |
||||
<br><br> |
||||
<!-- Find us --> |
||||
<section class="find-us"> |
||||
<div class="container"> |
||||
<h2>📍 Find us at:</h2> |
||||
<ul> |
||||
<?php |
||||
$items = get_field('location_markers'); |
||||
foreach($items as $item): |
||||
?> |
||||
<li> |
||||
<h3> |
||||
<?php if($item['website']): ?> |
||||
<a href="<?php echo $item['website'];?>"><?php echo $item['title'];?></a>
|
||||
<?php endif; ?> |
||||
<?php if(!$item['website']): ?> |
||||
<?php echo $item['title'];?> |
||||
<?php endif; ?> |
||||
</h3> |
||||
<p><?php echo $item['address'];?></p>
|
||||
</li> |
||||
<?php endforeach; ?> |
||||
</ul> |
||||
</div> |
||||
</section> |
||||
<!-- Find us end --> |
||||
|
||||
|
||||
<style> |
||||
.sell-form-form:not(.submited) + .thx-text{ |
||||
display:none; |
||||
} |
||||
.sell-form-form.submited{ |
||||
display:none; |
||||
} |
||||
</style> |
||||
<!-- Sell form --> |
||||
|
||||
<div class="container"> |
||||
<?php |
||||
// Получаем изображения из галереи ACF |
||||
$images = get_field('partners_logos'); |
||||
if ($images): ?> |
||||
<!-- Бегущая строка (слайдер) --> |
||||
<div class="partners-slider-section"> |
||||
<h3 style="font-size:36px;">Our partners</h3> |
||||
<div class="partners-swiper swiper"> |
||||
<div class="swiper-wrapper"> |
||||
<?php
|
||||
// Повторяем логотипы больше раз для создания эффекта бесконечности |
||||
for ($i = 0; $i < 5; $i++) { |
||||
foreach($images as $image): ?> |
||||
<div class="swiper-slide"> |
||||
<a href="<?php echo esc_url($image['title']); ?>" target="_blank">
|
||||
<img src="<?php echo esc_url($image['sizes']['medium']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
|
||||
</a> |
||||
</div> |
||||
<?php endforeach;
|
||||
} ?> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<script> |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
const swiper = new Swiper('.partners-swiper', { |
||||
slidesPerView: 'auto', |
||||
spaceBetween: 30, |
||||
loop: true, |
||||
loopedSlides: 999, |
||||
loopAdditionalSlides: 999, |
||||
centeredSlides: false, |
||||
autoplay: { |
||||
delay: 1, // Почти нулевая задержка |
||||
disableOnInteraction: false, // Автоплей не отключается при взаимодействии |
||||
}, |
||||
speed: 8000, // Медленная скорость для плавности |
||||
allowTouchMove: false, // Отключаем свайп вручную |
||||
freeMode: false, // Свободный скроллинг |
||||
cssMode: false, |
||||
watchSlidesProgress: true, |
||||
simulateTouch: false, |
||||
observer: true, |
||||
observeParents: true, |
||||
resistanceRatio: 0, |
||||
breakpoints: { |
||||
320: { |
||||
slidesPerView: 2, |
||||
}, |
||||
768: { |
||||
slidesPerView: 4, |
||||
}, |
||||
1024: { |
||||
slidesPerView: 5, |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// Принудительно перезапускаем автоплей после касания |
||||
swiper.el.addEventListener('touchend', function() { |
||||
if (!swiper.autoplay.running) { |
||||
swiper.autoplay.start(); // Перезапускаем автоплей, если он остановлен |
||||
} |
||||
}); |
||||
}); |
||||
</script> |
||||
<style> |
||||
/* Стили для слайдера */ |
||||
.partners-slider-section, |
||||
.partners-grid-section { |
||||
margin: 50px 0; |
||||
} |
||||
.partners-slider-section { |
||||
overflow: hidden; /* Скрываем переполнение */ |
||||
} |
||||
.partners-swiper { |
||||
width: 100%; |
||||
padding: 20px 0; |
||||
} |
||||
.swiper-slide { |
||||
text-align: center; |
||||
height: auto; |
||||
width: auto !important; /* Позволяем слайдам быть разной ширины */ |
||||
} |
||||
.swiper-slide img { |
||||
max-height: 60px; |
||||
width: auto; |
||||
filter: grayscale(100%); |
||||
transition: filter 0.3s; |
||||
object-fit: contain; |
||||
} |
||||
.swiper-slide img:hover { |
||||
filter: grayscale(0%); |
||||
} |
||||
/* Убираем анимацию трансформации для устранения рывков */ |
||||
.swiper-wrapper { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100px; |
||||
z-index: 1; |
||||
display: flex; |
||||
box-sizing: content-box; |
||||
transition-timing-function: linear !important; |
||||
} |
||||
/* Стили для плиток */ |
||||
.partners-grid { |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
gap: 20px; |
||||
} |
||||
.grid-item { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 20px; |
||||
/* border: 1px solid #eee; */ |
||||
border-radius: 24px; |
||||
transition: 0.3s; |
||||
} |
||||
.grid-item:hover { |
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
||||
} |
||||
.grid-item img { |
||||
max-height: 60px; |
||||
max-width: 100%; |
||||
filter: grayscale(100%); |
||||
transition: filter 0.3s; |
||||
} |
||||
.grid-item img:hover { |
||||
filter: grayscale(0%); |
||||
} |
||||
h3 { |
||||
font-size: 26px; |
||||
color: #fff; |
||||
text-transform: uppercase; |
||||
font-weight: bold; |
||||
} |
||||
@media (max-width: 768px) { |
||||
.partners-grid { |
||||
grid-template-columns: repeat(2, 1fr); |
||||
} |
||||
.grid-item { |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
@media (max-width: 480px) { |
||||
.partners-grid { |
||||
grid-template-columns: 1fr; |
||||
} |
||||
} |
||||
</style> |
||||
<?php endif; ?> |
||||
</div> |
||||
|
||||
<section class="sell-form"> |
||||
<div class="container sell-form__container"> |
||||
|
||||
<h2>Want to sell Cosmopet in your store?</h2> |
||||
<p>Join our growing network of retailers! Fill out the contact form below, and we’ll get in touch to discuss the details.</p> |
||||
<form action="" class="form--contact sell-form-form"> |
||||
|
||||
<input type="hidden" name="action" value="message" > |
||||
<input type="text" placeholder="Your Name" name="name" class="form-inp"> |
||||
<input type="tel" placeholder="Your Phone" name="phone" class="form-inp" id=""> |
||||
<input type="email" placeholder="E-mail" name="email" class="form-inp" id=""> |
||||
<textarea placeholder="Message" class="form-textarea" name="msg" id=""></textarea> |
||||
<button type="submit">SUBMIT</button> |
||||
|
||||
|
||||
</form> |
||||
<div class="thx-text"> |
||||
<h2>Thanks for request!</h2> |
||||
<p>We will answer your message as soon as possible</p> |
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
</div> |
||||
</section> |
||||
<!-- Sell form end --> |
||||
|
||||
</main> |
||||
</div> |
||||
|
||||
<?php get_footer('gp_eng'); ?> |
||||
// Рендеринг шаблона |
||||
Timber::render('templates/where_to_buy/wtb.twig', $context); |
||||
?> |
||||
@ -0,0 +1,365 @@ |
||||
{% set bodyClass = 'main-np' %} |
||||
|
||||
{% extends 'layout.twig' %} |
||||
|
||||
{% block content %} |
||||
<div class="body-wrap"> |
||||
<main class="wrapper" style="padding-top: 0;"> |
||||
<!-- Where home --> |
||||
<section class="where-home"> |
||||
<div class="container"> |
||||
<h1>Where to Buy</h1> |
||||
<p>Looking for Cosmopet products in stores? You can find our premium pet treats in select pet shops and retail stores across the UAE.</p> |
||||
</div> |
||||
</section> |
||||
<!-- Where home end --> |
||||
|
||||
<div class="container"> |
||||
<div class="locations-map-container"> |
||||
<div id="map" style="width: 100%; height: 600px; border-radius: 20px; overflow: hidden;"></div> |
||||
</div> |
||||
|
||||
<script> |
||||
// Данные локаций из PHP (через Timber) |
||||
const locationData = {{ predefined_locations|json_encode|raw }}; |
||||
|
||||
// Данные из ACF |
||||
const acfLocations = {{ acf_locations|json_encode|raw }}; |
||||
|
||||
// Функция инициализации карты |
||||
function initMap() { |
||||
console.log("Map is initializing"); |
||||
|
||||
// Центр карты - Дубай |
||||
const dubai = { lat: 25.2048, lng: 55.2708 }; |
||||
|
||||
// Создание карты |
||||
const map = new google.maps.Map(document.getElementById("map"), { |
||||
zoom: 11, |
||||
center: dubai, |
||||
styles: [ |
||||
{ |
||||
"featureType": "water", |
||||
"elementType": "geometry", |
||||
"stylers": [ |
||||
{ |
||||
"color": "#93d5eb" |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
"featureType": "landscape", |
||||
"elementType": "geometry", |
||||
"stylers": [ |
||||
{ |
||||
"color": "#f5f5f5" |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}); |
||||
|
||||
// Окно с информацией для маркеров |
||||
const infoWindow = new google.maps.InfoWindow(); |
||||
|
||||
// Если есть данные ACF, используем их для маркеров |
||||
if (acfLocations && acfLocations.length > 0) { |
||||
console.log("Using ACF data:", acfLocations.length, "locations"); |
||||
|
||||
const geocoder = new google.maps.Geocoder(); |
||||
|
||||
// Создание и размещение маркеров |
||||
acfLocations.forEach((location, i) => { |
||||
// Проверка наличия координат |
||||
if (location.latitude && location.longitude) { |
||||
console.log(`Using manual coordinates for: ${location.title}`); |
||||
const position = { lat: location.latitude, lng: location.longitude }; |
||||
createMarker(location, position, map, infoWindow); |
||||
} else { |
||||
// Координаты отсутствуют, пробуем геокодирование |
||||
console.log(`Geocoding address: ${location.address}`); |
||||
|
||||
geocoder.geocode({ address: location.address }, (results, status) => { |
||||
if (status === "OK") { |
||||
console.log(`Geocoding successful for: ${location.title}`); |
||||
createMarker(location, results[0].geometry.location, map, infoWindow); |
||||
} else { |
||||
console.error(`Geocode failed for address: ${location.address}. Reason: ${status}`); |
||||
|
||||
// Если геокодирование не удалось, ищем совпадение в предопределенных данных |
||||
const predefinedLocation = locationData.find(item => |
||||
item.title.toLowerCase() === location.title.toLowerCase() || |
||||
item.address.toLowerCase().includes(location.address.toLowerCase()) |
||||
); |
||||
|
||||
if (predefinedLocation) { |
||||
console.log(`Using predefined coordinates for: ${location.title}`); |
||||
createMarker(location, predefinedLocation.position, map, infoWindow); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
} else { |
||||
// Используем предопределенные данные |
||||
console.log("Using predefined data:", locationData.length, "locations"); |
||||
|
||||
locationData.forEach((location) => { |
||||
createMarker(location, location.position, map, infoWindow); |
||||
}); |
||||
} |
||||
|
||||
// Функция создания маркера |
||||
function createMarker(location, position, map, infoWindow) { |
||||
// Создание маркера |
||||
const marker = new google.maps.Marker({ |
||||
map: map, |
||||
position: position, |
||||
animation: google.maps.Animation.DROP, |
||||
icon: { |
||||
url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png' |
||||
} |
||||
}); |
||||
|
||||
// Обработчик клика по маркеру |
||||
marker.addListener("click", () => { |
||||
let content = `<div><h3>${location.title}</h3><p>${location.address}</p>`; |
||||
|
||||
if (location.url) { |
||||
content += `<p><a href="${location.url}" target="_blank">Visit website</a></p>`; |
||||
} |
||||
|
||||
content += `</div>`; |
||||
|
||||
infoWindow.setContent(content); |
||||
infoWindow.open(map, marker); |
||||
}); |
||||
|
||||
// Отключение анимации после небольшой задержки |
||||
setTimeout(() => { |
||||
marker.setAnimation(null); |
||||
}, 750); |
||||
} |
||||
} |
||||
|
||||
// Проверка загрузки Google Maps API |
||||
window.addEventListener('load', function() { |
||||
if (typeof google === 'undefined' || typeof google.maps === 'undefined') { |
||||
console.error('Google Maps API failed to load'); |
||||
document.getElementById('map').innerHTML = '<div style="padding: 20px; text-align: center;">Map loading error. Please check your internet connection and refresh the page.</div>'; |
||||
} else { |
||||
console.log('Google Maps API loaded successfully'); |
||||
} |
||||
}); |
||||
</script> |
||||
|
||||
<!-- Подключение Google Maps API --> |
||||
<script async defer |
||||
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQVXQyGsqWmUdJ84UgKOPymFlISaKoiuw&callback=initMap&libraries=places"> |
||||
</script> |
||||
</div> |
||||
<br><br> |
||||
|
||||
<!-- Find us --> |
||||
<section class="find-us"> |
||||
<div class="container"> |
||||
<h2>📍 Find us at:</h2> |
||||
<ul> |
||||
{% for item in acf_locations %} |
||||
<li> |
||||
<h3> |
||||
{% if item.url %} |
||||
<a href="{{ item.url }}">{{ item.title }}</a> |
||||
{% else %} |
||||
{{ item.title }} |
||||
{% endif %} |
||||
</h3> |
||||
<p>{{ item.address }}</p> |
||||
</li> |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
</section> |
||||
<!-- Find us end --> |
||||
|
||||
<style> |
||||
.sell-form-form:not(.submited) + .thx-text { |
||||
display: none; |
||||
} |
||||
.sell-form-form.submited { |
||||
display: none; |
||||
} |
||||
</style> |
||||
|
||||
<div class="container"> |
||||
{% if partners_logos %} |
||||
<!-- Бегущая строка (слайдер) --> |
||||
<div class="partners-slider-section"> |
||||
<h3 style="font-size: 36px;">Our partners</h3> |
||||
<div class="partners-swiper swiper"> |
||||
<div class="swiper-wrapper"> |
||||
{% for i in 1..5 %} |
||||
{% for image in partners_logos %} |
||||
<div class="swiper-slide"> |
||||
<a href="{{ image.url }}" target="_blank"> |
||||
<img src="{{ image.src }}" alt="{{ image.alt }}"> |
||||
</a> |
||||
</div> |
||||
{% endfor %} |
||||
{% endfor %} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<script> |
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
const swiper = new Swiper('.partners-swiper', { |
||||
slidesPerView: 'auto', |
||||
spaceBetween: 30, |
||||
loop: true, |
||||
loopedSlides: 999, |
||||
loopAdditionalSlides: 999, |
||||
centeredSlides: false, |
||||
autoplay: { |
||||
delay: 1, |
||||
disableOnInteraction: false, |
||||
}, |
||||
speed: 8000, |
||||
allowTouchMove: false, |
||||
freeMode: false, |
||||
cssMode: false, |
||||
watchSlidesProgress: true, |
||||
simulateTouch: false, |
||||
observer: true, |
||||
observeParents: true, |
||||
resistanceRatio: 0, |
||||
breakpoints: { |
||||
320: { |
||||
slidesPerView: 2, |
||||
}, |
||||
768: { |
||||
slidesPerView: 4, |
||||
}, |
||||
1024: { |
||||
slidesPerView: 5, |
||||
} |
||||
} |
||||
}); |
||||
|
||||
swiper.el.addEventListener('touchend', function() { |
||||
if (!swiper.autoplay.running) { |
||||
swiper.autoplay.start(); |
||||
} |
||||
}); |
||||
}); |
||||
</script> |
||||
|
||||
<style> |
||||
/* Стили для слайдера */ |
||||
.partners-slider-section, |
||||
.partners-grid-section { |
||||
margin: 50px 0; |
||||
} |
||||
.partners-slider-section { |
||||
overflow: hidden; |
||||
} |
||||
.partners-swiper { |
||||
width: 100%; |
||||
padding: 20px 0; |
||||
} |
||||
.swiper-slide { |
||||
text-align: center; |
||||
height: auto; |
||||
width: auto !important; |
||||
} |
||||
.swiper-slide img { |
||||
max-height: 60px; |
||||
width: auto; |
||||
filter: grayscale(100%); |
||||
transition: filter 0.3s; |
||||
object-fit: contain; |
||||
} |
||||
.swiper-slide img:hover { |
||||
filter: grayscale(0%); |
||||
} |
||||
.swiper-wrapper { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100px; |
||||
z-index: 1; |
||||
display: flex; |
||||
box-sizing: content-box; |
||||
transition-timing-function: linear !important; |
||||
} |
||||
.partners-grid { |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
gap: 20px; |
||||
} |
||||
.grid-item { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 20px; |
||||
border-radius: 24px; |
||||
transition: 0.3s; |
||||
} |
||||
.grid-item:hover { |
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
||||
} |
||||
.grid-item img { |
||||
max-height: 60px; |
||||
max-width: 100%; |
||||
filter: grayscale(100%); |
||||
transition: filter 0.3s; |
||||
} |
||||
.grid-item img:hover { |
||||
filter: grayscale(0%); |
||||
} |
||||
h3 { |
||||
font-size: 26px; |
||||
color: #fff; |
||||
text-transform: uppercase; |
||||
font-weight: bold; |
||||
} |
||||
@media (max-width: 768px) { |
||||
.partners-grid { |
||||
grid-template-columns: repeat(2, 1fr); |
||||
} |
||||
.grid-item { |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
@media (max-width: 480px) { |
||||
.partners-grid { |
||||
grid-template-columns: 1fr; |
||||
} |
||||
} |
||||
</style> |
||||
{% endif %} |
||||
</div> |
||||
|
||||
<!-- Sell form --> |
||||
<section class="sell-form"> |
||||
<div class="container sell-form__container"> |
||||
<h2>Want to sell Cosmopet in your store?</h2> |
||||
<p>Join our growing network of retailers! Fill out the contact form below, and we’ll get in touch to discuss the details.</p> |
||||
<form action="" class="form--contact sell-form-form"> |
||||
<input type="hidden" name="action" value="message"> |
||||
<input type="text" placeholder="Your Name" name="name" class="form-inp"> |
||||
<input type="tel" placeholder="Your Phone" name="phone" class="form-inp"> |
||||
<input type="email" placeholder="E-mail" name="email" class="form-inp"> |
||||
<textarea placeholder="Message" class="form-textarea" name="msg"></textarea> |
||||
<button type="submit">SUBMIT</button> |
||||
</form> |
||||
<div class="thx-text"> |
||||
<h2>Thanks for request!</h2> |
||||
<p>We will answer your message as soon as possible</p> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<!-- Sell form end --> |
||||
</main> |
||||
</div> |
||||
{% endblock %} |
||||
Loading…
Reference in new issue