Mini Wishlist Widget - Implementation Details ============================================== Overview -------- The mini wishlist widget (.bizzwishlist-mini-widget) has been refactored to use a WooCommerce fragment-like approach for loading content via JavaScript/AJAX as JSON. This ensures faster page loads and allows the widget to work on all pages. Changes Made ------------ 1. NEW FILE: assets/js/common.js - Contains all mini wishlist widget JavaScript code - Loaded on ALL pages (not just WooCommerce pages) - Code only executes when .bizzwishlist-mini-widget is present on the page - Implements fragment-like loading: * On page load, checks sessionStorage for cached widget data * If cached data exists, renders it immediately (instant display) * Makes AJAX call to fetch fresh data from server as JSON * Updates the widget with fresh data and caches in sessionStorage * When wishlist changes, refreshes the fragment automatically - Handles mini widget events: toggle, remove item, add to cart - Listens for 'bizzwishlist_changed' custom jQuery event to refresh 2. NEW FILE: assets/css/common.css - Contains all mini wishlist widget CSS styles - Loaded on ALL pages - Styles extracted from assets/css/wishlist.css 3. MODIFIED: includes/Frontend/Assets.php - Added new method: enqueue_common() - This method enqueues common.css and common.js on ALL pages - Localizes bizzwishlist_common_params with AJAX URL, nonce, and i18n strings - Original enqueue() method unchanged (still loads wishlist.js/css on WooCommerce pages) 4. MODIFIED: includes/Frontend/MiniWishlist.php - render_widget() now renders a lightweight placeholder/shell instead of full content - Only outputs the widget structure with count, toggle bar, and a "Loading..." placeholder - Actual items are loaded via JavaScript (common.js) using AJAX JSON response - This reduces server-side processing and initial page load time 5. MODIFIED: includes/Ajax/WishlistAjax.php - Added new method: get_mini_fragment() - Returns wishlist items and count as JSON data - Used by common.js to populate the mini widget via AJAX 6. MODIFIED: includes/Plugin.php - Added wp_enqueue_scripts hook for Assets::enqueue_common() - Registered new AJAX actions: bizzwishlist_get_mini_fragment (both logged-in and guest) 7. MODIFIED: assets/js/wishlist.js - Removed mini widget event handlers (toggle, remove, add-to-cart) - moved to common.js - Removed refreshMiniWishlist() AJAX implementation - refreshMiniWishlist() now triggers 'bizzwishlist_changed' jQuery event - common.js listens for this event and handles the actual refresh - Removed .bizzwishlist-mini-add-to-cart from the click handler selector 8. MODIFIED: assets/css/wishlist.css - Removed all .bizzwishlist-mini-* styles (moved to common.css) - Keeps only popup, button, page, counter, notice, and other non-mini styles Method/Approach -------------- The fragment-like loading approach works as follows: 1. Server renders a minimal HTML shell for the mini widget (just the structure) 2. common.js runs on page load and checks if .bizzwishlist-mini-widget exists 3. If it exists, it: a. Checks sessionStorage for cached fragment data (STORAGE_KEY: 'bizzwishlist_mini_fragment') b. If cached data found, immediately renders items from cache (fast initial display) c. Makes AJAX POST to 'bizzwishlist_get_mini_fragment' action d. Server responds with JSON containing items array and count e. JavaScript renders the items client-side and caches the response 4. When wishlist changes (add/remove from any source): - wishlist.js triggers 'bizzwishlist_changed' event - common.js catches this event and re-fetches the fragment - Widget is updated with fresh data This approach mirrors WooCommerce's cart fragment system where: - Cart content is stored in session and loaded via AJAX - sessionStorage provides instant rendering on subsequent page loads - Fresh data is always fetched in the background to ensure accuracy Mini Wishlist Display ---------------------------- The "Auto-Display Mini Wishlist" setting has been renamed to "Mini Wishlist Display". When enabled: 1. MODIFIED: includes/Frontend/MiniWishlist.php - render_auto_display() wraps the mini widget in a
container - This container is fixed-positioned at the bottom-right corner 2. MODIFIED: assets/css/common.css - Added .bizzwishlist-floating-bubble styles: * position: fixed; bottom: 20px; right: 20px; z-index: 99998 * width: 300px with max-width for mobile * Enhanced box-shadow and rounded corners for the floating look * When collapsed, shows the toggle bar (heart icon + count) * When expanded, shows the full mini wishlist body * Responsive: adjusts sizing for small screens 3. MODIFIED: includes/Admin/Settings.php - Setting label renamed from "Auto-Display Mini Wishlist" to "Mini Wishlist Display" - Updated description text to explain the floating bubble behavior - Added helper description explaining on/off behavior