EPS-1517: Woo product widget development

inc/js/woo-products.js

@@ -0,0 +1,42 @@
+/**
+ * HFE Woo Products Widget JavaScript
+ */
+(function($) {
+    'use strict';
+
+    var HFEWooProducts = {
+        init: function() {
+            this.bindEvents();
+        },
+
+        bindEvents: function() {
+            // Add any interactive functionality here
+            $(document).on('click', '.hfe-product-add-to-cart .button', this.handleAddToCart);
+        },
+
+        handleAddToCart: function(e) {
+            var $button = $(this);
+
+            // Add loading state
+            $button.addClass('loading');
+
+            // Remove loading state after WooCommerce handles the request
+            setTimeout(function() {
+                $button.removeClass('loading');
+            }, 2000);
+        }
+    };
+
+    // Initialize when document is ready
+    $(document).ready(function() {
+        HFEWooProducts.init();
+    });
+
+    // Initialize for Elementor editor
+    $(window).on('elementor/frontend/init', function() {
+        elementorFrontend.hooks.addAction('frontend/element_ready/hfe-woo-product-grid.default', function($scope) {
+            HFEWooProducts.init();
+        });
+    });
+
+})(jQuery);

inc/widgets-css/frontend.css

@@ -2171,4 +2171,4 @@ body .elementor .hfe-button-wrapper a {
 }
 .hfe-post-title {
     font-size: 20px;
-}
+}

inc/widgets-css/woo-products.css

