=== SH Product Grid & List Widget === Contributors: shawnhills Tags: product grid, ajax pagination, elementor, skeleton loader, responsive Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 Stable tag: 1.0.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html High-performance product grid & list widget with AJAX pagination, 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, human-readable 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.1 = * Compatibility: Full WordPress 7.0 compatibility Fix: cache manager = 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.