vargha/hoponhopofftickets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance gallery functionality with lightbox feature and improve icon sprite accessibility

Browse Source 
- Added a lightbox feature for gallery images, allowing users to view photos in a modal with navigation controls.
- Updated the SVG sprite to include inline styles for better accessibility.
- Increased CSS specificity by doubling the `.vc-app` class to ensure styles override Astra theme defaults.
- Introduced new shortcodes for bus tours, about section, and articles in the VC_Sections class.
- Improved the handling of featured images in the single tour template for sharper display.
- Updated version number to 1.8.15.
This commit is contained in:
amir
2026-09-23 17:26:56 +03:30
parent b0e302be15
commit d5686ed14b
19 changed files with 1700 additions and 684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
viator-collector/includes/class-vc-sections.php
View File

@@ -15,6 +15,9 @@ class VC_Sections {
const TOP_ATTRS = 'viator_top_attractions';
const ACTIVITIES = 'viator_browse_activities';
const TOP_TOURS = 'viator_top_tours';
const BUS_TOURS = 'viator_bus_tours';
const ABOUT = 'viator_about';
const ARTICLES = 'viator_articles';
const FAQ = 'viator_faq';
const REVIEWS = 'viator_testimonials';
@@ -28,6 +31,9 @@ class VC_Sections {
add_shortcode( self::TOP_ATTRS, array( __CLASS__, 'top_attractions' ) );
add_shortcode( self::ACTIVITIES, array( __CLASS__, 'browse_activities' ) );
add_shortcode( self::TOP_TOURS, array( __CLASS__, 'top_tours' ) );
add_shortcode( self::BUS_TOURS, array( __CLASS__, 'bus_tours' ) );
add_shortcode( self::ABOUT, array( __CLASS__, 'about' ) );
add_shortcode( self::ARTICLES, array( __CLASS__, 'articles' ) );
add_shortcode( self::FAQ, array( __CLASS__, 'faq' ) );
add_shortcode( self::REVIEWS, array( __CLASS__, 'testimonials' ) );
}
@@ -130,7 +136,7 @@ class VC_Sections {
* Open a titled rail section and return its unique rail id. Caller fills the
* <ul> with cards and then calls close_rail().
*/
private static function open_rail( $title, $lead, $view_all_url, $view_all_text ) {
private static function open_rail( $title, $lead, $view_all_url, $view_all_text, $rail_class = 'rail--dest' ) {
$id = 'vcRail' . ( ++self::$rail_seq );
ob_start();
?>
@@ -150,7 +156,7 @@ class VC_Sections {
</div>
</div>
</div>
<ul class="rail rail--dest" id="<?php echo esc_attr( $id ); ?>">
<ul class="rail <?php echo esc_attr( $rail_class ); ?>" id="<?php echo esc_attr( $id ); ?>">
<?php
return array( 'id' => $id, 'head' => ob_get_clean() );
}
@@ -450,6 +456,299 @@ class VC_Sections {
return ob_get_clean();
}
/**
* [viator_bus_tours limit="4" tag="hop-on-hop-off" image_id="123"]
*
* The "Open Top Bus Tours…" promo block + a 4-up grid of tour cards. Backed
* by the same curated/filtered tour query as the rails. The bus illustration
* is a heavy image, so it comes from the Media Library via image_id (or a
* direct image URL) — nothing is bundled with the plugin.
*/
public static function bus_tours( $atts ) {
$atts = shortcode_atts(
array(
'ids' => '',
'codes' => '',
'destination' => '',
'tag' => '',
'limit' => 4,
'orderby' => 'rating',
'title' => __( 'Open Top<br>Bus Tours&hellip;', 'viator-collector' ),
'note' => __( 'An open-top hop on hop off bus is the best way to discover the historic and cultural sights of any city.', 'viator-collector' ),
'chip' => __( 'Very Fun!', 'viator-collector' ),
'image_id' => '', // WordPress media attachment ID for the bus illustration.
'image' => '', // …or a direct image URL.
),
$atts,
self::BUS_TOURS
);
$query = self::tour_query( $atts );
if ( ! $query->have_posts() ) {
return '';
}
$archive = get_post_type_archive_link( 'viator_tour' );
$archive = $archive ? $archive : home_url( '/' );
$bus_img = '';
if ( '' !== $atts['image_id'] ) {
// 'full' (uncropped original) — some sites register a hard-cropped
// square 'large', which slices decorative illustrations in half.
$bus_img = wp_get_attachment_image( absint( $atts['image_id'] ), 'full', false, array( 'alt' => '', 'loading' => 'lazy' ) );
} elseif ( '' !== $atts['image'] ) {
$bus_img = '<img src="' . esc_url( $atts['image'] ) . '" alt="" loading="lazy">';
}
ob_start();
?>
<div class="vc-app vc-sections">
<section class="section section--tight">
<div class="container bus">
<div class="promo">
<svg class="promo__route" viewBox="0 0 416 526" fill="none" aria-hidden="true" preserveAspectRatio="none">
<path d="M-20 470 C 90 470, 60 350, 150 330 S 300 300, 300 210 S 210 120, 300 60 S 430 40, 440 -10" stroke="#2CAFC2" stroke-dasharray="3 3" />
</svg>
<div class="promo__head">
<h2 class="promo__title"><?php echo wp_kses( $atts['title'], array( 'br' => array() ) ); ?></h2>
<a class="btn btn--white" href="<?php echo esc_url( $archive ); ?>"><span><?php echo esc_html__( 'See all', 'viator-collector' ); ?></span><?php echo vc_icon( 'arrow-ne' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></a>
</div>
<?php if ( $atts['chip'] ) : ?><span class="chip chip--accent promo__chip"><?php echo esc_html( $atts['chip'] ); ?></span><?php endif; ?>
<?php if ( $bus_img ) : ?><div class="promo__bus" aria-hidden="true"><?php echo $bus_img; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div><?php endif; ?>
<?php if ( $atts['note'] ) : ?><p class="promo__note"><?php echo esc_html( $atts['note'] ); ?></p><?php endif; ?>
</div>
<ul class="bus__grid">
<?php
$i = 0;
while ( $query->have_posts() ) :
$query->the_post();
++$i;
$pid = get_the_ID();
$price = get_post_meta( $pid, '_vc_price_from', true );
$currency = get_post_meta( $pid, '_vc_currency', true );
$terms = get_the_terms( $pid, 'viator_destination' );
$kicker = ( $terms && ! is_wp_error( $terms ) ) ? $terms[0]->name : '';
$active = ( 1 === $i );
$badge = vc_ring_badge( 'BOOK NOW · BOOK NOW · ', get_permalink( $pid ), 'card' );
if ( $active ) {
$badge = str_replace( 'ring-badge--card', 'ring-badge--card ring-badge--accent', $badge );
}
?>
<li class="tcard<?php echo $active ? ' is-active' : ''; ?>">
<?php echo vc_tour_image_html( $pid, 'tcard__img' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="tcard__top">
<?php if ( $kicker ) : ?><span class="tcard__k"><?php echo esc_html( $kicker ); ?></span><?php endif; ?>
<h3 class="tcard__title"><a href="<?php echo esc_url( get_permalink( $pid ) ); ?>"><?php echo esc_html( get_the_title( $pid ) ); ?></a></h3>
</div>
<div class="tcard__bottom">
<?php if ( '' !== (string) $price ) : ?>
<div class="meta">
<span class="meta__k"><?php echo esc_html__( 'Start at', 'viator-collector' ); ?></span>
<span class="meta__v"><?php echo esc_html( vc_money( $price, $currency ) ); ?></span>
</div>
<?php endif; ?>
<?php echo $badge; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
</section>
</div>
<?php
wp_reset_postdata();
return ob_get_clean();
}
/**
* [viator_about image_id="123" title="Hop On Hop Off" highlight="Memorable"
* stats="25+|Years Experience;;500+|Tours Conducted"]
*
* A static "About" marketing block (headline + chip, paragraph, stat counters
* and a decorative bus). All copy is editable via attributes; the isometric
* bus is a heavy image supplied from the Media Library (image_id / image).
*/
public static function about( $atts ) {
$atts = shortcode_atts(
array(
'title' => __( 'Hop On Hop Off', 'viator-collector' ),
'highlight' => __( 'Memorable', 'viator-collector' ),
'text' => __( 'Discover cities the memorable way — hop on and off our open-top buses at every major sight and explore each place at your own pace, with expert local commentary along the way.', 'viator-collector' ),
'button_text' => __( 'About us', 'viator-collector' ),
'button_url' => '',
'image_id' => '',
'image' => '',
'stats' => '', // "25+|Years Experience;;500+|Tours Conducted;;430+|Tours this Year;;15+|Different Tours"
),
$atts,
self::ABOUT
);
$stats = array();
if ( '' !== $atts['stats'] ) {
foreach ( explode( ';;', $atts['stats'] ) as $pair ) {
$p = array_map( 'trim', explode( '|', $pair, 2 ) );
if ( '' !== $p[0] && isset( $p[1] ) ) {
$stats[] = array( 'num' => $p[0], 'label' => $p[1] );
}
}
}
if ( empty( $stats ) ) {
$stats = array(
array( 'num' => '25+', 'label' => __( 'Years Experience', 'viator-collector' ) ),
array( 'num' => '500+', 'label' => __( 'Tours Conducted', 'viator-collector' ) ),
array( 'num' => '430+', 'label' => __( 'Tours this Year', 'viator-collector' ) ),
array( 'num' => '15+', 'label' => __( 'Different Tours', 'viator-collector' ) ),
);
}
$button_url = $atts['button_url'];
if ( '' === $button_url ) {
$button_url = get_post_type_archive_link( 'viator_tour' );
$button_url = $button_url ? $button_url : home_url( '/' );
}
$bus_img = '';
if ( '' !== $atts['image_id'] ) {
// 'full' (uncropped original) — some sites register a hard-cropped
// square 'large', which slices decorative illustrations in half.
$bus_img = wp_get_attachment_image( absint( $atts['image_id'] ), 'full', false, array( 'alt' => '', 'loading' => 'lazy' ) );
} elseif ( '' !== $atts['image'] ) {
$bus_img = '<img src="' . esc_url( $atts['image'] ) . '" alt="" loading="lazy">';
}
ob_start();
?>
<div class="vc-app vc-sections">
<section class="section">
<div class="container about">
<div class="about__art" aria-hidden="true">
<span class="about__glow"></span>
<span class="about__trail" aria-hidden="true"></span>
<?php if ( $bus_img ) : ?><span class="about__bus"><?php echo $bus_img; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span><?php endif; ?>
<svg class="about__arcs" viewBox="0 0 480 440" fill="none" aria-hidden="true">
<defs>
<path id="busArc" pathLength="100" d="M20 336.6V221.6C20 96.6 170 23.4 170 148.4V263.4" />
</defs>
<g stroke="#FFCC00" stroke-width="9" stroke-linecap="round" fill="none" transform="translate(16 24)">
<use href="#busArc" opacity="0.1" stroke-dasharray="62 100" />
<use href="#busArc" opacity="0.25" stroke-dasharray="69 100" transform="translate(48 22)" />
<use href="#busArc" opacity="0.45" stroke-dasharray="76 100" transform="translate(96 44)" />
<use href="#busArc" opacity="0.8" stroke-dasharray="83 100" transform="translate(144 66)" />
</g>
</svg>
</div>
<div class="about__body">
<div class="about__head">
<h2 class="about__title"><?php echo esc_html( $atts['title'] ); ?><?php if ( $atts['highlight'] ) : ?><span class="chip chip--accent about__chip"><?php echo esc_html( $atts['highlight'] ); ?></span><?php endif; ?></h2>
<a class="btn btn--dark" href="<?php echo esc_url( $button_url ); ?>"><span><?php echo esc_html( $atts['button_text'] ); ?></span><?php echo vc_icon( 'arrow-right' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></a>
</div>
<?php if ( $atts['text'] ) : ?><p class="about__text"><?php echo esc_html( $atts['text'] ); ?></p><?php endif; ?>
<dl class="stats">
<?php
foreach ( $stats as $s ) :
$num = $s['num'];
$suffix = '';
if ( preg_match( '/^(.*?)(\+)$/', $num, $m ) ) {
$num = $m[1];
$suffix = $m[2];
}
?>
<div class="stat">
<dt class="stat__num"><?php echo esc_html( $num ); ?><?php if ( $suffix ) : ?><span><?php echo esc_html( $suffix ); ?></span><?php endif; ?></dt>
<dd class="stat__label"><?php echo esc_html( $s['label'] ); ?></dd>
</div>
<?php endforeach; ?>
</dl>
</div>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
/**
* [viator_articles limit="8" category="news"]
*
* A rail of the latest blog posts, styled as the design's "Latest Articles"
* cards. Uses each post's featured image, time and excerpt; links to the post.
*/
public static function articles( $atts ) {
$atts = shortcode_atts(
array(
'title' => __( 'Latest<br>Articles', 'viator-collector' ),
'lead' => __( 'News, tips and stories from our tours.', 'viator-collector' ),
'limit' => 8,
'category' => '',
'view_all' => '',
),
$atts,
self::ARTICLES
);
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => max( 1, absint( $atts['limit'] ) ),
'ignore_sticky_posts' => true,
'no_found_rows' => true,
);
if ( '' !== $atts['category'] ) {
$args['category_name'] = sanitize_title( $atts['category'] );
}
$query = new WP_Query( $args );
if ( ! $query->have_posts() ) {
return '';
}
$view_all = $atts['view_all'];
if ( '' === $view_all ) {
$posts_page = (int) get_option( 'page_for_posts' );
$view_all = $posts_page ? get_permalink( $posts_page ) : home_url( '/' );
}
$rail = self::open_rail( $atts['title'], $atts['lead'], $view_all, __( 'See all', 'viator-collector' ), 'rail--art' );
ob_start();
echo $rail['head']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$i = 0;
while ( $query->have_posts() ) :
$query->the_post();
++$i;
$pid = get_the_ID();
$active = ( 1 === $i );
$img = has_post_thumbnail( $pid ) ? get_the_post_thumbnail( $pid, 'large', array( 'class' => 'acard__img', 'loading' => 'lazy', 'alt' => '' ) ) : '';
$time = human_time_diff( (int) get_post_time( 'U', true, $pid ), (int) current_time( 'timestamp', true ) );
$excerpt = get_the_excerpt( $pid );
$badge = vc_ring_badge( 'READ MORE · READ MORE · ', get_permalink( $pid ), 'card' );
if ( $active ) {
$badge = str_replace( 'ring-badge--card', 'ring-badge--card ring-badge--accent', $badge );
}
?>
<li class="acard<?php echo $active ? ' is-active' : ''; ?>">
<div class="acard__media">
<?php echo $img; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<span class="chip chip--glass acard__time"><?php printf( /* translators: %s: human-readable time difference, e.g. "3 hours". */ esc_html__( '%s ago', 'viator-collector' ), esc_html( $time ) ); ?></span>
<div class="acard__overlay">
<h3 class="acard__title"><a href="<?php echo esc_url( get_permalink( $pid ) ); ?>"><?php echo esc_html( get_the_title( $pid ) ); ?></a></h3>
<?php echo $badge; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
</div>
<?php if ( $excerpt ) : ?><p class="acard__excerpt"><?php echo esc_html( $excerpt ); ?></p><?php endif; ?>
</li>
<?php
endwhile;
echo self::close_rail(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
wp_reset_postdata();
return ob_get_clean();
}
/**
* Shared tour query for the landing sections. Supports curation (ids /
* product codes) and filtering (destination / tag), with a sane fallback.