توضیحات
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.
عکسهای صفحه
نصب
- 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).
سوالات متداول
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).
نقد و بررسیها
نقد و بررسیای برای این افزونه یافت نشد.
توسعه دهندگان و همکاران
“SH Product Grid & List Widget” نرم افزار متن باز است. افراد زیر در این افزونه مشارکت کردهاند.
مشارکت کنندگان
“SH Product Grid & List Widget” به 1 زبان ترجمه شده است. با تشکر از مترجمین برای همکاری و کمکهایشان.
ترجمه “SH Product Grid & List Widget” به زبان شما.
علاقه مند به توسعه هستید؟
کد را مرور کنید، مخزن SVN را بررسی کنید، یا از طریق RSS در گزارش توسعه مشترک شوید.
گزارش تغییرات
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: containfor image rendering) - Reduce redundant DOM operations and nested timeouts for better performance