# Mini Wishlist & Floating Bubble

The mini wishlist is a compact, collapsible widget that gives customers quick access to their wishlist without navigating to the full wishlist page. It can be placed via shortcode or displayed as an always-visible floating bubble.

## Overview

The mini wishlist shows:

- A **heart icon** with the item count badge
- A collapsible list of wishlist items with:
  - Product thumbnail (60×60 px)
  - Product name
  - Product price
  - Quick action buttons
- A link to view the **full wishlist page**

> **Screenshot placeholder:** *Mini wishlist widget expanded, showing a list of products with thumbnails and prices.*

## Enabling the Mini Wishlist

1. Go to **Bizzwishlist > Settings**.
2. Find the **"Mini Wishlist"** section.
3. Set **"Enable Mini Wishlist"** to **Yes**.
4. Save the settings.

> **Screenshot placeholder:** *Admin settings showing the Mini Wishlist enable toggle.*

## Placing the Mini Wishlist via Shortcode

Use the shortcode to place the mini wishlist anywhere on your site:

```
[bizzwishlist_mini]
```

You can add this shortcode to:
- Any page or post
- A widget area (using a Text or Shortcode widget)
- A sidebar
- A page builder element

## Floating Bubble (Auto-Display)

The floating bubble automatically displays the mini wishlist as a fixed-position widget on every page of your site. This is similar to WooCommerce's mini cart behavior.

### Enabling the Floating Bubble

1. Go to **Bizzwishlist > Settings**.
2. Set **"Auto Display (Floating Bubble)"** to **Yes**.
3. Choose the **bubble position** from the dropdown.
4. Save the settings.

> **Screenshot placeholder:** *Admin settings showing the floating bubble position options.*

### Bubble Positions

| Position | Description |
|----------|-------------|
| **Bottom Right** | Fixed to the bottom-right corner of the screen (default) |
| **Bottom Left** | Fixed to the bottom-left corner |
| **Bottom Center** | Fixed to the bottom-center of the screen |
| **Right Center** | Fixed to the middle of the right side |
| **Left Center** | Fixed to the middle of the left side |

> **Screenshot placeholder:** *Example of the floating bubble positioned at the bottom-right corner of a shop page.*

### How It Works

1. The bubble shows a **heart icon** with the wishlist count.
2. **Click the bubble** to expand and see the wishlist items.
3. **Click again** (or click outside) to collapse it.
4. The count badge updates in real-time via AJAX when items are added or removed.

> **Screenshot placeholder:** *Floating bubble in collapsed state showing the heart icon with a count of "3".*

> **Screenshot placeholder:** *Floating bubble expanded showing the mini wishlist items list.*

## Content Loading

The mini wishlist uses **AJAX fragment loading** for optimal performance:

- The HTML shell is rendered on page load (lightweight).
- Product items are loaded via AJAX only when the widget is expanded.
- Item data is refreshed automatically when the wishlist changes.

This ensures the mini wishlist does not slow down your initial page load.