=== SH Product Grid & List Widget ===
Plugin Name:  SH Product Grid & List Widget
Description: High-performance product grid & list widget for WordPress with skeleton loading, AJAX pagination, and Elementor compatibility. Resolves common AJAX and layout issues.
Stable Tag: 1.0.0
Author: Shawn Hills
Author URI: https://profiles.wordpress.org/shawnhills
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sh-product-grid-list-widget
Domain Path: /languages
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
WC requires at least: 7.0
WC tested up to: 10.4
Elementor tested up to: 3.33
Tags: product grid, ajax pagination, elementor, skeleton loader, responsive

Short Description: High-performance product grid & list widget with AJAX pagination, backend skeleton loading, and full Elementor integration.

=== Description ===
SH Product Grid & List Widget is a lightweight, performance-optimized WordPress plugin designed to display WooCommerce products in grid, masonry, or list layouts with seamless backend-driven skeleton loading (no front-end skeleton rendering bloat).

Key Features:
* **Backend Skeleton & Spinner Support**: Eliminates front-end skeleton rendering overhead by leveraging backend-generated skeletons; fully compatible with spinner loading animation.
* **Optimized AJAX Handling**: Fixes common AJAX non-triggering issues (e.g., missing nonce validation, disabled AJAX config) and enforces AJAX execution for non-Elementor edit modes.
* **Smooth Transitions**: Differentiated transition durations for grid (200ms) and list (100ms) layouts to prevent list layout transition lag; skips redundant spinner removal logic for non-spinner loading modes.
* **AJAX Pagination**: Core pagination logic with page switching, total items/pages display, and seamless product re-rendering without page reloads.
* **Layout Alignment**: Ensures list layout styling matches backend skeleton styles (left image + right content, compact content layout, button alignment to bottom).
* **Elementor Compatibility**: Detects Elementor edit mode for style adaptation (no AJAX disabling, only visual layout adjustment).
* **Responsive Fixes**: Resolves skeleton/ product grid column misalignment on viewport resize; enforces single column for list layout across all devices.
* **Quick View Integration**: Seamless Quick View modal trigger for product images (with lazy loading support).
* **Masonry Layout**: Supports responsive masonry product layout with equal height column balancing.


== Source Code ==

All original, unminified, source files are included in the plugin:

- JavaScript Source: /assets/src/
- SCSS Source: /assets/src/scss/

Minified files in `/assets/build/` are generated directly from these source files.
No obfuscated or external closed-source code is used.

=== Installation ===
1. Upload the `sh-product-grid-list-widget` folder to the `/wp-content/plugins/` directory. 
2. Activate the plugin through the 'Plugins' menu in WordPress.
3. No additional configuration is required by default; the widget will auto-initialize on elements with the `.shpc-skeleton-grid` class.
4. For Elementor users: Add the widget to your layout (ensure the widget has valid `data-settings` and `data-nonce` attributes for AJAX functionality).

=== Frequently Asked Questions ===
Q: Why is AJAX not triggering for the product widget?
A: AJAX only fails if: (1) The security nonce is missing (check `data-nonce` attribute on the widget container); (2) The site is in Elementor edit mode (AJAX is disabled for style preview only). The plugin enforces AJAX enablement by default.

Q: How to fix slow list layout transitions?
A: The plugin automatically shortens list layout transition duration to 100ms (vs 200ms for grid) and skips redundant spinner removal logic for non-spinner loading modes. No manual adjustments are needed.

Q: How to enable pagination for the product widget?
A: Set the `enable_pagination` config to `yes` (via `data-settings` attribute on the widget container). The plugin will render pagination controls (previous/next page, page numbers, total items/pages) adjacent to the loading container.

Q: Does the plugin support custom product layouts?
A: Yes. The plugin supports grid, masonry, and list layouts. To switch layouts, update the `layout` parameter in the widget's `data-settings` (values: `grid`, `masonry`, `list`).

Q: Is the plugin compatible with WooCommerce?
A: Yes. The plugin fully supports WooCommerce product data (product name, price, category, image, short description, and add-to-cart functionality).

=== Changelog ===
= 1.0.0 =
* Initial release
* Remove front-end skeleton loader rendering (leverage backend-generated skeletons)
* Fix AJAX non-triggering issues (enforce nonce validation, auto-enable AJAX)
* Resolve skeleton/product grid column misalignment on viewport resize
* Add core AJAX pagination logic (page switching, pagination stats, redundant pagination cleanup)
* Implement list layout styling alignment with backend skeleton
* Optimize smooth transitions (differentiate grid/list durations, skip non-spinner redundant processing)
* Add Elementor edit mode detection (style adaptation without AJAX disabling)
* Integrate Quick View functionality for product images
* Support responsive masonry layout with column balancing
* Add detailed debug logging for spinner/skeleton removal and AJAX execution
* Fix image stretching in list layout (use `object-fit: contain` for image rendering)
* Reduce redundant DOM operations and nested timeouts for better performance

=== Upgrade Notice ===
= 1.0.0 =
Initial release. No upgrade steps required.