| 1 |
<?php |
| 2 |
if (!defined('ABSPATH')) { |
| 3 |
exit; |
| 4 |
} |
| 5 |
?> |
| 6 |
<div class="yatra-trip-hero-new" itemscope itemtype="https://schema.org/TouristTrip"> |
| 7 |
<div class="yatra-hero-header"> |
| 8 |
<nav class="yatra-hero-breadcrumb" aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList"> |
| 9 |
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> |
| 10 |
<a href="<?php echo esc_url(home_url('/')); ?>" itemprop="item"> |
| 11 |
<span itemprop="name"><?php echo esc_html__('Home', 'yatra'); ?></span> |
| 12 |
</a> |
| 13 |
<meta itemprop="position" content="1" /> |
| 14 |
</span> |
| 15 |
<span class="yatra-hero-breadcrumb-separator">›</span> |
| 16 |
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> |
| 17 |
<a href="<?php echo esc_url(home_url('/' . \Yatra\Services\SettingsService::getTripBase() . '/')); ?>" itemprop="item"> |
| 18 |
<span itemprop="name"><?php echo esc_html__('Trips', 'yatra'); ?></span> |
| 19 |
</a> |
| 20 |
<meta itemprop="position" content="2" /> |
| 21 |
</span> |
| 22 |
<span class="yatra-hero-breadcrumb-separator">›</span> |
| 23 |
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> |
| 24 |
<span class="yatra-hero-breadcrumb-current" itemprop="name"><?php echo esc_html($trip->getTitle()); ?></span> |
| 25 |
<meta itemprop="position" content="3" /> |
| 26 |
</span> |
| 27 |
</nav> |
| 28 |
<h1 class="yatra-trip-hero-title-new" itemprop="name"><?php echo esc_html($trip->getTitle()); ?></h1> |
| 29 |
<div class="yatra-hero-meta"> |
| 30 |
<div class="yatra-hero-rating" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> |
| 31 |
<?php if ($trip->getAverageRating() > 0 || $trip->getReviewCount() > 0): ?> |
| 32 |
<?php |
| 33 |
$hero_avg = (float) $trip->getAverageRating(); |
| 34 |
$hero_full = (int) floor($hero_avg); |
| 35 |
$hero_half = ($hero_avg - $hero_full) >= 0.3; |
| 36 |
?> |
| 37 |
<div class="yatra-rating-stars"> |
| 38 |
<?php for ($i = 1; $i <= 5; $i++) : ?> |
| 39 |
<?php |
| 40 |
if ($i <= $hero_full) { |
| 41 |
$hero_star_class = 'yatra-star filled'; |
| 42 |
} elseif ($i === $hero_full + 1 && $hero_half) { |
| 43 |
$hero_star_class = 'yatra-star half'; |
| 44 |
} else { |
| 45 |
$hero_star_class = 'yatra-star'; |
| 46 |
} |
| 47 |
?> |
| 48 |
<span class="<?php echo esc_attr($hero_star_class); ?>" aria-label="<?php echo esc_attr(sprintf(_n('%d star', '%d stars', $i, 'yatra'), $i)); ?>">� |
| 49 |
</span> |
| 50 |
<?php endfor; ?> |
| 51 |
</div> |
| 52 |
<span class="yatra-rating-number" itemprop="ratingValue"><?php echo esc_html(number_format($trip->getAverageRating(), 1)); ?></span> |
| 53 |
<span class="yatra-rating-text"> |
| 54 |
<span itemprop="reviewCount"><?php echo esc_html($trip->getReviewCount()); ?></span> |
| 55 |
<?php echo esc_html(_n('Review', 'Reviews', $trip->getReviewCount(), 'yatra')); ?> |
| 56 |
</span> |
| 57 |
<meta itemprop="bestRating" content="5"> |
| 58 |
<meta itemprop="worstRating" content="1"> |
| 59 |
<?php else: ?> |
| 60 |
<div class="yatra-rating-stars yatra-no-rating"> |
| 61 |
<?php for ($i = 1; $i <= 5; $i++): ?> |
| 62 |
<span class="yatra-star" aria-label="<?php echo esc_attr(sprintf(_n('%d star', '%d stars', $i, 'yatra'), $i)); ?>">� |
| 63 |
</span> |
| 64 |
<?php endfor; ?> |
| 65 |
</div> |
| 66 |
<span class="yatra-rating-text yatra-no-reviews"><?php echo esc_html__('No reviews yet', 'yatra'); ?></span> |
| 67 |
<meta itemprop="reviewCount" content="0"> |
| 68 |
<?php endif; ?> |
| 69 |
</div> |
| 70 |
<?php if (!empty($trip->getStartingLocation())): ?> |
| 71 |
<div class="yatra-hero-location" itemprop="location" itemscope itemtype="https://schema.org/Place"> |
| 72 |
<?php echo yatra_svg_icon('map-pin', 'yatra-icon-sm'); ?> |
| 73 |
<span itemprop="name"><?php echo esc_html($trip->getStartingLocation()); ?></span> |
| 74 |
</div> |
| 75 |
<?php endif; ?> |
| 76 |
<?php if (!empty($trip->getDurationDays())): ?> |
| 77 |
<div class="yatra-hero-duration" itemprop="duration"> |
| 78 |
<?php echo yatra_svg_icon('clock', 'yatra-icon-sm'); ?> |
| 79 |
<span> |
| 80 |
<?php |
| 81 |
if (!empty($trip->getDurationNights()) && $trip->getDurationNights() > 0) { |
| 82 |
echo esc_html(sprintf(_n('%d day %d night', '%d days %d nights', $trip->getDurationDays(), 'yatra'), $trip->getDurationDays(), $trip->getDurationNights())); |
| 83 |
} else { |
| 84 |
echo esc_html(sprintf(_n('%d day', '%d days', $trip->getDurationDays(), 'yatra'), $trip->getDurationDays())); |
| 85 |
} |
| 86 |
?> |
| 87 |
</span> |
| 88 |
</div> |
| 89 |
<?php endif; ?> |
| 90 |
<?php if (!empty($trip->getSeasonalAvailability())): ?> |
| 91 |
<div class="yatra-hero-season"> |
| 92 |
<?php echo yatra_svg_icon('calendar', 'yatra-icon-sm'); ?> |
| 93 |
<span><?php echo esc_html($trip->getSeasonalAvailability()); ?></span> |
| 94 |
</div> |
| 95 |
<?php endif; ?> |
| 96 |
</div> |
| 97 |
</div> |
| 98 |
|
| 99 |
<?php |
| 100 |
// Determine hero images |
| 101 |
// 1. If featured image is set, use it as main image |
| 102 |
// 2. If no featured image, use first gallery image as main |
| 103 |
// 3. Side images are gallery images (up to 3) |
| 104 |
|
| 105 |
// Gallery images are already URLs from SingleTripController |
| 106 |
$gallery_image_urls = isset($trip->gallery_images) && is_array($trip->gallery_images) ? $trip->gallery_images : []; |
| 107 |
|
| 108 |
$has_featured = !empty($trip->featured_image_url); |
| 109 |
|
| 110 |
// Main image: featured image OR first gallery image |
| 111 |
$main_image_url = ''; |
| 112 |
if ($has_featured) { |
| 113 |
$main_image_url = $trip->featured_image_url; |
| 114 |
// If featured is set, side images are first 3 gallery images |
| 115 |
$side_images = array_slice($gallery_image_urls, 0, 3); |
| 116 |
} else { |
| 117 |
// No featured image - use first gallery as main |
| 118 |
$main_image_url = !empty($gallery_image_urls[0]) ? $gallery_image_urls[0] : ''; |
| 119 |
// Side images start from index 1 |
| 120 |
$side_images = array_slice($gallery_image_urls, 1, 3); |
| 121 |
} |
| 122 |
|
| 123 |
// Create combined gallery array for modal (featured + gallery images) |
| 124 |
$all_gallery_images = []; |
| 125 |
if ($has_featured) { |
| 126 |
$all_gallery_images[] = $main_image_url; |
| 127 |
} |
| 128 |
$all_gallery_images = array_merge($all_gallery_images, $gallery_image_urls); |
| 129 |
|
| 130 |
// Set global variable for content-gallery template |
| 131 |
global $yatra_hero_gallery_images; |
| 132 |
$yatra_hero_gallery_images = $all_gallery_images; |
| 133 |
|
| 134 |
$total_images = count($all_gallery_images); |
| 135 |
?> |
| 136 |
<div class="yatra-hero-images"> |
| 137 |
<div class="yatra-hero-main-image" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"> |
| 138 |
<?php if (isset($trip->discount_percentage) && $trip->discount_percentage > 0): ?> |
| 139 |
<div class="yatra-hero-discount-tag" itemprop="offers" itemscope itemtype="https://schema.org/Offer"> |
| 140 |
<?php echo esc_html__('SAVE UP TO', 'yatra'); ?> <?php echo esc_html($trip->discount_percentage); ?>% |
| 141 |
<meta itemprop="discount" content="<?php echo esc_attr($trip->discount_percentage); ?>"> |
| 142 |
<meta itemprop="discountCurrency" content="<?php echo esc_attr(\Yatra\Services\SettingsService::getCurrency()); ?>"> |
| 143 |
</div> |
| 144 |
<?php endif; ?> |
| 145 |
|
| 146 |
<!-- Media Badges --> |
| 147 |
<div class="yatra-hero-media-badges"> |
| 148 |
<?php |
| 149 |
$image_count = count($all_gallery_images); |
| 150 |
$video_count = count($trip->videos ?? []); |
| 151 |
$youtube_count = count($trip->youtube_videos ?? []); |
| 152 |
$tour_count = count($trip->virtual_tours ?? []); |
| 153 |
$doc_count = count($trip->documents ?? []); |
| 154 |
|
| 155 |
if ($image_count > 0): ?> |
| 156 |
<span class="yatra-media-badge yatra-media-badge-image"> |
| 157 |
<?php echo yatra_svg_icon('camera', 'yatra-media-badge-icon'); ?> |
| 158 |
<span class="yatra-media-badge-count"><?php echo esc_html($image_count); ?></span> |
| 159 |
</span> |
| 160 |
<?php endif; ?> |
| 161 |
|
| 162 |
<?php if ($video_count > 0): ?> |
| 163 |
<span class="yatra-media-badge yatra-media-badge-video"> |
| 164 |
<?php echo yatra_svg_icon('play', 'yatra-media-badge-icon'); ?> |
| 165 |
<span class="yatra-media-badge-count"><?php echo esc_html($video_count); ?></span> |
| 166 |
</span> |
| 167 |
<?php endif; ?> |
| 168 |
|
| 169 |
<?php if ($youtube_count > 0): ?> |
| 170 |
<span class="yatra-media-badge yatra-media-badge-youtube"> |
| 171 |
<?php echo yatra_svg_icon('video', 'yatra-media-badge-icon'); ?> |
| 172 |
<span class="yatra-media-badge-count"><?php echo esc_html($youtube_count); ?></span> |
| 173 |
</span> |
| 174 |
<?php endif; ?> |
| 175 |
|
| 176 |
<?php if ($tour_count > 0): ?> |
| 177 |
<span class="yatra-media-badge yatra-media-badge-tour"> |
| 178 |
<?php echo yatra_svg_icon('globe', 'yatra-media-badge-icon'); ?> |
| 179 |
<span class="yatra-media-badge-count"><?php echo esc_html($tour_count); ?></span> |
| 180 |
</span> |
| 181 |
<?php endif; ?> |
| 182 |
|
| 183 |
<?php if ($doc_count > 0): ?> |
| 184 |
<span class="yatra-media-badge yatra-media-badge-document"> |
| 185 |
<?php echo yatra_svg_icon('file-text', 'yatra-media-badge-icon'); ?> |
| 186 |
<span class="yatra-media-badge-count"><?php echo esc_html($doc_count); ?></span> |
| 187 |
</span> |
| 188 |
<?php endif; ?> |
| 189 |
</div> |
| 190 |
|
| 191 |
<?php if (!empty($main_image_url)): ?> |
| 192 |
<a href="#" class="yatra-hero-main-img-link" data-gallery="hero-gallery" data-image-index="0"> |
| 193 |
<img src="<?php echo esc_url($main_image_url); ?>" |
| 194 |
alt="<?php echo esc_attr(sprintf(__('Main image for %s', 'yatra'), $trip->getTitle())); ?>" |
| 195 |
title="<?php echo esc_attr($trip->getTitle()); ?>" |
| 196 |
itemprop="url" content="<?php echo esc_url($main_image_url); ?>" |
| 197 |
data-yatra-src="<?php echo esc_url($main_image_url); ?>" |
| 198 |
data-no-lazy="1" |
| 199 |
class="yatra-hero-main-img"> |
| 200 |
</a> |
| 201 |
<meta itemprop="contentUrl" content="<?php echo esc_url($main_image_url); ?>"> |
| 202 |
<meta itemprop="encodingFormat" content="image/jpeg"> |
| 203 |
<meta itemprop="width" content="1200"> |
| 204 |
<meta itemprop="height" content="630"> |
| 205 |
<?php else: ?> |
| 206 |
<img src="<?php echo esc_url(plugins_url('assets/images/trip-placeholder.svg', YATRA_PLUGIN_FILE)); ?>" |
| 207 |
alt="<?php echo esc_attr(sprintf(__('Placeholder image for %s', 'yatra'), $trip->getTitle())); ?>" |
| 208 |
title="<?php echo esc_attr($trip->getTitle()); ?>" |
| 209 |
itemprop="url" content="<?php echo esc_url(plugins_url('assets/images/trip-placeholder.svg', YATRA_PLUGIN_FILE)); ?>" |
| 210 |
class="yatra-hero-main-img"> |
| 211 |
<meta itemprop="contentUrl" content="<?php echo esc_url(plugins_url('assets/images/trip-placeholder.svg', YATRA_PLUGIN_FILE)); ?>"> |
| 212 |
<meta itemprop="encodingFormat" content="image/svg+xml"> |
| 213 |
<?php endif; ?> |
| 214 |
|
| 215 |
<!-- Quick Media Switcher --> |
| 216 |
<div class="yatra-hero-media-switcher"> |
| 217 |
<button type="button" class="yatra-media-switcher-btn yatra-media-switcher-active" data-media="images"> |
| 218 |
<?php echo yatra_svg_icon('camera', 'yatra-media-switcher-icon'); ?> |
| 219 |
<span>Images</span> |
| 220 |
</button> |
| 221 |
<?php if ($video_count > 0): ?> |
| 222 |
<button type="button" class="yatra-media-switcher-btn" data-media="videos"> |
| 223 |
<?php echo yatra_svg_icon('play', 'yatra-media-switcher-icon'); ?> |
| 224 |
<span>Videos</span> |
| 225 |
</button> |
| 226 |
<?php endif; ?> |
| 227 |
<?php if ($youtube_count > 0): ?> |
| 228 |
<button type="button" class="yatra-media-switcher-btn" data-media="youtube"> |
| 229 |
<?php echo yatra_svg_icon('video', 'yatra-media-switcher-icon'); ?> |
| 230 |
<span>Video</span> |
| 231 |
</button> |
| 232 |
<?php endif; ?> |
| 233 |
<?php if ($tour_count > 0): ?> |
| 234 |
<button type="button" class="yatra-media-switcher-btn" data-media="tours"> |
| 235 |
<?php echo yatra_svg_icon('globe', 'yatra-media-switcher-icon'); ?> |
| 236 |
<span>360°</span> |
| 237 |
</button> |
| 238 |
<?php endif; ?> |
| 239 |
<?php if ($doc_count > 0): ?> |
| 240 |
<button type="button" class="yatra-media-switcher-btn" data-media="documents"> |
| 241 |
<?php echo yatra_svg_icon('file-text', 'yatra-media-switcher-icon'); ?> |
| 242 |
<span>Documents</span> |
| 243 |
</button> |
| 244 |
<?php endif; ?> |
| 245 |
</div> |
| 246 |
|
| 247 |
<!-- Media Data for JavaScript --> |
| 248 |
<script type="application/json" id="yatra-hero-media-data"> |
| 249 |
<?php echo json_encode([ |
| 250 |
'images' => $all_gallery_images, |
| 251 |
'videos' => $trip->videos ?? [], |
| 252 |
'youtube_videos' => $trip->youtube_videos ?? [], |
| 253 |
'virtual_tours' => $trip->virtual_tours ?? [], |
| 254 |
'documents' => $trip->documents ?? [] |
| 255 |
]); ?> |
| 256 |
</script> |
| 257 |
|
| 258 |
<!-- Book Now Button on Right Side of Main Image --> |
| 259 |
<div class="yatra-hero-book-now-container"> |
| 260 |
<a href="#yatra-booking-widget" class="yatra-hero-book-now-btn"> |
| 261 |
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 262 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" |
| 263 |
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/> |
| 264 |
</svg> |
| 265 |
<?php echo esc_html__('Book Now', 'yatra'); ?> |
| 266 |
- <?php echo esc_html(yatra_format_price($base_price)); ?> |
| 267 |
</a> |
| 268 |
</div> |
| 269 |
</div> |
| 270 |
<div class="yatra-hero-side-images"> |
| 271 |
<?php if (!empty($side_images)): ?> |
| 272 |
<?php foreach ($side_images as $index => $img_url): ?> |
| 273 |
<div class="yatra-side-image-item"> |
| 274 |
<img src="<?php echo esc_url($img_url); ?>" |
| 275 |
alt="<?php echo esc_attr__('Gallery Image', 'yatra'); ?>" |
| 276 |
data-yatra-src="<?php echo esc_url($img_url); ?>" |
| 277 |
data-no-lazy="1"> |
| 278 |
<?php if ($index === 0 && function_exists('yatra_wishlist_enabled') && yatra_wishlist_enabled() && !empty($trip->id)) : ?> |
| 279 |
<button type="button" class="yatra-favorite-btn" |
| 280 |
data-trip-id="<?php echo esc_attr((string) $trip->id); ?>" |
| 281 |
aria-label="<?php echo esc_attr__('Save to wishlist', 'yatra'); ?>"> |
| 282 |
<?php echo yatra_svg_icon('heart', 'yatra-icon-sm'); ?> |
| 283 |
</button> |
| 284 |
<?php endif; ?> |
| 285 |
<?php if ($index === count($side_images) - 1 && $total_images > 4): ?> |
| 286 |
<button type="button" class="yatra-view-all-photos-btn yatra-gallery-play-btn" |
| 287 |
data-gallery="hero-gallery"> |
| 288 |
<?php echo yatra_svg_icon('camera', 'yatra-icon-sm'); ?> |
| 289 |
<?php echo sprintf(esc_html__('View all %d photos', 'yatra'), $total_images); ?> |
| 290 |
</button> |
| 291 |
<?php endif; ?> |
| 292 |
</div> |
| 293 |
<?php endforeach; ?> |
| 294 |
<?php else: ?> |
| 295 |
<div class="yatra-side-image-item"> |
| 296 |
<img src="<?php echo esc_url(plugins_url('assets/images/trip-placeholder.svg', YATRA_PLUGIN_FILE)); ?>" |
| 297 |
alt="<?php echo esc_attr__('Gallery Image', 'yatra'); ?>"> |
| 298 |
</div> |
| 299 |
<?php endif; ?> |
| 300 |
</div> |
| 301 |
</div> |
| 302 |
</div> |
