| Server IP : 65.108.144.40 / Your IP : 216.73.217.165 Web Server : Apache/2.4.52 (Ubuntu) System : Linux ubuntu-8gb-hel1-1 5.15.0-173-generic #183-Ubuntu SMP Fri Mar 6 13:29:34 UTC 2026 x86_64 User : dev ( 1000) PHP Version : 8.2.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/capital-catering/web/app/themes/capital-catering/ |
Upload File : |
<?php
/**
* Template Name: Test Package
*/
get_header();
the_content();
?>
<div class="container">
<div id="order-date-time-wrapper" style="margin-bottom: 20px;">
<div>
<h2>Choose your catering event date and time</h2>
<p>Our team will set up your order at the chosen date and time of your event.</p>
</div>
<div class="order-date-time-inputs">
<div class="order-input-wrap order-date-input-wrap">
<span class="order-inp-icon"><img src="/app/uploads/2025/03/calendar.svg" alt=""></span>
<input type="text" id="order_date" name="order_date" class="order-inp" placeholder="dd/mm/yyyy" value="" />
</div>
<div class="custom-time-picker">
<div class="time-selected" id="time-selector">
<span class="order-inp-icon"><img src="/app/uploads/2025/03/clock.svg" alt="clock"></span><span id="selected-time-text">hh:mm</span>
</div>
<div class="time-popup" id="time-popup">
<div class="time-columns">
<ul id="hour-list">
<?php for ($hour = 0; $hour <= 11; $hour++): ?>
<li data-value="<?= str_pad($hour, 2, '0', STR_PAD_LEFT); ?>">
<?= str_pad($hour, 2, '0', STR_PAD_LEFT); ?>
</li>
<?php endfor; ?>
</ul>
<ul id="minute-list">
<?php foreach (['00', '15', '30', '45'] as $minute): ?>
<li data-value="<?= $minute; ?>"><?= $minute; ?></li>
<?php endforeach; ?>
</ul>
<ul id="ampm-list">
<li data-value="AM">AM</li>
<li data-value="PM">PM</li>
</ul>
</div>
</div>
<input type="hidden" name="order_time" id="order_time">
</div>
</div>
</div>
</div>
<?php
$count = WC()->cart->get_cart_contents_count();
$class = ($count == 0) ? "d-none" : "";
?>
<div class="confirm-package-popup d-none <?php echo esc_attr($class); ?>">
<div class="popup-content">
<span class="close-popup">×</span>
<h2>Your chosen menu is already in your cart</h2>
<p>Your selected menu is already in the cart. To add a new one, you’ll need to replace your current choice.</p>
<div class="d-flex align-items-center">
<a href="#">Yes proceed</a>
<a href="#">Cancel</a>
</div>
</div>
</div>
<div class="overlay-message" id="overlayMessage" style="display: none;">
Please select the date and time of your event before selecting items for your menu !.
</div>
<?php
$product_id = 463;
$product = wc_get_product($product_id);
$variations = $product->get_available_variations();
// Generate variations JSON
$variations_json = wp_json_encode($variations);
$variations_attr = function_exists('wc_esc_json') ? wc_esc_json($variations_json) : esc_attr($variations_json);
?>
<div id="vip-page-content" class="position-relative">
<div class="container">
<div class="variations" id="main" data-product-variations='<?php echo $variations_attr; ?>'>
<input type="text" name="vip_variation_sel" hidden value="0">
<?php
$attributes = $product->get_attributes();
$attribute_index = 0;
foreach ($attributes as $attribute_name => $options) :
// Get term IDs in the correct WooCommerce order
$term_ids = wp_list_pluck(get_terms([
'taxonomy' => $attribute_name,
'hide_empty' => false,
'orderby' => 'menu_order',
'order' => 'ASC',
]), 'term_id');
// Fetch terms again in the correct order
$sorted_terms = get_terms([
'taxonomy' => $attribute_name,
'hide_empty' => false,
'include' => $term_ids,
'orderby' => 'include',
]);
?>
<div class="attribute-group">
<h4><?php echo wc_attribute_label($attribute_name); ?></h4>
<?php
if ($attribute_index === 1) {
echo '<p class="subtitle">Male staff are assigned to male-only events, while female staff are provided for female-only events.</p>';
}
?>
<div class="radio">
<?php
$main_chacked = false;
foreach ($sorted_terms as $term) :
$option_label = $term->name;
$variations = $product->get_available_variations();
$attribute_keys = array_keys($variations[0]['attributes']);
$attribute_count = count($attribute_keys);
$attribute = array_key_first($variations[0]['attributes']);
$attribute_slug = str_replace('attribute_', '', $attribute);
$terms = wp_get_post_terms($product->get_id(), $attribute_slug, 'all');
$is_single_attribute = $attribute_count === 1;
$term_price = '';
$price_num = 0;
$variation_idd = 0;
foreach ($variations as $variation) {
$attributes = $variation['attributes'];
if ($attribute_slug && isset($attributes["attribute_$attribute_slug"]) && $attributes["attribute_$attribute_slug"] === $term->slug) {
$term_price = wc_price($variation['display_price']);
$price_num = $variation['display_price'];
$variation_idd = $variation['variation_id'];
break;
}
}
?>
<label class="vip-option">
<?php if ($price_num) { ?>
<input type="radio" name="vip_variation_main"
value="<?php echo esc_attr($variation_idd); ?>"
class="variation-radio-input"
data-label="<?php echo esc_attr($option_label); ?>"
data-attr="<?php echo esc_attr($attribute_name); ?>"
data-attrname="<?php echo esc_attr($term->slug); ?>"
data-price="<?php echo esc_attr($price_num); ?>"
<?php echo!$main_chacked ? 'checked="checked"' : ''; ?>>
<?php
$main_chacked = true;
} else {
?>
<input type="radio" name="vip_variation_option"
value="0"
class="variation-radio-input"
data-label="<?php echo esc_attr($option_label); ?>"
data-attr="<?php echo esc_attr($attribute_name); ?>"
data-attrname="<?php echo esc_attr($term->slug); ?>"
data-price="<?php echo esc_attr($price_num); ?>">
<?php } ?>
<div class="vip-price-box">
<span class="vip-label"><?php echo esc_html($option_label); ?></span>
<span class="vip-price"><?php echo $term_price; ?></span>
</div>
</label>
<?php endforeach; ?>
</div>
<?php
if ($attribute_index === 0) {
echo '<p class="subtitle-two"><img src="/app/uploads/2025/03/Vector-14.svg" alt="info-icon">Please note: if the number of guests for your event falls between two package sizes, you will need to select the larger package to ensure sufficient portions for all attendees. If you need support with your order get in touch on Whatsapp <a href="https://wa.me/971527778787" target="_blank">+971 52 777 8787</a></p>';
}
?>
</div>
<?php
$attribute_index++;
endforeach;
?>
</div>
<?php if (have_rows('select_category', $product_id)) : ?>
<div class="vip-static-content">
<h2>Standard Menu</h2>
<div class="masonry-layout">
<?php while (have_rows('select_category', $product_id)) : the_row(); ?>
<div class="masonry-card">
<div class="menu-section">
<?php
$icon = get_sub_field('section_icon');
$heading = get_sub_field('section_heading');
?>
<?php if ($icon) : ?>
<img src="<?php echo esc_url($icon['url']); ?>" alt="" class="menu-icon">
<?php endif; ?>
<h3>
<?php echo esc_html($heading); ?>
</h3>
<?php if (have_rows('menu_items_copy')) : ?>
<ul>
<?php while (have_rows('menu_items_copy')) : the_row(); ?>
<li><?php echo esc_html(get_sub_field('item_name')); ?></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
<?php
// Get selected rice type (ACF field, single selection)
$emirati_dishes = get_field('emirati_dishes', $product_id);
$title = $emirati_dishes['title'];
$image = $emirati_dishes['image'];
$select_options = $emirati_dishes['add_options'];
?>
<div class="catering-services-section items-included" id="rice" data-product-id="<?php echo esc_attr($product_id); ?>">
<h2>Select your rice for the lamb ouzi</h2>
<div class="row">
<div class="col-lg-6 mb-4">
<div class="add-on-card d-flex align-items-center">
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($title); ?>" class="menu-addon-img">
<div class="menu-box-right">
<h3><?php echo $title; ?></h3>
<form class="rice-variation-form">
<ul>
<?php foreach ($select_options as $index => $option) : ?>
<li>
<label>
<input type="radio"
name="variation_rice"
value="<?php echo esc_attr($option['option']); ?>"
class="rice-variation-radio"
data-price="0"
<?php echo $index === 0 ? 'checked' : ''; ?>>
<?php echo esc_html($option['option']); ?>
</label>
</li>
<?php endforeach; ?>
</ul>
</form>
</div>
</div>
</div>
</div>
</div>
<?php
// Get selected rice type (ACF field, single selection)
$select_services2 = get_field('select_services2', $product_id);
?>
<div class="catering-services-section items-included" id="services" data-product-id="<?php echo esc_attr($product_id); ?>">
<h2>Catering services included</h2>
<div class="row">
<?php
foreach ($select_services2 as $data) :
$service = $data['add_service'] ?? $data;
?>
<div class="col-lg-6 mb-4">
<div class="add-on-card d-flex align-items-center">
<?php if (!empty($service['image']['url'])): ?>
<img src="<?php echo esc_url($service['image']['url']); ?>" alt="<?php echo esc_attr($service['title']); ?>" class="menu-addon-img">
<?php endif; ?>
<div class="menu-box-right">
<h3><?php echo esc_html($service['title']); ?></h3>
<?php if (!empty($service['content'])):
?>
<div class="addon-description">
<?php echo $service['content']; ?>
</div>
<?php endif; ?>
<form class="service-variation-form">
<ul>
<?php foreach ($service['add_options'] as $index => $option) : ?>
<li>
<label>
<input type="radio"
name="variation_service_<?php echo esc_attr(sanitize_title($service['title'])); ?>"
value="<?php echo esc_attr($option['option']); ?>"
class="variation-radio"
data-price="0"
<?php echo $index === 0 ? 'checked' : ''; ?>>
<?php echo esc_html($option['option']); ?>
</label>
</li>
<?php endforeach; ?>
</ul>
</form>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php
// Ensure WooCommerce is active
if (!function_exists('wc_get_product')) {
return;
}
// Get selected rice type (ACF field, single selection)
$select_add_ons = get_field('select_add_ons', $product_id);
if (!empty($select_add_ons)) : // No need to check for an array since it's single select
// Ensure it's a valid WooCommerce product
if (get_post_type($select_add_ons) === 'product') :
$product = wc_get_product($select_add_ons);
if ($product && $product->is_type('grouped')) :
?>
<div class="catering-services-section" id="addons">
<h2>Add-ons</h2> <!-- Display Grouped Product Name -->
<div class="row">
<?php
$child_products = $product->get_children(); // Get linked products
$first = true;
foreach ($child_products as $child_id) :
$child_product = wc_get_product($child_id);
if ($child_product) :
$image_url = get_the_post_thumbnail_url($child_id, 'full');
if (!$image_url) {
$image_url = wc_placeholder_img_src();
}
?>
<div class="col-lg-6 mb-4">
<div class="add-on-card d-flex align-items-center">
<img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr($product->get_name()); ?>" class="menu-addon-img">
<div class="menu-box-right">
<h3><?php echo esc_html($child_product->get_name()); ?></h3>
<?php
$description = $child_product->get_short_description();
if (!empty($description)) :
?>
<div class="addon-description">
<?php echo $description; ?>
</div>
<?php endif; ?>
<?php if ($child_product->is_type('variable')) : ?>
<ul>
<?php
$variations = $child_product->get_available_variations();
$attributes = $child_product->get_attributes();
foreach ($attributes as $attribute_name => $attribute) :
$attribute_slug = wc_sanitize_taxonomy_name($attribute_name);
$terms = wc_get_product_terms($child_product->get_id(), $attribute_slug, ['fields' => 'all']);
foreach ($terms as $term) :
$variation_id = '';
$term_price = '';
$data_price = '';
$variationName = '';
foreach ($variations as $variation) {
$variation_data = wc_get_product($variation['variation_id']);
$variation_attributes = $variation['attributes'];
if (isset($variation_attributes["attribute_$attribute_slug"]) && $variation_attributes["attribute_$attribute_slug"] === $term->slug) {
$term_price = wc_price($variation['display_price']);
$data_price = esc_attr($variation['display_price']);
$variation_id = $variation['variation_id'];
$variationName = $child_product->get_name() . '<br><span class="variation-subtitle">' . esc_html($term->name) . '</span>';
break;
}
}
?>
<div class="main-div d-flex align-items-center justify-content-between variation-item">
<div class="parent">
<label><?php echo esc_html($term->name); ?></label>
<span class="price" data-product-price="<?php echo esc_attr($data_price); ?>">
<?php echo $term_price ? $term_price : __('Price not available', 'woocommerce'); ?>
</span>
</div>
<div class="quantity-wrapper qty-null">
<button type="button" class="qty-minus" data-product-id="<?php echo esc_attr($variation_id); ?>">
<img src="/app/uploads/2025/03/Vector-26.svg" alt="minus-icon">
</button>
<input type="number" name="quantity" value="0" min="0" class="qty qty-main"
data-product-id="<?php echo esc_attr($variation_id); ?>"
data-product-name="<?php echo esc_attr($product->get_name()); ?>"
data-variation-name="<?php echo esc_attr($variationName); ?>">
<button type="button" class="qty-plus" data-product-id="<?php echo esc_attr($variation_id); ?>">
<img src="/app/uploads/2025/03/Vector-12.svg" alt="plus-icon">
</button>
</div>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
<?php else : ?>
<div class="main-div d-flex align-items-center justify-content-between variation-item">
<div class="parent">
<label><?php echo esc_html($child_product->get_name()); ?></label>
<span class="price" data-product-price="<?php echo esc_attr($child_product->get_price()); ?>">
<?php echo $child_product->get_price() ? wc_price($child_product->get_price()) : __('Price not available', 'woocommerce'); ?>
</span>
</div>
<div class="quantity-wrapper qty-null">
<button type="button" class="qty-minus" data-product-id="<?php echo esc_attr($child_product->get_id()); ?>">
<img src="/app/uploads/2025/03/Vector-26.svg" alt="minus-icon">
</button>
<input type="number" name="quantity" value="0" min="0" class="qty qty-main"
data-product-id="<?php echo esc_attr($child_product->get_id()); ?>"
data-product-name="<?php echo esc_attr($child_product->get_name()); ?>">
<button type="button" class="qty-plus" data-product-id="<?php echo esc_attr($child_product->get_id()); ?>">
<img src="/app/uploads/2025/03/Vector-12.svg" alt="plus-icon">
</button>
</div>
</div>
<?php endif; ?>
</div>
<div id="product-popup-<?php echo esc_attr($child_product->get_id()); ?>" data-product-id="<?php echo esc_attr($child_product->get_id()); ?>" class="popup-overlay " style="display: none;">
<div class="popup-content">
<span class="close-popup">×</span>
<?php
$attachment_ids = $child_product->get_gallery_image_ids();
if (!empty($attachment_ids)) :
?>
<div class="product-gallery swiper">
<div class="swiper-wrapper">
<?php
if (has_post_thumbnail($child_product->get_id())) {
$featured_img_url = get_the_post_thumbnail_url($child_product->get_id(), 'full');
echo '<div class="swiper-slide"><img src="' . esc_url($featured_img_url) . '" alt="' . esc_attr($child_product->get_name()) . '"></div>';
}
foreach ($attachment_ids as $attachment_id) {
$image_url = wp_get_attachment_url($attachment_id);
echo '<div class="swiper-slide"><img src="' . esc_url($image_url) . '" alt="' . esc_attr($child_product->get_name()) . '"></div>';
}
?>
</div>
<div class="swiper-pagination"></div>
</div>
<?php endif; ?>
<div class="product-title-wrapper">
<div class="menu-box-right">
<div class="title"><?php echo esc_html($child_product->get_name()); ?></div>
<div class="product-allergens">
<?php
$allergen_terms = get_the_terms($child_product->get_id(), 'allergens');
$product_tags = get_the_terms($child_product->get_id(), 'product_tag');
if (!empty($allergen_terms) && !is_wp_error($allergen_terms)) {
foreach ($allergen_terms as $allergen) :
$icon = get_field('allergen_icon', $allergen);
if ($icon) :
?>
<img src="<?php echo esc_url($icon['url']); ?>" alt="<?php echo esc_attr($allergen->name); ?>" class="allergen-icon">
<?php
endif;
endforeach;
}
if (!empty($product_tags) && !is_wp_error($product_tags)) :
foreach ($product_tags as $tag) :
?>
<span class="product-tag"><?php echo esc_html($tag->name); ?></span>
<?php
endforeach;
endif;
?>
</div>
<?php
$description = $child_product->get_description();
if (!empty($description)) :
?>
<div class="product-description">
<p><?php echo wp_kses_post($description); ?></p>
</div>
<?php endif; ?>
<?php if ($child_product->is_type('variable')) : ?>
<ul>
<?php
$variations = $child_product->get_available_variations();
$attributes = $child_product->get_attributes();
foreach ($attributes as $attribute_name => $attribute) :
$attribute_slug = wc_sanitize_taxonomy_name($attribute_name);
$terms = wc_get_product_terms($child_product->get_id(), $attribute_slug, ['fields' => 'all']);
foreach ($terms as $term) :
$variation_id = '';
$term_price = '';
$data_price = '';
$variationName = '';
foreach ($variations as $variation) {
$variation_data = wc_get_product($variation['variation_id']);
$variation_attributes = $variation['attributes'];
if (isset($variation_attributes["attribute_$attribute_slug"]) && $variation_attributes["attribute_$attribute_slug"] === $term->slug) {
$term_price = wc_price($variation['display_price']);
$data_price = esc_attr($variation['display_price']);
$variation_id = $variation['variation_id'];
$variationName = $child_product->get_name() . ' - ' . esc_html($term->name);
break;
}
}
?>
<div class="main-div d-flex align-items-center justify-content-between variation-item">
<div class="parent">
<label><?php echo esc_html($term->name); ?></label>
<span class="price" data-product-price="<?php echo esc_attr($data_price); ?>">
<?php echo $term_price ? $term_price : __('Price not available', 'woocommerce'); ?>
</span>
</div>
<div class="quantity-wrapper qty-null">
<button type="button" class="qty-minus-single" data-product-id="<?php echo esc_attr($variation_id); ?>">
<img src="/app/uploads/2025/03/Vector-26.svg" alt="minus-icon">
</button>
<input type="number" name="quantity" value="0" min="0" class="qty-single"
data-product-id="<?php echo esc_attr($variation_id); ?>"
data-product-name="<?php echo esc_attr($product->get_name()); ?>"
data-variation-name="<?php echo esc_attr($variationName); ?>">
<button type="button" class="qty-plus-single" data-product-id="<?php echo esc_attr($variation_id); ?>">
<img src="/app/uploads/2025/03/Vector-12.svg" alt="plus-icon">
</button>
</div>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$first = false; // Ensure only the first option is preselected
endif;
endforeach;
?>
</div>
</div>
<?php
endif;
endif;
else :
?>
<p>No add ons found.</p>
<?php endif; ?>
<div class="whatsapp-help-msg">
<img src="/app/uploads/2025/03/Vector-11.svg" alt="help-icon">
<p>Do you need help with your order? Text on Whatsapp at <a href="https://wa.me/971527778787" target="_blank">+971 52 777 8787</a></p>
</div>
</div>
<div class="menu-blocker" style="display: block;"></div>
</div>
<div class="cart-overlay"></div>
<div class="cart-bar-cont">
<div id="vip-cart-bar" class="cart-bar">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<div class="cart-summary d-flex align-items-center">
<img src="/app/uploads/2025/03/Vector-18.svg" alt="image">
<strong><span class="selected-items">Your selection</span></strong>
<span class="dropdown-toggle"></span>
</div>
<div class="cart-total">
<div class="d-flex flex-column total-column">
<span class="subtotal-text">Subtotal (VAT excluded)</span><strong>AED <span id="selected-price" class="cart-total-amount">0.00</span></strong>
</div>
<button class="vip-checkout-btn"> <a href="/cart">Checkout </a></button>
</div>
</div>
<div class="selected-items-dropdown">
<ul class="selected-items-list"></ul>
</div>
</div>
<div class="menu-blocker" style="display: block;"></div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
/*selected products dropdown display*/
document.addEventListener("DOMContentLoaded", function () {
// Open popup when clicking on image or title
document.querySelectorAll(".add-on-card > img, .add-on-card > h3").forEach(function (element) {
element.addEventListener("click", function () {
let productId = this.closest(".add-on-card").querySelector(".popup-overlay").dataset.productId;
document.querySelector("#product-popup-" + productId).style.display = "block";
});
});
// Close popup when clicking on close button
document.querySelectorAll(".close-popup").forEach(function (button) {
button.addEventListener("click", function (e) {
e.stopPropagation();
this.closest(".popup-overlay").style.display = "none";
});
});
// Close popup when clicking outside .popup-content
document.querySelectorAll(".popup-overlay").forEach(function (overlay) {
overlay.addEventListener("click", function (e) {
if (e.target === this) { // Check if the clicked element is the overlay itself
this.style.display = "none";
}
});
});
let dropdownToggle = document.querySelector(".dropdown-toggle");
let cartBar = document.querySelector(".cart-bar");
let dropdown = document.querySelector(".selected-items-dropdown");
let overlay = document.querySelector(".cart-overlay");
let selectedItemsList = document.querySelector(".selected-items-list");
let body = document.body;
function updateOverlayVisibility() {
if (!selectedItemsList || selectedItemsList.children.length === 0) {
cartBar.classList.remove("show");
}
if (cartBar.classList.contains("show") && window.getComputedStyle(cartBar).opacity === "1") {
overlay.classList.add("active");
overlay.style.opacity = "1";
overlay.style.visibility = "visible";
// Stop body scroll only if static-cart is NOT present
/* if (!cartBar.classList.contains("static-cart")) {
body.style.overflow = "hidden";
} else {
body.style.overflow = ""; // Allow scroll if static-cart is present
} */
} else {
overlay.classList.remove("active");
overlay.style.opacity = "0";
overlay.style.visibility = "hidden";
//body.style.overflow = ""; // Restore scrolling
}
}
dropdownToggle.addEventListener("click", function (event) {
event.stopPropagation();
cartBar.classList.toggle("show");
dropdown.style.maxHeight = cartBar.classList.contains("show") ? dropdown.scrollHeight + "px" : "0px";
updateOverlayVisibility();
});
overlay.addEventListener("click", function () {
cartBar.classList.remove("show");
dropdown.style.maxHeight = "0px";
updateOverlayVisibility();
});
document.addEventListener("click", function (event) {
if (!cartBar.contains(event.target) && !dropdownToggle.contains(event.target)) {
cartBar.classList.remove("show");
dropdown.style.maxHeight = "0px";
updateOverlayVisibility();
}
});
dropdown.addEventListener("click", function (event) {
if (event.target.closest("button")) {
event.stopPropagation();
}
});
window.addEventListener("scroll", updateOverlayVisibility);
if (selectedItemsList) {
let observer = new MutationObserver(() => {
updateOverlayVisibility();
});
observer.observe(selectedItemsList, {childList: true});
}
});
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".auto-update-radio").forEach(function (radio) {
radio.addEventListener("change", function () {
// Automatically submit when a radio button is selected
this.closest("form").submit();
});
});
});
jQuery(document).ready(function ($) {
function updateCartSelection(radioButton) {
var selectedOption = $(radioButton).val();
var productID = $(radioButton).closest('.catering-services-section').data('product-id');
var fieldType = $(radioButton).closest('.catering-services-section').attr('id'); // 'rice' or 'services'
var serviceName = '';
// If service, extract service name
if (fieldType === 'services') {
serviceName = $(radioButton).attr('name').replace('variation_service_', '');
}
$.ajax({
type: 'POST',
url: ajax_obj.ajaxurl, // WordPress AJAX URL
data: {
action: 'update_cart_custom_selection',
selected_option: selectedOption,
product_id: productID,
field_type: fieldType,
service_name: serviceName
},
success: function (response) {
if (response.success) {
console.log('Updated in cart: ' + selectedOption);
$('body').trigger('update_cart'); // Refresh WooCommerce cart
} else {
console.log('Error: ' + response.data);
}
}
});
}
// Auto-select first radio on page load
function autoSelectFirstRadio(section) {
var firstRadio = $(section).find('input[type="radio"]:first');
firstRadio.prop('checked', true);
}
// Auto-select first radio buttons
autoSelectFirstRadio('#rice');
$('#services .service-variation-form').each(function () {
autoSelectFirstRadio(this);
});
// Handle manual selection changes
// $('.rice-variation-radio, .variation-radio').on('change', function() {
// autoAddToCart();
// });
});
jQuery(document).ready(function ($) {
// Cache elements
const $orderDate = $("#order_date");
const $timeSelector = $("#time-selector");
const $timePopup = $("#time-popup");
const $selectedTimeText = $("#selected-time-text");
const $orderTimeInput = $("#order_time");
localStorage.removeItem("selected_order_time");
localStorage.removeItem("selected_order_date");
// Initialize date picker with minimum date (24 hours from now)
function getMinDateTime() {
let now = new Date();
now.setHours(now.getHours() + 24);
return now.toISOString().slice(0, 16);
}
$orderDate.flatpickr({
altInput: true,
altInputClass: "flatalt-inp order-inp",
altFormat: "d/m/Y",
dateFormat: "Y-m-dT00:00",
minDate: getMinDateTime()
});
// Load saved selections
function loadSavedSelections() {
const savedDate = localStorage.getItem("selected_order_date");
const savedTime = localStorage.getItem("selected_order_time");
if (savedDate) {
$orderDate.val(savedDate).trigger("change");
}
if (savedTime) {
$orderTimeInput.val(savedTime);
$selectedTimeText.text(savedTime);
}
}
// Date change handler
$orderDate.on("change keyup", function () {
const selectedDate = $(this).val();
localStorage.setItem("selected_order_date", selectedDate);
$.ajax({
type: "POST",
url: "<?php echo admin_url('admin-ajax.php'); ?>",
data: {
action: "store_selected_date",
order_date: selectedDate
},
success: function (response) {
/* $("div#vip-page-content").css({
pointerEvents: "auto",
opacity: 1
}); */
console.log("Stored Order Date:", response.data);
},
error: function (xhr, status, error) {
console.error("AJAX Error:", error);
alert("Failed to save date selection. Please try again.");
}
});
});
// Show/Hide Time Popup
$timeSelector.on("click", function (event) {
$timePopup.toggle();
event.stopPropagation();
});
$(document).on("click", function (event) {
if (!$timePopup.is(event.target) && $timePopup.has(event.target).length === 0) {
$timePopup.hide();
}
});
// Time Selection
let selectedHour = "";
let selectedMinute = "";
let selectedAMPM = "";
function updateTimeDisplay() {
if (selectedHour && selectedMinute && selectedAMPM) {
let finalTime = `${selectedHour}:${selectedMinute} ${selectedAMPM}`;
$selectedTimeText.text(finalTime);
$orderTimeInput.val(finalTime).trigger("change");
$timePopup.removeClass("active");
}
}
function checkAndClosePopup() {
if (selectedHour && selectedMinute && selectedAMPM) {
$timePopup.hide();
}
}
$("#hour-list li").on("click", function () {
selectedHour = $(this).data("value");
$("#hour-list li").removeClass("selected");
$(this).addClass("selected");
updateTimeDisplay();
checkAndClosePopup();
});
$("#minute-list li").on("click", function () {
selectedMinute = $(this).data("value");
$("#minute-list li").removeClass("selected");
$(this).addClass("selected");
updateTimeDisplay();
checkAndClosePopup();
});
$("#ampm-list li").on("click", function () {
selectedAMPM = $(this).data("value");
$("#ampm-list li").removeClass("selected");
$(this).addClass("selected");
updateTimeDisplay();
checkAndClosePopup();
});
// Time change handler
$orderTimeInput.on("change", function () {
const selectedTime = $(this).val();
localStorage.setItem("selected_order_time", selectedTime);
$.ajax({
type: "POST",
url: "<?php echo admin_url('admin-ajax.php'); ?>",
data: {
action: "store_selected_time",
order_time: selectedTime
},
success: function (response) {
console.log("Stored Order Time:", response.data);
},
error: function (xhr, status, error) {
console.error("AJAX Error:", error);
}
});
});
// Initialize
loadSavedSelections();
(function ($) {
function isDateTimeSelected() {
const date = $('#order_date').val();
const time = $('#order_time').val();
return date !== '' && time !== '';
}
function highlightMissingInputs() {
if (!$('#order_date').val()) {
$('.order-date-input-wrap').addClass('missing-input');
}
if (!$('#order_time').val()) {
$('.custom-time-picker').addClass('missing-input');
}
}
function scrollToDateTimeSection() {
$('html, body').animate({
scrollTop: $('#order-date-time-wrapper').offset().top - 150
}, 500);
}
function temporarilyShowOverlayMessage() {
$('#overlayMessage').fadeIn();
setTimeout(function () {
$('#overlayMessage').fadeOut();
}, 3500);
}
function enableMenuInteractionIfValid() {
if (isDateTimeSelected()) {
$('.menu-blocker').hide(); // hide all blockers
$('.order-date-input-wrap, .custom-time-picker').removeClass('missing-input');
$('#overlayMessage').fadeOut();
}
}
// Works for ALL blockers
$('.menu-blocker').on('click', function (e) {
e.preventDefault();
highlightMissingInputs();
scrollToDateTimeSection();
temporarilyShowOverlayMessage();
});
$('#order_date').on('change', function () {
if ($(this).val()) {
$('.order-date-input-wrap').removeClass('missing-input');
}
enableMenuInteractionIfValid();
});
$('#order_time').on('change', function () {
if ($(this).val()) {
$('.custom-time-picker').removeClass('missing-input');
}
enableMenuInteractionIfValid();
});
})(jQuery);
});
jQuery(document).ready(function ($) {
$(".attribute-group").each(function () {
// Find the first radio button in the group and check it
// $(".attribute-group:first").find(".variation-radio-input:first").prop("checked", true).trigger("change");
});
function updateQuantityUI(input) {
let newQuantity = parseInt($(input).val()) || 0; // Get the updated value
let elementWrapper = $(input).closest(".quantity-wrapper"); // Find closest wrapper
if (elementWrapper.length) {
elementWrapper.toggleClass("qty-null", newQuantity === 0);
}
// Toggle trash-logo class
let minusButton = elementWrapper.find(".qty-minus-single");
if (minusButton.length) {
minusButton.toggleClass("trash-logo", newQuantity === 1);
}
}
// Run this function on page load for each input
$(".qty-single").each(function () {
updateQuantityUI(this); // Ensure correct classes before any interaction
$(this).on("change", function () { // Change 'input' to 'change'
updateQuantityUI(this);
});
});
// Quantity increase inside popup
$(".qty-plus-single").on("click", function (e) {
e.stopPropagation();
let wrapper = $(this).closest(".quantity-wrapper");
let input = wrapper.find(".qty-single");
input.val(parseInt(input.val()) + 1);
$(`input[data-product-id="${input.data('productId')}"]`).each(function () {
$(this).val(input.val());
updateQuantityUI(this);
$(this).trigger("change"); // Trigger 'change' event
});
});
// Quantity decrease inside popup
$(".qty-minus-single").on("click", function (e) {
e.stopPropagation();
let wrapper = $(this).closest(".quantity-wrapper");
let input = wrapper.find(".qty-single");
input.val(Math.max(0, parseInt(input.val()) - 1));
$(`input[data-product-id="${input.data('productId')}"]`).each(function () {
$(this).val(input.val());
updateQuantityUI(this);
$(this).trigger("change"); // Trigger 'change' event
});
});
let selectedVariation = null;
// Initial setup
updateCartSummary();
// Handle main variation selection
$(".variation-radio-input").on("change", function () {
let selectedAttributes = {};
$(".variations#main").find(".variation-radio-input:checked").each(function () {
let attrName = $(this).attr("data-attr").replace("attribute_", "");
selectedAttributes[attrName] = $(this).attr("data-attrname");
});
let variations = JSON.parse( $(".variations#main").attr("data-product-variations") );
let matchedVariation = variations.find(function (variation) {
return Object.keys(selectedAttributes).every(function (attr) {
return variation.attributes["attribute_" + attr] === selectedAttributes[attr];
});
});
if(matchedVariation) {
$("input[name='vip_variation_sel']").val(matchedVariation.variation_id);
}
updateCartSummary();
});
$("input[name='vip_variation_main']").on("change", function () {
selectedVariation = $(this).val();
$("input[name='vip_variation_option']").val(selectedVariation);
$( $("input[name='vip_variation_option']")[0] ).prop('checked', true).change();
});
$("input[name='vip_variation_option']").val($("input[name='vip_variation_main']:checked").val());
$("input[name='vip_variation_option']").on('change', function () {
let variation_id = $(this).val(),
name_wrapper_attr = $(this).attr('data-attr'),
name_wrapper_text = $(this).attr('data-label'),
name_wrapper = $('.category-section .item[data-product-id="' + variation_id + '"]');
let cart_name_wrapper_span = name_wrapper.find("#" + name_wrapper_attr),
cart_name_wrapper_exists = name_wrapper.find("#" + name_wrapper_attr).length;
if (cart_name_wrapper_exists) {
cart_name_wrapper_span.text(name_wrapper_text);
} else {
name_wrapper.append(`<span class="${name_wrapper_attr}">${name_wrapper_text}</span>`);
}
});
// Handle Catering Services Included variations
$("input[name^='variation_']").on("change", updateCartSummary);
// Handle The Menu attribute radio buttons
$("input[name^='attribute_']").on("change", updateCartSummary);
// Bind quantity controls
bindEventListeners();
// Checkout button click
$("#vip-checkout-btn").on("click", function (e) {
e.preventDefault();
if (!selectedVariation) {
alert("Please select a main variation.");
return;
}
// Collect all items for checkout
let itemsToAdd = [];
let mainVariation = $("input[name='vip_variation_sel']");
mainVariation = mainVariation.val() == 0 ? $("input[name='vip_variation_main']:checked") : mainVariation;
if (mainVariation.length) {
itemsToAdd.push({
product_id: 463, // Hardcoded product ID from your HTML
variation_id: mainVariation.val(),
quantity: 1
});
}
// Add catering services
$("input[name^='variation_']:checked").each(function () {
itemsToAdd.push({
product_id: $(this).attr("name").replace("variation_", ""),
variation_id: $(this).val(),
quantity: 1
});
});
// Add add-ons
$(".qty-main").each(function () {
let qty = parseInt($(this).val()) || 0;
if (qty > 0) {
itemsToAdd.push({
product_id: $(this).data("product-id"),
variation_id: $(this).val(),
quantity: qty
});
}
});
if (itemsToAdd.length === 0) {
alert("No items selected for checkout.");
return;
}
// Clear cart and redirect
$.post(wc_add_to_cart_params.ajax_url, {action: "clear_cart"}, function (response) {
if (response.success) {
let url = "/checkout/?add-to-cart=463&variation_id=" + selectedVariation;
itemsToAdd.forEach(item => {
if (item.product_id !== 463) { // Avoid duplicating main product
url += `&add-to-cart=${item.product_id}&variation_id=${item.variation_id}&quantity=${item.quantity}`;
}
});
window.location.href = url;
} else {
console.error("Failed to clear cart:", response);
}
});
});
function updateCartSummary() {
let totalAmount = 0;
let totalQuantity = 0;
let selectedItemsMap = new Map();
// Handle main variation
let $selectedVariation = $("input[name='vip_variation_main']:checked");
if ($selectedVariation.length) {
let price = parseFloat($selectedVariation.data("price") || 0);
let label = $selectedVariation.data("label");
totalAmount += price;
totalQuantity += 1;
selectedItemsMap.set($selectedVariation.val(), [{
id: $selectedVariation.val(),
name: `${label}`,
price: price,
quantity: 1,
show_quantity: 0,
section: 'main'
}]);
}
// Handle both Rice and Catering Services variations
$("input[name^='variation_']:checked").each(function () {
let variationId = $(this).val();
const variationName = $(this).closest('label').text().trim();
let $label = $(this).closest("label");
let price = $(this).attr("data-price");
let name = $label.text().trim().split(" - ")[0];
let productId = $(this).attr("name").replace("variation_", "");
// Determine if this is a rice variation or catering service
let section = 'services'; // Default to services
let displayName = variationName;
// Check if this variation is inside the rice section
if ($(this).closest('#rice').length) {
section = 'rice';
// const productName = $(this).closest('.add-on-card').find('h3').text().trim();
displayName = `Local lamb ouzi<br><span class="variation-subtitle">${variationName}</span>`;
} else {
// For catering services
const productName = $(this).closest('.add-on-card').find('h3').text().trim();
displayName = `${productName}<br><span class="variation-subtitle">${variationName}</span>`;
}
totalAmount += parseFloat(price);
totalQuantity += 1;
if (!selectedItemsMap.has(variationId)) {
selectedItemsMap.set(variationId, []);
}
selectedItemsMap.get(variationId).push({
id: variationId,
name: displayName,
price: parseFloat(price),
quantity: 1,
show_quantity: 0,
section: section
});
});
// // Handle The Menu attribute radio buttons
// // Handle The Menu attribute radio buttons (Including "Rice Type")
// $("input[name^='attribute_']:checked").each(function () {
// let attributeValue = $(this).val(); // Example: "Basmati"
// let $label = $(this).closest("label");
// let name = $label.text().trim(); // Example: "Basmati Rice"
// let price = parseFloat($(this).data("price") || 0); // Ensure price is fetched
//
// let attrMatch = $(this).attr("name").match(/attribute_(.*?)_(\d+)/);
// if (attrMatch) {
// let attributeName = attrMatch[1]; // Example: "rice_type"
// let childId = attrMatch[2]; // Example: "123"
// let displayName = `${attributeName}: ${name}`; // Example: "rice_type: Basmati"
//
// totalQuantity += 1;
//
// let uniqueId = `${childId}_${attributeValue}`;
//
// if (!selectedItemsMap.has(uniqueId)) {
// selectedItemsMap.set(uniqueId, []);
// }
// selectedItemsMap.get(uniqueId).push({
// id: uniqueId,
// name: `${displayName}`,
// price: price,
// quantity: 1,
// show_quantity: 0
//
// });
// }
// });
// Handle add-ons
$(".qty").each(function () {
let quantity = Math.max(parseInt($(this).val()) || 0, 0);
let $quantityWrapper = $(this).closest(".quantity-wrapper");
let $minusButton = $quantityWrapper.find(".qty-minus");
if (quantity > 0) {
let productId = $(this).data("product-id");
let productName = $(this).data("product-name");
let variationName = $(this).data("variation-name") || "";
let $priceElem = $(this).closest(".variation-item").find(".price");
let price = parseFloat($priceElem.data("product-price") || 0);
if (!productId || !productName)
return;
totalAmount += quantity * price;
totalQuantity += quantity;
// Determine section based on where the element is located
let section = 'addons';
if ($(this).closest('#main').length) {
section = 'main';
} else if ($(this).closest('#rice').length) {
section = 'rice';
} else if ($(this).closest('#services').length) {
section = 'services';
}
let productDisplay = variationName
? `<strong>${variationName}</strong>`
: `<strong>${productName}</strong>`;
if (!selectedItemsMap.has(productId)) {
selectedItemsMap.set(productId, []);
}
selectedItemsMap.get(productId).push({
id: productId,
name: productDisplay,
price: price,
quantity: quantity,
show_quantity: quantity > 0, // Show quantity if more than 1
section: section
});
$minusButton.toggleClass("trash-logo", quantity === 1);
$quantityWrapper.removeClass("qty-null");
// Update the popup quantity for the same product
$(`input[data-product-id="${productId}"]`).each(function () {
$(this).trigger("change"); // Trigger 'change' event in the popup as well
});
} else {
$quantityWrapper.addClass("qty-null");
}
});
// Update cart bar
$("#selected-option").text(`Your Selection: ${totalQuantity} item${totalQuantity === 1 ? "" : "s"}`);
// $("#selected-price").text(`AED ${totalAmount.toFixed(2)}`);
updateSelectedItemsDropdown(selectedItemsMap);
syncSelectedAttributeCounts();
autoAddToCart();
}
function syncSelectedAttributeCounts() {
$("[data-attr-count]").each(function () {
let attrName = $(this).attr("data-attr-count");
let count = $(`.variation-item[data-variation-attribute='${attrName}'] .qty`)
.get()
.reduce((sum, input) => sum + (parseInt($(input).val()) || 0), 0);
$(this).text(count);
$(this).toggleClass("d-none", count === 0);
let $trashBtn = $(this).closest(".d-flex").find(".trash-variation");
$trashBtn.toggleClass("trash-logo", count === 1);
$trashBtn.toggleClass("d-none", count === 0);
});
}
function updateTotalPrice(selectedItemsMap) {
let total = 0;
let itemCount = 0;
selectedItemsMap.forEach(items => {
items.forEach(item => {
total += item.price * item.quantity;
itemCount += item.quantity;
});
});
$("#selected-price").text(total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
$(".selected-items").text(`Your selection`);
}
function updateSelectedItemsDropdown(selectedItemsMap) {
let $selectedItemsList = $(".selected-items-list");
$selectedItemsList.empty(); // Clear existing items
// Section configuration in display order
const sections = [
{
id: 'main',
title: 'Standard Menu',
filter: item => item.section === 'main' || item.name.includes('Main Package')
},
{
id: 'rice',
title: 'Emirati Dishes',
filter: item => item.section === 'rice' || item.name.includes('Emirati Dishes')
},
{
id: 'services',
title: 'Catering services included',
filter: item => item.section === 'services' ||
(item.name.includes('Catering Service') && !item.name.includes('Emirati Dishes'))
},
{
id: 'addons',
title: 'Add-ons',
filter: item => item.section === 'addons' ||
(!item.name.includes('Main Package') &&
!item.name.includes('Emirati Dishes') &&
!item.name.includes('Catering Service'))
}
];
// Create all sections first
sections.forEach(section => {
$selectedItemsList.append(`
<div class="category-section" data-section="${section.id}">
<h4 class="section-title">${section.title}</h4>
<ul class="section-items"></ul>
</div>
`);
});
// Group items by section
const itemsBySection = {};
selectedItemsMap.forEach(items => {
items.forEach(item => {
// Find the matching section
const matchedSection = sections.find(section => section.filter(item));
const sectionId = matchedSection?.id || 'addons';
if (!itemsBySection[sectionId]) {
itemsBySection[sectionId] = [];
}
itemsBySection[sectionId].push(item);
});
});
// Populate each section
Object.entries(itemsBySection).forEach(([sectionId, items]) => {
const $section = $(`.category-section[data-section="${sectionId}"] .section-items`);
items.forEach(item => {
const $itemLi = $("<li>").addClass("item").attr("data-product-id", item.id);
let dataProductId = '';
if( sectionId === 'main' ){
dataProductId = $("input[name='vip_variation_sel']").val();
}else{
dataProductId = item.id;
}
if (item.show_quantity) {
$itemLi.html(`
<div class='d-flex justify-content-between align-items-start'>
<span class='item-name'>${item.name}</span>
<div class="d-flex">
<button class='edit-item me-2' data-product-id='${item.id}'>
<img src='/app/uploads/2025/03/Vector-31.svg' alt='Edit'>
</button>
<button class='delete-item' data-product-id='${item.id}'>
<img src='/app/uploads/2025/03/Vector-27.svg' alt='Remove'>
</button>
</div>
</div>
<div class='d-flex align-items-end justify-content-between'>
<div class='quantity-wrapper'>
<button type='button' class='qty-minus' data-product-id='${item.id}'><img src="/app/uploads/2025/03/Vector-26.svg" alt="minus-icon"></button>
<input type='number' class='qty' value='${item.quantity}' min='0' data-product-id='${item.id}'>
<button type='button' class='qty-plus' data-product-id='${item.id}'><img src="/app/uploads/2025/03/Vector-12.svg" alt="plus-icon"></button>
</div>
<span class='item-price'>AED ${(item.price * item.quantity).toFixed(2)}</span>
</div>
`);
} else {
$itemLi.html(`
<div class='d-flex justify-content-between align-items-center'>
<span class='item-name'>${item.name}</span>
<div class="d-flex">
<button class='edit-item me-2' data-product-id='${item.id}'>
<img src='/app/uploads/2025/03/Vector-31.svg' alt='Edit'>
</button>
<button class='delete-item' data-product-id='${item.id}'>
<img src='/app/uploads/2025/03/Vector-27.svg' alt='Remove'>
</button>
</div>
</div>
<div class='d-flex align-items-center justify-content-between d-none'>
<input type='hidden' class='qty qty-main' value='${item.quantity}' min='0' data-product-id='${dataProductId}'>
</div>
`);
}
$section.append($itemLi);
});
});
// Remove empty sections
$('.category-section').each(function () {
if ($(this).find('.section-items li').length === 0) {
$(this).remove();
}
});
updateTotalPrice(selectedItemsMap);
bindEventListeners();
}
function bindEventListeners() {
$(".qty-minus, .qty-plus").off("click").on("click", function () {
let $input = $(this).closest(".quantity-wrapper").find(".qty");
let quantity = Math.max(parseInt($input.val()) || 0, 0);
quantity += $(this).hasClass("qty-minus") ? -1 : 1;
$input.val(Math.max(quantity, 0));
$input.trigger('input');
});
$(".qty").off("input").on("input", function () {
let quantity = Math.max(parseInt($(this).val()) || 0, 0);
let productId = $(this).data("product-id");
let $quantityId = $(".popup-overlay input[data-product-id='" + productId + "']");
console.log($quantityId);
$quantityId.val(quantity);
$(this).val(quantity);
syncQuantities($(this).data("product-id"), quantity);
});
$(".delete-item").off("click").on("click", function () {
$(`.qty[data-product-id='${$(this).data("product-id")}']`).val(0);
updateCartSummary();
});
}
function syncQuantities(productId, quantity) {
$(`.qty[data-product-id='${productId}']`).val(quantity);
updateCartSummary();
}
});
function autoAddToCart() {
let allQuantities = document.querySelectorAll(".qty-main");
let itemsToAdd = [];
let itemsToRemove = [];
let includedSelections = [];
let allIncludedOptions = document.querySelectorAll(".items-included input[type='radio']:checked");
allIncludedOptions.forEach(elem => {
includedSelections.push({
'section_id': elem.closest('.items-included').getAttribute('id'),
'section_title': elem.closest('.items-included').querySelector("h2").textContent,
'value': elem.value
});
});
allQuantities.forEach(qty => {
let productId = qty.dataset.productId;
let quantity = parseInt(qty.value, 10);
let variationName = qty.dataset.variationName ?? "";
if (quantity > 0) {
itemsToAdd.push({
product_id: productId,
quantity: quantity,
variation_name: variationName
});
} else {
itemsToRemove.push(productId); // Track products that need to be removed
}
});
if (itemsToAdd.length === 0 && itemsToRemove.length === 0) {
console.log("No products selected.");
return;
}
let initialCartCount = <?php echo WC()->cart->get_cart_contents_count(); ?>; // Get cart count before AJAX call
// Show loader Here
fetch("<?php echo esc_url(admin_url('admin-ajax.php')); ?>", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({
action: "add_all_to_cart",
items: JSON.stringify(itemsToAdd),
included_options: JSON.stringify(includedSelections),
remove_items: JSON.stringify(itemsToRemove) // Send items to be removed
})
})
.then(response => response.json())
.then(data => {
console.log("AJAX Response:", data);
if (data.message) {
console.log("Cart Updated: " + data.message);
}
updateCartDisplay(); // Refresh cart count and total
})
.catch(error => {
console.error("AJAX Error:", error);
});
}
</script>
<script>
jQuery(document).ready(function ($) {
jQuery('.masonry-layout').masonry({
itemSelector: '.masonry-card',
columnWidth: '.masonry-card',
percentPosition: true
});
});
jQuery(document).ready(function ($) {
if ($(".product-gallery").length) {
new Swiper(".product-gallery", {
slidesPerView: 1,
spaceBetween: 10,
loop: true,
pagination: {
el: ".product-gallery .swiper-pagination",
clickable: true
}
});
}
});
document.addEventListener("DOMContentLoaded", function () {
const cartBar = document.querySelector(".cart-bar");
const tabsSection = document.querySelector("#vip-page-content");
const footer = document.querySelector(".custom-footer");
let hasAppeared = false;
let lastScrollY = window.scrollY;
function toggleCartBar() {
const tabsRect = tabsSection.getBoundingClientRect();
const footerRect = footer.getBoundingClientRect();
const windowHeight = window.innerHeight;
const currentScrollY = window.scrollY;
const isTabsEnteringView = tabsRect.top <= windowHeight && tabsRect.bottom >= 0;
const isFooterVisible = footerRect.top <= windowHeight;
const isTabsFullyOutOfView = tabsRect.bottom < 0 || tabsRect.top > windowHeight;
const isScrollingUp = currentScrollY < lastScrollY;
if (isTabsEnteringView) {
cartBar.style.transform = "translateY(0)";
cartBar.style.opacity = "1";
hasAppeared = true;
}
if (isScrollingUp && isTabsFullyOutOfView && !cartBar.classList.contains("static-cart")) {
cartBar.style.transform = "translateY(100%)";
cartBar.style.opacity = "0";
hasAppeared = false;
}
if (isFooterVisible) {
cartBar.classList.add("static-cart");
} else {
cartBar.classList.remove("static-cart");
}
lastScrollY = currentScrollY;
}
window.addEventListener("scroll", toggleCartBar);
toggleCartBar();
});
const vipCartBar = document.getElementById('vip-cart-bar');
const cartOverlay = document.querySelector('.cart-overlay');
function toggleCartOverlay() {
if (vipCartBar.classList.contains('static-cart')) {
cartOverlay.style.display = 'none';
} else {
cartOverlay.style.display = '';
}
}
toggleCartOverlay();
const observer = new MutationObserver(toggleCartOverlay);
observer.observe(vipCartBar, { attributes: true, attributeFilter: ['class'] });
document.addEventListener("DOMContentLoaded", function () {
const cartBar = document.getElementById("vip-cart-bar");
const cartBarCont = document.querySelector(".cart-bar-cont");
if (cartBar && cartBarCont) {
const updateHeight = () => {
const height = cartBar.offsetHeight;
cartBarCont.style.height = height + "px";
};
updateHeight();
const observer = new ResizeObserver(updateHeight);
observer.observe(cartBar);
window.addEventListener("scroll", updateHeight);
}
});
</script>
<?php get_footer(); ?>