666 lines
19 KiB
PHP
666 lines
19 KiB
PHP
<?php get_header(); ?>
|
|
|
|
<!-- Hero section -->
|
|
<section class="hero" style="background-image: linear-gradient(to top,
|
|
rgba(0, 0, 0, 0.7) 0%,
|
|
rgba(0, 0, 0, 0.4) 30%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
), url('<?php echo esc_url(get_theme_mod('hero_background', get_theme_file_uri('images/hero.jpg'))); ?>');">
|
|
<div class="hero-content">
|
|
<h1><?php echo esc_html(get_theme_mod('hero_title', 'Europe Wonder')); ?></h1>
|
|
<p><?php echo esc_html(get_theme_mod('hero_subtitle', 'Your path to unforgettable experiences')); ?></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Custom Inquiry Section -->
|
|
<section class="inquiry-section" <?php if (get_theme_mod('inquiry_section_background')) : ?>style="background-image: linear-gradient(to top,
|
|
rgba(255, 255, 255, 0.9) 0%,
|
|
rgba(255, 255, 255, 0.8) 100%
|
|
), url('<?php echo esc_url(get_theme_mod('inquiry_section_background')); ?>');"<?php endif; ?>>
|
|
<div class="container">
|
|
<div class="inquiry-content">
|
|
<h2><?php echo esc_html(get_theme_mod('inquiry_section_title', 'Ready to Plan Your Custom Journey?')); ?></h2>
|
|
<p><?php echo wp_kses_post(get_theme_mod('inquiry_section_description', 'A world of moonlit forests and twisting turquoise rivers, Slovenia is a fairytale destination. Home to storybook castles, historic towns, and picturesque alpine landscapes; let us create your perfect holiday experience.')); ?></p>
|
|
<a href="<?php echo esc_url(home_url('/inquiry/')); ?>" class="btn-inquiry"><?php echo esc_html(get_theme_mod('inquiry_button_text', 'START PLANNING')); ?></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Inquiry Form Popup -->
|
|
<div id="inquiry-popup" class="inquiry-popup">
|
|
<div class="inquiry-popup-content">
|
|
<span class="inquiry-close">×</span>
|
|
<h3>Custom Journey Inquiry</h3>
|
|
<form id="custom-inquiry-form" class="inquiry-form">
|
|
<?php wp_nonce_field('custom_inquiry_nonce', 'inquiry_security'); ?>
|
|
<input type="hidden" name="action" value="custom_inquiry_submit">
|
|
<div class="form-group">
|
|
<label for="name">Your Name</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
<div class="form-group half">
|
|
<label for="travel-date">Planned Travel Date</label>
|
|
<input type="date" id="travel-date" name="travel_date">
|
|
</div>
|
|
<div class="form-group half">
|
|
<label for="travelers">Number of Travelers</label>
|
|
<input type="number" id="travelers" name="travelers" min="1" value="2">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="destination">Preferred Destination(s)</label>
|
|
<input type="text" id="destination" name="destination" placeholder="e.g. Slovenia, Croatia, Hungary...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Your Travel Wishes</label>
|
|
<textarea id="message" name="message" rows="4" placeholder="Tell us what you're looking for in your custom journey..."></textarea>
|
|
</div>
|
|
<button type="submit" class="btn-submit">Submit Inquiry</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tours section -->
|
|
<section class="tours">
|
|
<div class="container">
|
|
<?php
|
|
// Pridobi vse Experience Journeye
|
|
$journeys = get_posts(array(
|
|
'post_type' => 'experience_journey',
|
|
'posts_per_page' => -1,
|
|
));
|
|
|
|
// Pridobi uporabniško določen vrstni red journeyev
|
|
$order = get_option('experience_journey_order', '');
|
|
$order_array = !empty($order) ? explode(',', $order) : array();
|
|
|
|
// Če imamo vrstni red, sortiraj journeye po njem
|
|
if (!empty($order_array)) {
|
|
$position_map = array_flip($order_array);
|
|
usort($journeys, function($a, $b) use ($position_map) {
|
|
$pos_a = isset($position_map[$a->ID]) ? $position_map[$a->ID] : PHP_INT_MAX;
|
|
$pos_b = isset($position_map[$b->ID]) ? $position_map[$b->ID] : PHP_INT_MAX;
|
|
return $pos_a - $pos_b;
|
|
});
|
|
}
|
|
|
|
// Za vsak journey prikaži njegove ture
|
|
foreach ($journeys as $journey) {
|
|
// Pridobi naslov journeya
|
|
$journey_title = get_post_meta($journey->ID, '_page_title', true);
|
|
if (!$journey_title) {
|
|
$journey_title = $journey->post_title;
|
|
}
|
|
|
|
// Pridobi ture za ta journey
|
|
$saved_order = get_option('individual_tour_order_' . $journey->ID, '');
|
|
$tour_order_array = !empty($saved_order) ? explode(',', $saved_order) : array();
|
|
|
|
$args = array(
|
|
'post_type' => 'individual_tour',
|
|
'posts_per_page' => -1,
|
|
'meta_query' => array(
|
|
array(
|
|
'key' => '_experience_journey',
|
|
'value' => $journey->ID,
|
|
'compare' => '='
|
|
)
|
|
)
|
|
);
|
|
|
|
// Če imamo shranjen vrstni red tur, uporabi ga
|
|
if (!empty($tour_order_array)) {
|
|
$args['post__in'] = $tour_order_array;
|
|
$args['orderby'] = 'post__in';
|
|
}
|
|
|
|
$tours = new WP_Query($args);
|
|
|
|
// Če ima journey ture, prikaži naslov in ture
|
|
if ($tours->have_posts()) :
|
|
?>
|
|
<h3 class="journey-title"><?php echo esc_html($journey_title); ?></h3>
|
|
<div class="tours-grid">
|
|
<?php
|
|
while ($tours->have_posts()) : $tours->the_post();
|
|
// Pridobi hero sliko
|
|
$hero_image_id = get_post_meta(get_the_ID(), '_hero_image', true);
|
|
$image = wp_get_attachment_image_url($hero_image_id, 'full');
|
|
// Če hero slika ne obstaja, uporabi featured image
|
|
if (!$image) {
|
|
$image = get_the_post_thumbnail_url(get_the_ID(), 'large');
|
|
}
|
|
// Če ni nobene slike, uporabi placeholder
|
|
if (!$image) {
|
|
$image = get_theme_file_uri('images/placeholder.jpg');
|
|
}
|
|
|
|
$price = get_post_meta(get_the_ID(), '_tour_price', true);
|
|
$duration = get_post_meta(get_the_ID(), '_tour_duration', true);
|
|
?>
|
|
<div class="tour-card">
|
|
<div class="tour-image">
|
|
<img src="<?php echo esc_url($image); ?>"
|
|
alt="<?php echo esc_attr(get_the_title()); ?>"
|
|
loading="lazy">
|
|
</div>
|
|
<div class="tour-info">
|
|
<div>
|
|
<h3><?php echo esc_html(get_the_title()); ?></h3>
|
|
</div>
|
|
<div>
|
|
<div class="tour-details">
|
|
<?php if ($price) : ?>
|
|
<span class="price">€<?php echo esc_html($price); ?></span>
|
|
<?php endif; ?>
|
|
<?php if ($duration) : ?>
|
|
<span class="duration"><?php echo esc_html($duration); ?> days</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
<a href="<?php echo esc_url(get_permalink()); ?>" class="btn-view">View Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
endwhile;
|
|
wp_reset_postdata();
|
|
?>
|
|
</div>
|
|
<?php
|
|
endif;
|
|
}
|
|
?>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.tours-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 350px);
|
|
gap: 2rem;
|
|
padding: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tour-card {
|
|
width: 350px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease;
|
|
height: 420px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tour-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.tour-card .tour-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tour-card .tour-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.tour-card:hover .tour-image img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.tour-card .tour-info {
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
justify-content: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.tour-card h3 {
|
|
margin: 0;
|
|
color: var(--dark);
|
|
font-size: 1.25rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tour-card p {
|
|
color: #666;
|
|
margin-bottom: 1rem;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.tour-card .tour-details {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.tour-card .price {
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.tour-card .duration {
|
|
color: #666;
|
|
}
|
|
|
|
.tour-card .btn-view {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 0.8rem;
|
|
background-color: var(--accent);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.tour-card .btn-view:hover {
|
|
background-color: var(--accent-dark);
|
|
}
|
|
|
|
.journey-title {
|
|
text-align: center;
|
|
margin: 3rem 0 2rem;
|
|
color: var(--dark);
|
|
font-size: 2rem;
|
|
position: relative;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.journey-title:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60px;
|
|
height: 3px;
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
.journey-title:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.tours-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tour-card {
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 450px;
|
|
}
|
|
|
|
.journey-title {
|
|
font-size: 1.75rem;
|
|
margin: 2rem 0 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Inquiry Section CSS -->
|
|
<style>
|
|
.inquiry-section {
|
|
background-color: #f7f7f7;
|
|
padding: 4rem 0;
|
|
background-size: cover;
|
|
background-position: center;
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
.inquiry-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.inquiry-content h2 {
|
|
color: var(--dark);
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.inquiry-content p {
|
|
font-size: 1.2rem;
|
|
line-height: 1.8;
|
|
color: #555;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.btn-inquiry {
|
|
display: inline-block;
|
|
background-color: var(--accent);
|
|
color: white;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
padding: 1rem 2.5rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-inquiry:hover {
|
|
background-color: var(--accent-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
|
color: white;
|
|
}
|
|
|
|
/* Popup Styles */
|
|
.inquiry-popup {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.inquiry-popup.active {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.inquiry-popup-content {
|
|
background-color: white;
|
|
margin: 5% auto;
|
|
padding: 2rem;
|
|
border-radius: 12px;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-20px);
|
|
transition: transform 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.inquiry-popup.active .inquiry-popup-content {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.inquiry-close {
|
|
position: absolute;
|
|
top: 1.2rem;
|
|
right: 1.5rem;
|
|
font-size: 2rem;
|
|
color: #aaa;
|
|
cursor: pointer;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.inquiry-close:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.inquiry-popup h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--dark);
|
|
font-size: 1.8rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.inquiry-form .form-group {
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.inquiry-form .half {
|
|
width: 49%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.inquiry-form .form-group:nth-child(3) {
|
|
margin-right: 2%;
|
|
}
|
|
|
|
.inquiry-form label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: #555;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.inquiry-form input,
|
|
.inquiry-form textarea {
|
|
width: 100%;
|
|
padding: 0.8rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.inquiry-form input:focus,
|
|
.inquiry-form textarea:focus {
|
|
border-color: var(--accent);
|
|
outline: none;
|
|
}
|
|
|
|
.inquiry-form .btn-submit {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
background-color: var(--accent);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
transition: background-color 0.3s ease;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.inquiry-form .btn-submit:hover {
|
|
background-color: var(--accent-dark);
|
|
}
|
|
|
|
body.popup-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.inquiry-content h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.inquiry-content p {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.inquiry-popup-content {
|
|
padding: 1.5rem;
|
|
margin: 10% auto;
|
|
width: 95%;
|
|
}
|
|
|
|
.inquiry-form .half {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.inquiry-form .form-group:nth-child(3) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Inquiry Form JavaScript -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const openInquiryBtn = document.getElementById('open-inquiry-form');
|
|
const inquiryPopup = document.getElementById('inquiry-popup');
|
|
const inquiryClose = document.querySelector('.inquiry-close');
|
|
const inquiryForm = document.getElementById('custom-inquiry-form');
|
|
|
|
// Zagotovimo, da je popup začetno skrit
|
|
inquiryPopup.classList.remove('active');
|
|
document.body.classList.remove('popup-open');
|
|
|
|
// Odpri popup
|
|
openInquiryBtn.addEventListener('click', function() {
|
|
inquiryPopup.classList.add('active');
|
|
document.body.classList.add('popup-open');
|
|
});
|
|
|
|
// Zapri popup (X gumb)
|
|
inquiryClose.addEventListener('click', function() {
|
|
inquiryPopup.classList.remove('active');
|
|
document.body.classList.remove('popup-open');
|
|
});
|
|
|
|
// Zapri popup (klik izven obrazca)
|
|
inquiryPopup.addEventListener('click', function(e) {
|
|
if (e.target === inquiryPopup) {
|
|
inquiryPopup.classList.remove('active');
|
|
document.body.classList.remove('popup-open');
|
|
}
|
|
});
|
|
|
|
// Zapri popup (tipka ESC)
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && inquiryPopup.classList.contains('active')) {
|
|
inquiryPopup.classList.remove('active');
|
|
document.body.classList.remove('popup-open');
|
|
}
|
|
});
|
|
|
|
// Pošlji obrazec
|
|
inquiryForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Prikaži indikator nalaganja
|
|
const submitBtn = inquiryForm.querySelector('.btn-submit');
|
|
const originalBtnText = submitBtn.textContent;
|
|
submitBtn.textContent = 'Sending...';
|
|
submitBtn.disabled = true;
|
|
|
|
// Pridobi podatke iz obrazca
|
|
const formData = new FormData(inquiryForm);
|
|
formData.append('security', document.querySelector('#inquiry_security').value);
|
|
|
|
console.log('Sending form data to AJAX endpoint...');
|
|
|
|
// Pošlji AJAX zahtevek
|
|
fetch(<?php echo json_encode(admin_url('admin-ajax.php')); ?>, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => {
|
|
console.log('Response status:', response.status);
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok: ' + response.status);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Response data:', data);
|
|
|
|
// Ponastavi gumb
|
|
submitBtn.textContent = originalBtnText;
|
|
submitBtn.disabled = false;
|
|
|
|
if (data.success) {
|
|
// Uspešno poslano
|
|
alert(data.data);
|
|
inquiryForm.reset();
|
|
inquiryPopup.classList.remove('active');
|
|
document.body.classList.remove('popup-open');
|
|
} else {
|
|
// Napaka
|
|
console.error('Form submission error:', data);
|
|
alert(data.data || 'There was an error sending your inquiry. Please try again.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
// Ponastavi gumb
|
|
submitBtn.textContent = originalBtnText;
|
|
submitBtn.disabled = false;
|
|
|
|
console.error('Error during form submission:', error);
|
|
alert('There was an error sending your inquiry: ' + error.message);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Video section -->
|
|
<section class="video-section">
|
|
<div class="container">
|
|
<div style="padding:75% 0 0 0;position:relative;">
|
|
<iframe src="<?php echo esc_url(get_theme_mod('video_url', 'https://player.vimeo.com/video/1061260497?h=7fb6d020c3')); ?>&badge=0&autopause=0&player_id=0&app_id=58479"
|
|
frameborder="0"
|
|
allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media"
|
|
style="position:absolute;top:0;left:0;width:100%;height:100%;"
|
|
title="EU-Wonder_30sec">
|
|
</iframe>
|
|
</div>
|
|
<script src="https://player.vimeo.com/api/player.js"></script>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Customer Reviews section -->
|
|
<section class="reviews-section">
|
|
<div class="container">
|
|
<h2 class="section-title">What Our Customers Say</h2>
|
|
<div class="reviews-container">
|
|
<!-- Elfsight Google Reviews | Untitled Google Reviews -->
|
|
<script src="https://static.elfsight.com/platform/platform.js" async></script>
|
|
<div class="elfsight-app-2b69875e-3d29-4d62-bd00-e8f5c51b40d3" data-elfsight-app-lazy></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CSS za Reviews sekcijo -->
|
|
<style>
|
|
.reviews-section {
|
|
padding: 4rem 0;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.reviews-container {
|
|
margin-top: 2rem;
|
|
max-width: 1100px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.reviews-section {
|
|
padding: 3rem 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<?php get_footer(); ?>
|