@@ -0,0 +1,290 @@
+/* HFE Woo Products Widget Styles */
+.hfe-woo-products-wrapper {
+	width: 100%;
+}
+
+.hfe-woo-products-grid {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 35px 20px;
+}
+
+.hfe-product-item {
+	background: #ffffff;
+	border-radius: 8px;
+	overflow: hidden;
+	border: 1px solid #f0f0f0;
+}
+
+
+.hfe-product-image {
+	position: relative;
+	overflow: hidden;
+}
+
+.hfe-product-image img {
+	width: 100%;
+	height: auto;
+	display: block;
+}
+
+
+.hfe-product-content {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.hfe-product-category {
+	font-size: 12px;
+	text-transform: uppercase;
+	letter-spacing: 0.8px;
+	margin-bottom: 8px;
+	opacity: 0.75;
+	font-weight: 500;
+	color: #666;
+}
+
+.hfe-product-title {
+	margin: 0 0 12px 0;
+	font-size: 16px;
+	line-height: 1.5;
+	font-weight: 600;
+	flex-grow: 1;
+}
+
+.hfe-product-title a {
+	color: #333;
+	text-decoration: none;
+}
+
+.hfe-product-title h2 {
+	margin: 0;
+	font-size: inherit;
+	line-height: inherit;
+	font-weight: inherit;
+	color: inherit;
+}
+
+.hfe-product-title .hfe-loop-product__link {
+	display: block;
+}
+
+
+.hfe-product-rating {
+	margin-bottom: 12px;
+}
+
+.hfe-product-rating .review-rating {
+	display: flex;
+	align-items: center;
+	min-height: 16px;
+}
+
+.hfe-product-rating .star-rating {
+	font-size: 14px;
+	color: #ffa500;
+	display: inline-block;
+}
+
+.hfe-product-price {
+	margin-bottom: 16px;
+	font-weight: 700;
+	font-size: 18px;
+}
+
+.hfe-product-price .price {
+	color: #333;
+}
+
+.hfe-product-price .price del {
+	opacity: 0.6;
+	margin-right: 8px;
+	font-weight: 400;
+}
+
+.hfe-product-description {
+	margin-bottom: 16px;
+	font-size: 14px;
+	line-height: 1.6;
+	color: #666;
+	flex-grow: 1;
+}
+
+.hfe-product-add-to-cart {
+	margin-top: auto;
+}
+
+.hfe-woo-products-wrapper .hfe-product-add-to-cart .button {
+	width: auto;
+	min-width: 100px;
+	padding: 12px 20px;
+	border: none;
+	border-radius: 4px;
+	background: #007cba;
+	color: #ffffff;
+	font-size: 14px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	cursor: pointer;
+	text-decoration: none;
+	display: inline-block;
+	text-align: center;
+}
+
+.hfe-woo-products-wrapper .hfe-product-add-to-cart .button:hover,
+.hfe-woo-products-wrapper .hfe-product-add-to-cart .button:focus,
+.hfe-woo-products-wrapper .hfe-product-add-to-cart .button:active,
+.hfe-woo-products-wrapper .hfe-product-add-to-cart a.button:link {
+	text-decoration: none;
+}
+
+
+.hfe-woo-products-notice,
+.hfe-woo-products-empty {
+	text-align: center;
+	padding: 40px 20px;
+	background: #f8f9fa;
+	border-radius: 4px;
+	color: #666;
+}
+
+/* Card Hover Effects */
+.hfe-product-item {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.hfe-product-content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Content Alignment Classes */
+.hfe-content-align-left .hfe-product-item {
+	text-align: left;
+}
+
+.hfe-content-align-left .hfe-product-item .star-rating {
+	margin-left: 0;
+	margin-right: auto;
+}
+
+.hfe-content-align-center .hfe-product-item {
+	text-align: center;
+}
+
+.hfe-content-align-center .hfe-product-item .star-rating {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.hfe-content-align-right .hfe-product-item {
+	text-align: right;
+}
+
+.hfe-content-align-right .hfe-product-item .star-rating {
+	margin-left: auto;
+	margin-right: 0;
+}
+
+/* Tablet Responsive Alignment */
+@media (max-width: 1024px) {
+	.hfe-content-tablet-align-left .hfe-product-item {
+		text-align: left;
+	}
+
+	.hfe-content-tablet-align-left .hfe-product-item .star-rating {
+		margin-left: 0;
+		margin-right: auto;
+	}
+
+	.hfe-content-tablet-align-center .hfe-product-item {
+		text-align: center;
+	}
+
+	.hfe-content-tablet-align-center .hfe-product-item .star-rating {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.hfe-content-tablet-align-right .hfe-product-item {
+		text-align: right;
+	}
+
+	.hfe-content-tablet-align-right .hfe-product-item .star-rating {
+		margin-left: auto;
+		margin-right: 0;
+	}
+}
+
+/* Mobile Responsive Alignment */
+@media (max-width: 767px) {
+	.hfe-content-mobile-align-left .hfe-product-item {
+		text-align: left;
+	}
+
+	.hfe-content-mobile-align-left .hfe-product-item .star-rating {
+		margin-left: 0;
+		margin-right: auto;
+	}
+
+	.hfe-content-mobile-align-center .hfe-product-item {
+		text-align: center;
+	}
+
+	.hfe-content-mobile-align-center .hfe-product-item .star-rating {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.hfe-content-mobile-align-right .hfe-product-item {
+		text-align: right;
+	}
+
+	.hfe-content-mobile-align-right .hfe-product-item .star-rating {
+		margin-left: auto;
+		margin-right: 0;
+	}
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+	.hfe-woo-products-grid {
+		grid-template-columns: repeat(3, 1fr);
+	}
+}
+
+@media (max-width: 768px) {
+	.hfe-woo-products-grid {
+		grid-template-columns: repeat(2, 1fr);
+		gap: 20px 15px;
+	}
+
+	.hfe-product-content {
+		padding: 16px;
+	}
+
+	.hfe-product-title {
+		font-size: 15px;
+	}
+
+	.hfe-product-price {
+		font-size: 16px;
+	}
+}
+
+@media (max-width: 480px) {
+	.hfe-woo-products-grid {
+		grid-template-columns: 1fr;
+		gap: 25px;
+	}
+
+	.hfe-product-content {
+		padding: 18px;
+	}
+}

inc/widgets-manager/base/hfe-helper.php

@@ -528,6 +528,7 @@ public static function get_used_widget() {
 			'hfe-site-tagline',
 			'hfe-site-title',
 			'hfe-infocard',
+			'hfe-woo-product-grid',
 			'hfe-basic-posts',
 		];
 

inc/widgets-manager/base/widgets-config.php

@@ -249,6 +249,19 @@ public static function get_widget_list() {
 				'demo_url'    => 'https://ultimateelementor.com/widgets/search/',
 				'category'    => 'content',
 				],
+			'Woo_Product_Grid'        => [
+					'slug'        => 'hfe-woo-product-grid',
+					'title'       => __( 'Woo Products Grid', 'header-footer-elementor' ),
+					'description' => __( 'Display WooCommerce products in a responsive grid layout with customizable styling options.', 'header-footer-elementor' ),
+					'keywords'    => [ 'hfe', 'woo', 'products', 'grid' ],
+					'icon'        => 'hfe-icon-woo-product',
+					'title_url'   => '#',
+					'default'     => true,
+					'doc_url'     => HFE_DOMAIN . 'docs-category/widgets/woo-products/?utm_source=uael-pro-dashboard&utm_medium=uael-menu-page&utm_campaign=uael-pro-plugin',
+					'category'    => 'content',
+					'is_pro'      => false,
+					'demo_url'    => HFE_DOMAIN . 'widgets/woo-products/',
+				],
 		];
 
 		return apply_filters( 'hfe_widgets_data', self::$widget_list );