FileMaster

Edit File: mobile-cart.js

/**
 *
 * Handle Mobile Cart events.
 *
 * @since 3.1.0
 * @package Astra
 */

(function () {

var cart_flyout = document.getElementById('astra-mobile-cart-drawer'),
		main_header_masthead = document.getElementById('masthead'),
		responsive_cart_click = astra_cart.responsive_cart_click;
	
	// Variable to store the element that opened the cart
	var lastFocusedElement = null;
	
	// Return if masthead not exixts.
	if (!main_header_masthead) {
		return;
	}

var woo_data = '',
		mobileHeader = main_header_masthead.querySelector("#ast-mobile-header"),
		edd_data = '';

if (undefined !== cart_flyout && '' !== cart_flyout && null !== cart_flyout) {
		woo_data = cart_flyout.querySelector('.widget_shopping_cart.woocommerce');
		edd_data = cart_flyout.querySelector('.widget_edd_cart_widget');
	}

/**
	 * Manages focus for accessibility
	 */
	const focusManager = {
		/**
		 * Moves focus to the close button
		 */
		moveToCloseButton: function() {
			var closeButton = document.querySelector('.astra-cart-drawer-close');
			if (closeButton) {
				closeButton.focus();
			}
		},
		
		/**
		 * Returns focus to the triggering element
		 */
		returnToTrigger: function() {
			if (lastFocusedElement) {
				lastFocusedElement.focus();
			} else {
				// Fallback if we don't have the original element - try multiple selectors
				var cartIcon = document.querySelector('.ast-header-woo-cart .ast-site-header-cart .ast-site-header-cart-li a.cart-container');
				if (!cartIcon) {
					cartIcon = document.querySelector('.ast-site-header-cart-li a');
				}
				if (!cartIcon) {
					cartIcon = document.querySelector('.ast-header-woo-cart a');
				}
				if (cartIcon) {
					cartIcon.focus();
				}
			}
		},
		
		/**
		 * Sets up a focus trap within the cart flyout
		 */
		setupFocusTrap: function() {
			if (!cart_flyout) return;
			
			// Remove any existing event listeners first
			document.removeEventListener('keydown', this.trapTabKey);
			
			// Add the event listener for tab key
			document.addEventListener('keydown', this.trapTabKey);
		},
		
		/**
		 * Traps the tab key within the cart flyout
		 */
		trapTabKey: function(e) {
			// Only run if cart flyout is active and tab key is pressed
			if (!cart_flyout.classList.contains('active') || e.key !== 'Tab') {
				return;
			}
			
			// Get all focusable elements inside the flyout
			var focusableElements = cart_flyout.querySelectorAll(
				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
			);
			
			// Filter out hidden elements
			focusableElements = Array.prototype.filter.call(focusableElements, function(element) {
				return element.offsetWidth > 0 && element.offsetHeight > 0 && window.getComputedStyle(element).visibility !== 'hidden';
			});
			
			if (focusableElements.length === 0) return;
			
			var firstElement = focusableElements[0];
			var lastElement = focusableElements[focusableElements.length - 1];
			
			// If shift+tab on first element, go to last element
			if (e.shiftKey && document.activeElement === firstElement) {
				e.preventDefault();
				lastElement.focus();
			} 
			// If tab on last element, go to first element
			else if (!e.shiftKey && document.activeElement === lastElement) {
				e.preventDefault();
				firstElement.focus();
			}
		}
	};

/**
	 * Opens the Cart Flyout.
	 */
	cartFlyoutOpen = function (event) {
		// Store the element that opened the cart for returning focus later
		lastFocusedElement = event.currentTarget.querySelector('a.cart-container') || event.currentTarget;

// Check if responsive_cart_click is "redirect" and body has class "ast-header-break-point"
		if ((responsive_cart_click === 'redirect' && document.body.classList.contains('ast-header-break-point')) ) {
			return;
		}

event.preventDefault();
		var current_cart = event.currentTarget.cart_type;

if ('woocommerce' === current_cart && document.body.classList.contains('woocommerce-cart')) {
			return;
		}
		cart_flyout.classList.remove('active');
		cart_flyout.classList.remove('woocommerce-active');
		cart_flyout.classList.remove('edd-active');
		if (undefined !== cart_flyout && '' !== cart_flyout && null !== cart_flyout) {
			cart_flyout.classList.add('active');
			document.documentElement.classList.add('ast-mobile-cart-active');
			if (undefined !== edd_data && '' !== edd_data && null !== edd_data) {
				edd_data.style.display = 'block';
				if ('woocommerce' === current_cart) {
					edd_data.style.display = 'none';
					cart_flyout.classList.add('woocommerce-active');
				}
			}
			if (undefined !== woo_data && '' !== woo_data && null !== woo_data) {
				woo_data.style.display = 'block';
				if ('edd' === current_cart) {
					woo_data.style.display = 'none';
					cart_flyout.classList.add('edd-active');
				}
			}
		}

/**
	 * Closes the Cart Flyout.
	 */
	cartFlyoutClose = function (event) {
		event.preventDefault();
		if (undefined !== cart_flyout && '' !== cart_flyout && null !== cart_flyout) {
			cart_flyout.classList.remove('active');
			document.documentElement.classList.remove('ast-mobile-cart-active');
		}
		
		// Return focus to the element that opened the cart
		setTimeout(function() {
			focusManager.returnToTrigger();
		}, 100);
	}

/**
	 * Main Init Function.
	 */
	function cartInit() {
		// Close Popup if esc is pressed.
		document.addEventListener('keyup', function (event) {
			// 27 is keymap for esc key.
			if (event.keyCode === 27) {
				event.preventDefault();
				cart_flyout.classList.remove('active');
				document.documentElement.classList.remove('ast-mobile-cart-active');
				updateTrigger();
				
				// Return focus to the element that opened the cart
				setTimeout(function() {
					focusManager.returnToTrigger();
				}, 100);
			}
		});

// Close Popup on outside click.
		document.addEventListener('click', function (event) {
			var target = event.target;
			var cart_modal = document.querySelector('.ast-mobile-cart-active .astra-mobile-cart-overlay');

if (target === cart_modal) {
				cart_flyout.classList.remove('active');
				document.documentElement.classList.remove('ast-mobile-cart-active');
				
				// Return focus to the element that opened the cart
				setTimeout(function() {
					focusManager.returnToTrigger();
				}, 100);
			}
		});

if (undefined !== mobileHeader && '' !== mobileHeader && null !== mobileHeader) {

// Mobile Header Cart Flyout.
			if( 'flyout' == astra_cart.desktop_layout ) {
				var woo_carts = document.querySelectorAll('.ast-mobile-header-wrap .ast-header-woo-cart, #ast-desktop-header .ast-desktop-cart-flyout');
			} else {
				var woo_carts = document.querySelectorAll('.ast-mobile-header-wrap .ast-header-woo-cart');
			}
			var edd_cart = document.querySelector('.ast-mobile-header-wrap .ast-header-edd-cart');
			var cart_close = document.querySelector('.astra-cart-drawer-close');

if( 0 < woo_carts.length ){
				woo_carts.forEach(function callbackFn(woo_cart) {
					if (undefined !== woo_cart && '' !== woo_cart && null !== woo_cart && cart_flyout) {
						woo_cart.addEventListener("click", cartFlyoutOpen, false);
						woo_cart.cart_type = 'woocommerce';
					}
				})
			}
			if (undefined !== edd_cart && '' !== edd_cart && null !== edd_cart && cart_flyout) {
				edd_cart.addEventListener("click", cartFlyoutOpen, false);
				edd_cart.cart_type = 'edd';
			}
			if (undefined !== cart_close && '' !== cart_close && null !== cart_close) {
				cart_close.addEventListener("click", cartFlyoutClose, false);
			}
		}

// Add keyboard event listeners to cart icons for accessibility
		var cartIcons = document.querySelectorAll('.ast-site-header-cart .ast-site-header-cart-li a');
		if (cartIcons.length > 0) {
			cartIcons.forEach(function(cartIcon) {
				cartIcon.addEventListener('keydown', function(e) {
					if (e.key === 'Enter' || e.keyCode === 13) {
						e.preventDefault();
						// Store this element as the last focused element
						lastFocusedElement = cartIcon;
						cartIcon.click();
					}
				});
			});
		}
	}

// Slide in cart 'astra_woo_slide_in_cart' PRO shortcode compatibility.
	if(document.querySelector('.ast-slidein-cart')){
		document.querySelector('.ast-slidein-cart').addEventListener('click', (e)=> {
			// Store this element as the last focused element
			lastFocusedElement = e.currentTarget;
			
			document.querySelector('#astra-mobile-cart-drawer').classList.add('active');
			document.querySelector('html').classList.add('ast-mobile-cart-active');
			e.preventDefault();
			
			// Accessibility improvement: Move focus to close button
			setTimeout(function() {
				focusManager.moveToCloseButton();
				focusManager.setupFocusTrap();
			}, 100);
		});		
	}
	
	// Get the screen inner width.
	var screenInnerWidth = window.innerWidth;

window.addEventListener('load', function () {
		cartInit();
	});
	document.addEventListener('astLayoutWidthChanged', function () {
		cartInit();
	});

document.addEventListener('astPartialContentRendered', function () {
		cartInit();
	});

let initialWidth = window.innerWidth; // Store the initial device width.

var layoutChangeDelay;
	window.addEventListener('resize', function () {
		let newWidth = window.innerWidth; // Get the device width after resize.

clearTimeout(layoutChangeDelay);
		layoutChangeDelay = setTimeout(function () {
			cartInit();
			// Dispatch 'astLayoutWidthChanged' event only if the width has changed.
			// This prevents input elements from losing focus unnecessarily.
			if ( initialWidth !== newWidth ) {
				document.dispatchEvent(new CustomEvent("astLayoutWidthChanged", {"detail": {'response': ''}}));
			}

// Update the initial width to the new width after resizing completes.
			initialWidth = newWidth;
		}, 50);
	});

// Using jQuery here because WooCommerce and the variation swatches plugin rely on jQuery for AJAX handling and DOM updates.
	jQuery(document).ready(function ($) {
		// Check if WooCommerce parameters are available before proceeding.
		if (typeof wc_add_to_cart_params === 'undefined') {
			return;
		}

// Listening for WooCommerce's default 'added_to_cart' and 'astra_refresh_cart_fragments' both events.
		$(document.body).on('added_to_cart astra_refresh_cart_fragments', function (event, fragments, cart_hash) {
			// Refreshing WooCommerce cart fragments.
			$.get(wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_refreshed_fragments'), function (data) {
				if (data && data.fragments) {
					$.each(data.fragments, function (key, value) {
						$(key).replaceWith(value);
					});
				}
			});
		});

// Triggering the 'astra_refresh_cart_fragments' event to refresh the cart fragments on page load.
		$(document.body).trigger('astra_refresh_cart_fragments');
	});

})();

Back