# Table Templates

The Bizz Wishlist plugin includes a table template system that lets users choose different visual designs for the wishlist table on the frontend.

## How It Works

The wishlist page table uses a combination of **base styles** and **template-specific styles**:

1. **Base styles** (`assets/css/table-design.css`) — Applied to every table regardless of the chosen template. These provide the foundational layout: column widths, vertical alignment, responsive behavior, action button styles, checkbox styles, and variation selector styles.

2. **Template styles** (`assets/css/table-templates/{template}.css`) — Applied on top of the base styles. Each template file uses a CSS class like `.bizzwishlist-tpl-{slug}` to override specific properties such as backgrounds, borders, spacing, and hover effects.

3. **Non-table styles** (`assets/css/wishlist.css`) — Contains styles for all other wishlist UI elements (buttons, popups, notices, share bar, counter, etc.) that are **not** part of the table.

## Available Templates

| Template   | Slug       | Description                                                                 |
|------------|------------|-----------------------------------------------------------------------------|
| Default    | `default`  | Clean, modern design with a light header background and subtle row borders. |
| Minimal    | `minimal`  | Ultra-clean look with minimal borders and generous whitespace.              |
| Elegant    | `elegant`  | Refined design with rounded corners and a subtle box shadow.                |
| Bordered   | `bordered` | Full cell borders for clear data separation between columns.                |
| Striped    | `striped`  | Alternating row colors (zebra striping) with a dark header.                 |

## User Setting

Users select their preferred table template from the WordPress admin:

**Bizz Wishlist → Settings → Table Design → Table Template**

The setting is stored in the `bizzwishlist_settings` option under the key `table_template`. The default value is `default`.

## File Structure

```
assets/css/
├── table-design.css              # Base table styles (always loaded)
├── wishlist.css                  # Non-table frontend styles
└── table-templates/
    ├── default.css               # Default template
    ├── minimal.css               # Minimal template
    ├── elegant.css               # Elegant template
    ├── bordered.css              # Bordered template
    └── striped.css               # Striped template
```

## How CSS Classes Are Applied

The wishlist page template (`templates/wishlist-page.php`) outputs the table with the selected template class:

```html
<table class="bizzwishlist-table bizzwishlist-tpl-{slug} shop_table">
```

For example, if the user selects the "striped" template, the rendered HTML will be:

```html
<table class="bizzwishlist-table bizzwishlist-tpl-striped shop_table">
```

## How Styles Are Loaded

The `Assets` class (`includes/Frontend/Assets.php`) enqueues three stylesheets:

1. `bizzwishlist` — `assets/css/wishlist.css`
2. `bizzwishlist-table-design` — `assets/css/table-design.css`
3. `bizzwishlist-table-template` — `assets/css/table-templates/{slug}.css` (depends on `bizzwishlist-table-design`)

The template stylesheet depends on the base table design, ensuring the correct load order.

## Adding a New Template

To add a new table template:

1. **Create the CSS file** at `assets/css/table-templates/{your-slug}.css`. Use the class `.bizzwishlist-tpl-{your-slug}` for all selectors.

2. **Register the template** in `includes/Admin/Settings.php` by adding an entry to the `get_available_table_templates()` method:

   ```php
   public static function get_available_table_templates() {
       return array(
           'default'    => __( 'Default', 'bizzwishlist' ),
           'minimal'    => __( 'Minimal', 'bizzwishlist' ),
           'elegant'    => __( 'Elegant', 'bizzwishlist' ),
           'bordered'   => __( 'Bordered', 'bizzwishlist' ),
           'striped'    => __( 'Striped', 'bizzwishlist' ),
           'your-slug'  => __( 'Your Template Name', 'bizzwishlist' ),
       );
   }
   ```

3. That's it. The dropdown, sanitization, CSS enqueuing, and class application are all handled automatically.

## Template CSS Structure

Each template CSS file should follow this pattern:

```css
/* Template: Your Template Name */
.bizzwishlist-table.bizzwishlist-tpl-your-slug {
    /* Table-level overrides */
}

.bizzwishlist-table.bizzwishlist-tpl-your-slug thead th {
    /* Header cell overrides */
}

.bizzwishlist-table.bizzwishlist-tpl-your-slug tbody td {
    /* Body cell overrides */
}

.bizzwishlist-table.bizzwishlist-tpl-your-slug tbody tr:last-child td {
    /* Last row overrides */
}

.bizzwishlist-table.bizzwishlist-tpl-your-slug tbody tr:hover {
    /* Row hover overrides */
}
```

**Important:** Do not use gradient colors in templates. All templates should use flat, solid colors only.