# Woo Product Slider Widget

> Swiper-based product carousel for WooCommerce. 4 preset layouts. Quick-view integration with Lite's `quick-view.min.css`. Animate.css entrance animations.

**Class file:** `includes/Elements/Woo_Product_Slider.php` (3,506 lines — largest Pro widget)
**Slug:** `woo-product-slider` (widget id `eael-woo-product-slider`)
**Public docs:** <https://essential-addons.com/elementor/docs/woo-product-slider/>
**Pro-shared:** Pro-only. **Requires WooCommerce active.** Reuses Lite's quick-view CSS.

## Overview

Swiper-driven product carousel pulling from WooCommerce products. 4 presets (`preset-1` through `preset-4`) each with distinct card layouts. Optional quick-view modal triggered from product image (reuses Lite's quick-view modal CSS + JS). Animate.css entrance animations available per-slide. Largest Pro widget by line count (3,506) — most lines are per-preset style controls.

## Pro vs Lite

Pro-only. Requires WooCommerce. Reuses Lite's `quick-view.min.css` + Lite's `Helper` trait.

## File Map

| File | Role |
| --- | --- |
| `includes/Elements/Woo_Product_Slider.php` | Widget class (3,506 lines) |
| `includes/Template/Woo-Product-Slider/preset-1.php` | Layout preset 1 |
| `includes/Template/Woo-Product-Slider/preset-2.php` | Layout preset 2 |
| `includes/Template/Woo-Product-Slider/preset-3.php` | Layout preset 3 |
| `includes/Template/Woo-Product-Slider/preset-4.php` | Layout preset 4 |
| `src/css/view/woo-product-slider.scss` → `assets/front-end/css/view/woo-product-slider.min.css` | Per-preset styling |
| `src/js/view/woo-product-slider.js` → `assets/front-end/js/view/woo-product-slider.min.js` | Swiper init + quick-view trigger |
| `EAEL_PRO_PLUGIN_PATH/assets/front-end/css/lib-view/animate/animate.min.css` | Animate.css (lib) |
| `EAEL_PLUGIN_PATH/assets/front-end/css/view/quick-view.min.css` | Lite — quick-view modal CSS |
| `config.php` entry `'woo-product-slider'` | Animate.css (lib) + Lite quick-view CSS + Pro CSS + Pro JS |

## Architecture

- **Composes Lite's `Helper` trait** (line 19) — standard pattern.
- **`WC()->version` version check** at line 3487 — `version_compare( WC()->version, '3.0.0', '>=' )` guards a WC 3.0+ behaviour branch. Older WooCommerce takes a different code path.
- **4 preset templates** dispatched via `eael_woo_product_slider_layout` — same template-include pattern as Post_List.
- **Animate.css for entrance animations** — `lib-view/animate/animate.min.css`. Per-slide animation class applied as data attribute, then JS adds Animate.css class on enter.
- **Quick-view modal is Lite-owned** — Pro's JS triggers the modal but the modal markup, AJAX content load, and CSS all live in Lite.
- **No `class_exists('WooCommerce')` gate** in the constructor — widget will fatal if WooCommerce is deactivated mid-session. Gate happens at registration level (EA dashboard hides Woo widgets when WC is missing — verify Lite-side).

## Render Output (preset-1)

```html
<div class="eael-woo-product-slider eael-woo-product-slider-{element-id}"
     data-items="3" data-items-tablet="2" data-items-mobile="1"
     data-effect="slide" data-autoplay="3000" data-speed="500">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="eael-product-card">
          <div class="eael-product-thumbnail">
            <a href="{product_url}"><img src="{thumb}" /></a>
            [?] <button class="eael-quick-view" data-product-id="{ID}">Quick View</button>
            [?] <span class="onsale">Sale!</span>
          </div>
          <div class="eael-product-content">
            <h3>{title}</h3>
            <div class="price">{regular_price} <ins>{sale_price}</ins></div>
            <a class="add_to_cart_button" href="?add-to-cart={ID}">Add to Cart</a>
          </div>
        </div>
      </div>
      ...
    </div>
    [?] <div class="swiper-button-next"></div>
    [?] <div class="swiper-button-prev"></div>
    [?] <div class="swiper-pagination"></div>
  </div>
</div>
```

## Controls Reference

| Control id | Tab → Section | Type | Purpose |
| --- | --- | --- | --- |
| `eael_woo_product_slider_layout` | Content → Layout | SELECT | `preset-1` / `preset-2` / `preset-3` / `preset-4` |
| Product query (categories, tags, featured, on-sale, etc.) | Content → Products | various | WC product query |
| `posts_per_page` | Content → Products | NUMBER | Product count |
| Carousel controls (items, autoplay, effect, arrows, dots, loop) | Content → Carousel | various | Swiper config |
| Quick-view toggle | Content → Card | SWITCHER | Show quick-view button |
| Animate.css entrance animation | Content → Card | SELECT | Animation class (fadeIn / slideInUp / etc.) |

## Conditional Dependencies

```text
quick_view = 'yes'
  └── shows quick-view button styling controls

autoplay = 'yes'
  └── shows autoplay_speed slider
  └── shows pause_on_hover toggle

arrows = 'yes' → arrow icon pickers
dots = 'yes' → pagination style
```

## JavaScript Lifecycle

Standard Swiper init pattern (see [`_patterns.md`](_patterns.md) and Pro [`.claude/rules/widget-development.md`](../../.claude/rules/widget-development.md)). Plus quick-view click handler that triggers Lite's modal.

## Hooks & Filters

Standard widget render plus WC hooks (`woocommerce_product_*`, `wc_get_products`).

## Common Issues

| Symptom | Likely cause | Diagnose | Fix |
| --- | --- | --- | --- |
| Fatal "Call to a member function on null" with `WC()` | WooCommerce deactivated | Check `is_plugin_active( 'woocommerce/woocommerce.php' )` | Activate WooCommerce; widget shouldn't even register without it (EA dashboard check) |
| Quick-view modal doesn't open | Lite's quick-view JS missing | Verify Lite is active + quick-view widget enabled | Enable Lite's quick-view in EA dashboard; reload page |
| Sale badge wrong on WC < 3.0 | Older WC API path | Check `WC()->version` | Old branch at line 3487; verify it still works on modern WC |
| Animation runs in editor | `isEditMode` not gated | Inspect JS init | Add `if (window.isEditMode) return;` around Animate.css trigger |
| Cart fragments not updating | WC fragments JS not enqueued | Confirm WC scripts loaded | Verify `wc-cart-fragments` script handle present |

## Known Limitations

- **3,506 lines** — biggest Pro widget; refactor target for per-preset method extraction
- **No `class_exists('WooCommerce')` gate** — relies on dashboard registration to hide widget
- **`WC()->version` check at line 3487** — drop-old-WC-branch candidate when 3.0 support drops
- **Quick-view depends on Lite** — Pro can't ship without Lite's quick-view enabled
- **Animate.css entrance animation has no `prefers-reduced-motion`** check
- **4 templates × full style controls = control-bloat** — most of the 3,506 lines is per-preset styling

## Cross-References

- Architecture: [`docs/architecture/pro-lite-bridge.md`](../architecture/pro-lite-bridge.md) — Lite quick-view dependency
- Sibling: [`woo-cross-sells.md`](woo-cross-sells.md)
- Shared patterns: [`_patterns.md`](_patterns.md) — Swiper init pattern