Mô tả
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.
Ảnh màn hình
Cài đặt
- Upload the
sh-product-grid-list-widgetfolder to the/wp-content/plugins/directory. - Activate the plugin through the ‘Plugins’ menu in WordPress.
- No additional configuration is required by default; the widget will auto-initialize on elements with the
.shpc-skeleton-gridclass. - For Elementor users: Add the widget to your layout (ensure the widget has valid
data-settingsanddata-nonceattributes for AJAX functionality).
Hỏi đáp
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).
Đánh giá
Không có đánh giá nào cho plugin này.
Người đóng góp & Lập trình viên
“SH Product Grid & List Widget” là mã nguồn mở. Những người sau đã đóng góp vào plugin này.
Những người đóng góp
“SH Product Grid & List Widget” đã được dịch qua 1 ngôn ngữ. Cảm ơn những người tham gia dịch vì đóng góp của họ.
Dịch “SH Product Grid & List Widget” sang ngôn ngữ của bạn.
Muốn tham gia phát triển?
Duyệt code, check out SVN repository, hoặc theo dõi nhật ký phát triển qua RSS.
Nhật ký thay đổi
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: containfor image rendering) - Reduce redundant DOM operations and nested timeouts for better performance