You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
525 lines
16 KiB
525 lines
16 KiB
<?php
|
|
/*
|
|
Template Name: GP | Where to byu
|
|
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();
|
|
add_filter('wpcf7_autop_or_not', '__return_false');
|
|
?>
|
|
<style>
|
|
.footer_box .footer_box-title {
|
|
font-family: 'Craftwork Grotesk', sans-serif !important;
|
|
}
|
|
|
|
/* ВРЕМЕННЫЕ СТИЛИ 24.10.2024 */
|
|
.truth .truth_top{
|
|
padding-top: 4vh;
|
|
}
|
|
|
|
.discount {
|
|
padding: 43px 0;
|
|
}
|
|
|
|
.discount_top .discount_top-imgs{
|
|
right: -27%;
|
|
}
|
|
|
|
@media only screen and (max-width: 576px) {
|
|
.discount_block .wpcf7, .discount_block .cf7sg-container {
|
|
order: 3;
|
|
}
|
|
}
|
|
</style>
|
|
<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'); ?>
|
|
|