PluginProbe ʕ •ᴥ•ʔ
ShopEngine Elementor WooCommerce Builder Addon – All in One WooCommerce Solution with eCommerce Templates & Woo Widgets / 4.9.5
ShopEngine Elementor WooCommerce Builder Addon – All in One WooCommerce Solution with eCommerce Templates & Woo Widgets v4.9.5
4.9.5 4.9.4 4.9.3 4.9.2 4.9.1 4.9.0 2.0.0 2.1.0 2.2.0 2.2.1 2.2.2 2.3.0 2.4.0 2.5.0 2.5.1 3.0.0 3.1.0 3.1.1 4.0.0 4.0.1 4.1.0 4.1.1 4.2.0 4.2.1 4.3.0 4.3.1 4.4.0 4.5.0 4.5.1 4.6.0 4.6.1 4.6.2 4.6.3 4.6.4 4.6.5 4.6.6 4.6.7 4.6.8 4.6.9 4.7.0 4.7.1 4.7.2 4.7.3 4.7.4 4.7.5 4.7.6 4.7.7 4.7.8 4.7.9 4.8.0 4.8.1 4.8.2 4.8.3 4.8.4 4.8.5 4.8.6 4.8.7 4.8.8 4.8.9 trunk 0.1.2-beta 0.1.3-beta 0.1.4-beta 1.0.0 1.1.0 1.1.1 1.1.2 1.1.3 1.2.0 1.2.1 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.4.0 1.4.1 1.5.0 1.5.1 1.6.0 1.6.1 1.7.0 1.8.0 1.8.1 1.9.0
shopengine / widgets / product-list / product-list.php
shopengine / widgets / product-list Last commit date
screens 1 week ago product-list-config.php 4 years ago product-list.php 1 week ago
product-list.php
1992 lines
1 <?php
2
3 namespace Elementor;
4
5 use ShopEngine\Core\Elementor_Controls\Controls_Manager as ShopEngine_Controls_Manager;
6 use ShopEngine\Widgets\Products;
7
8 defined('ABSPATH') || exit;
9
10
11 class ShopEngine_Product_List extends \ShopEngine\Base\Widget {
12
13 public function config() {
14 return new ShopEngine_Product_List_Config();
15 }
16
17 protected function register_controls() {
18
19 // GENERAL - SECTION
20 $this->start_controls_section(
21 'general',
22 [
23 'label' => esc_html__('General', 'shopengine'),
24 'tab' => Controls_Manager::TAB_CONTENT,
25 ]
26 );
27
28 $this->add_control(
29 'product_view_style',
30 [
31 'label' => esc_html__( 'View Style', 'shopengine' ),
32 'type' => \Elementor\Controls_Manager::CHOOSE,
33 'options' => [
34 'grid' => [
35 'title' => esc_html__( 'Grid', 'shopengine' ),
36 'icon' => 'eicon-gallery-grid',
37 ],
38 'list' => [
39 'title' => esc_html__( 'List', 'shopengine' ),
40 'icon' => 'eicon-editor-list-ul',
41 ]
42 ],
43 'default' => 'grid',
44 'toggle' => true,
45 ]
46 );
47
48 $this->add_control(
49 'products_per_page',
50 [
51 'label' => esc_html__('Products Per Page', 'shopengine'),
52 'type' => Controls_Manager::NUMBER,
53 'default' => 12,
54 ]
55 );
56
57 $this->add_control(
58 'product_order',
59 [
60 'label' => esc_html__('Order', 'shopengine'),
61 'type' => Controls_Manager::SELECT,
62 'default' => 'DESC',
63 'options' => [
64 'ASC' => esc_html__('ASC', 'shopengine'),
65 'DESC' => esc_html__('DESC', 'shopengine'),
66 ],
67 ]
68 );
69
70 $this->add_control(
71 'product_orderby',
72 [
73 'label' => esc_html__('Order By', 'shopengine'),
74 'type' => Controls_Manager::SELECT,
75 'default' => 'date',
76 'options' => $this->config()->product_order_by(),
77 ]
78 );
79
80 $this->add_responsive_control(
81 'column',
82 [
83 'label' => esc_html__('Column', 'shopengine'),
84 'type' => Controls_Manager::NUMBER,
85 'min' => 1,
86 'max' => 12,
87 'step' => 1,
88 'desktop_default' => 3,
89 'tablet_default' => 2,
90 'mobile_default' => 1,
91 'selectors' => [
92 '{{WRAPPER}} .shopengine-product-list .product-list-grid' => 'grid-template-columns: repeat({{VALUE}}, 1fr)',
93 ],
94 ]
95 );
96
97 $this->add_control(
98 'product_by',
99 [
100 'label' => esc_html__('Product Query By', 'shopengine'),
101 'type' => Controls_Manager::SELECT2,
102 'options' => $this->config()->product_query_by(),
103 'default' => 'product',
104 'seperator' => 'before',
105 ]
106 );
107
108 $this->add_control(
109 'term_list',
110 [
111 'label' => esc_html__('Select Categories', 'shopengine'),
112 'type' => ShopEngine_Controls_Manager::AJAXSELECT2,
113 'options' => 'shopengine_ajaxselect2/product_cat',
114 'multiple' => true,
115 'label_block' => true,
116 'condition' => [
117 'product_by' => 'category',
118 ],
119 ]
120 );
121
122 $this->add_control(
123 'tag_lists',
124 [
125 'label' => esc_html__('Select Tags', 'shopengine'),
126 'type' => ShopEngine_Controls_Manager::AJAXSELECT2,
127 'options' => 'shopengine_ajaxselect2/product_tags',
128 'multiple' => true,
129 'label_block' => true,
130 'condition' => [
131 'product_by' => 'tag',
132 ],
133 ]
134 );
135
136 $this->add_control(
137 'product_list',
138 [
139 'label' => esc_html__('Select Products', 'shopengine'),
140 'type' => ShopEngine_Controls_Manager::AJAXSELECT2,
141 'options' => 'shopengine_ajaxselect2/product_list',
142 'multiple' => true,
143 'label_block' => true,
144 'condition' => [
145 'product_by' => 'product',
146 ],
147 ]
148 );
149
150 $this->add_control(
151 'rating_list',
152 [
153 'label' => esc_html__('Select Rating', 'shopengine'),
154 'type' => Controls_Manager::SELECT2,
155 'options' => [
156 '1' => esc_html__('1 star', 'shopengine'),
157 '2' => esc_html__('2 star', 'shopengine'),
158 '3' => esc_html__('3 star', 'shopengine'),
159 '4' => esc_html__('4 star', 'shopengine'),
160 '5' => esc_html__('5 star', 'shopengine'),
161 ],
162 'multiple' => true,
163 'label_block' => true,
164 'default' => [5],
165 'condition' => [
166 'product_by' => 'rating',
167 ],
168 ]
169 );
170
171 $this->add_control(
172 'pa_attribute_list',
173 [
174 'label' => esc_html__('Select Attributes', 'shopengine'),
175 'type' => ShopEngine_Controls_Manager::AJAXSELECT2,
176 'options' => 'shopengine_ajaxselect2/product_pa_list',
177 'multiple' => true,
178 'label_block' => true,
179 'condition' => [
180 'product_by' => 'attribute',
181 ],
182 ]
183 );
184
185 $this->add_control(
186 'author_list',
187 [
188 'label' => esc_html__('Select Authors', 'shopengine'),
189 'type' => ShopEngine_Controls_Manager::AJAXSELECT2,
190 'options' => 'shopengine_ajaxselect2/product_authors',
191 'multiple' => true,
192 'label_block' => true,
193 'condition' => [
194 'product_by' => 'author',
195 ],
196 ]
197 );
198
199 $this->end_controls_section();
200
201 // SETTINGS - SECTION
202 $this->start_controls_section(
203 'settings',
204 [
205 'label' => esc_html__('Settings', 'shopengine'),
206 'tab' => Controls_Manager::TAB_CONTENT,
207 ]
208 );
209
210 // SETTINGS - BADGE
211 $this->add_control(
212 'badge_settings',
213 [
214 'label' => esc_html__('Badge', 'shopengine'),
215 'type' => Controls_Manager::HEADING,
216 'separator' => 'before',
217 ]
218 );
219
220 $this->add_control(
221 'show_sale',
222 [
223 'label' => esc_html__('Show Sale Badge?', 'shopengine'),
224 'type' => Controls_Manager::SWITCHER,
225 'label_on' => esc_html__('Yes', 'shopengine'),
226 'label_off' => esc_html__('No', 'shopengine'),
227 'return_value' => 'yes',
228 'default' => 'yes',
229 ]
230 );
231
232 $this->add_control(
233 'show_off',
234 [
235 'label' => esc_html__('Show Discount Percentage', 'shopengine'),
236 'type' => Controls_Manager::SWITCHER,
237 'label_on' => esc_html__('Yes', 'shopengine'),
238 'label_off' => esc_html__('No', 'shopengine'),
239 'return_value' => 'yes',
240 'default' => 'yes',
241 ]
242 );
243
244 $this->add_control(
245 'show_tag',
246 [
247 'label' => esc_html__('Show Tag', 'shopengine'),
248 'type' => Controls_Manager::SWITCHER,
249 'label_on' => esc_html__('Yes', 'shopengine'),
250 'label_off' => esc_html__('No', 'shopengine'),
251 'return_value' => 'yes',
252 'default' => 'yes',
253 ]
254 );
255
256 $this->add_control(
257 'show_stock_out_badge',
258 [
259 'label' => esc_html__('Show Stock Out Badge', 'shopengine'),
260 'type' => Controls_Manager::SWITCHER,
261 'label_on' => esc_html__('Yes', 'shopengine'),
262 'label_off' => esc_html__('No', 'shopengine'),
263 'return_value' => 'yes',
264 'default' => '',
265 ]
266 );
267
268 $this->add_control(
269 'out_of_stock_product_visibility',
270 [
271 'label' => esc_html__('Out of Stock Visibility', 'shopengine'),
272 'type' => Controls_Manager::SELECT,
273 'default' => 'default',
274 'options' => [
275 'default' => esc_html__('Default', 'shopengine'),
276 'show' => esc_html__('Show', 'shopengine'),
277 'hide' => esc_html__('Hide', 'shopengine')
278 ]
279 ]
280 );
281
282 $this->add_control(
283 'badge_position',
284 [
285 'label' => esc_html__('Badge Position', 'shopengine'),
286 'type' => Controls_Manager::CHOOSE,
287 'options' => [
288 'top-left' => [
289 'title' => esc_html__('Top Left', 'shopengine'),
290 'icon' => 'eicon-h-align-left',
291 ],
292 'top-right' => [
293 'title' => esc_html__('Top Right', 'shopengine'),
294 'icon' => 'eicon-h-align-right',
295 ],
296 'custom' => [
297 'title' => esc_html__('Custom', 'shopengine'),
298 'icon' => 'eicon-settings',
299 ],
300 ],
301 'default' => 'top-right',
302 'toggle' => false,
303 'conditions' => [
304 'relation' => 'or',
305 'terms' => [
306 [
307 'name' => 'show_sale',
308 'operator' => '===',
309 'value' => 'yes',
310 ],
311 [
312 'name' => 'show_off',
313 'operator' => '===',
314 'value' => 'yes',
315 ],
316 ],
317 ],
318 ]
319 );
320
321 $this->add_control(
322 'badge_position_x_axis',
323 [
324 'label' => esc_html__('Badge Position (X axis)', 'shopengine'),
325 'type' => Controls_Manager::SLIDER,
326 'size_units' => ['px', '%'],
327 'range' => [
328 'px' => [
329 'min' => 0,
330 'max' => 1000,
331 'step' => 1,
332 ],
333 '%' => [
334 'min' => 0,
335 'max' => 100,
336 ],
337 ],
338 'default' => [
339 'unit' => '%',
340 'size' => 4,
341 ],
342 'selectors' => [
343 '{{WRAPPER}} .product-tag-sale-badge' => 'left: {{SIZE}}{{UNIT}};',
344 '.rtl {{WRAPPER}} .product-tag-sale-badge' => 'right: {{SIZE}}{{UNIT}};',
345 ],
346 'condition' => [
347 'badge_position' => 'custom',
348 ],
349 ]
350 );
351
352 $this->add_control(
353 'badge_position_y_axis',
354 [
355 'label' => esc_html__('Badge Position (Y axis)', 'shopengine'),
356 'type' => Controls_Manager::SLIDER,
357 'size_units' => ['px', '%'],
358 'range' => [
359 'px' => [
360 'min' => 0,
361 'max' => 1000,
362 'step' => 1,
363 ],
364 '%' => [
365 'min' => 0,
366 'max' => 100,
367 ],
368 ],
369 'default' => [
370 'unit' => '%',
371 'size' => 4,
372 ],
373 'selectors' => [
374 '{{WRAPPER}} .product-tag-sale-badge' => 'top: {{SIZE}}{{UNIT}};',
375 ],
376 'condition' => [
377 'badge_position' => 'custom',
378 ],
379 ]
380 );
381
382 $this->add_control(
383 'badge_align',
384 [
385 'label' => esc_html__('Badge Align', 'shopengine'),
386 'type' => Controls_Manager::CHOOSE,
387 'options' => [
388 'vertical' => [
389 'title' => esc_html__('Vertical', 'shopengine'),
390 'icon' => 'eicon-navigation-vertical',
391 ],
392 'horizontal' => [
393 'title' => esc_html__('Horizontal', 'shopengine'),
394 'icon' => 'eicon-navigation-horizontal',
395 ],
396 ],
397 'default' => 'horizontal',
398 'toggle' => false,
399 'conditions' => [
400 'relation' => 'or',
401 'terms' => [
402 [
403 'name' => 'show_sale',
404 'operator' => '===',
405 'value' => 'yes',
406 ],
407 [
408 'name' => 'show_off',
409 'operator' => '===',
410 'value' => 'yes',
411 ],
412 ],
413 ],
414 ]
415 );
416
417 // SETTINGS - TITLE
418 $this->add_control(
419 'title_settings',
420 [
421 'label' => esc_html__('Title', 'shopengine'),
422 'type' => Controls_Manager::HEADING,
423 'separator' => 'before',
424 ]
425 );
426
427 $this->add_control(
428 'title_character',
429 [
430 'label' => esc_html__('Chracter to Show', 'shopengine'),
431 'description' => esc_html__('Chracter to show in the product title', 'shopengine'),
432 'type' => Controls_Manager::NUMBER,
433 'return_value' => 'yes',
434 'default' => 30,
435 ]
436 );
437
438 // SETTINGS - HOVER
439 $this->add_control(
440 'product_hover_overlay_settings',
441 [
442 'label' => esc_html__('Product Hover', 'shopengine'),
443 'type' => Controls_Manager::HEADING,
444 'separator' => 'before',
445 ]
446 );
447
448 $this->add_control(
449 'show_product_hover_overlay',
450 [
451 'label' => esc_html__('Show Product Hover', 'shopengine'),
452 'description' => esc_html__('Styling controls are in the style tab', 'shopengine'),
453 'type' => Controls_Manager::SWITCHER,
454 'label_on' => esc_html__('Yes', 'shopengine'),
455 'label_off' => esc_html__('No', 'shopengine'),
456 'default' => 'yes',
457 'return_value' => 'yes',
458 'render_type' => 'template',
459 'frontend_available' => true,
460 'selectors' => [
461 '{{WRAPPER}} .shopengine-product-list .overlay-add-to-cart' => 'display: flex;',
462 ],
463 ]
464 );
465
466 $this->add_control(
467 'product_hover_overlay_position',
468 [
469 'label' => esc_html__('Position', 'shopengine'),
470 'type' => Controls_Manager::CHOOSE,
471 'options' => [
472 'left' => [
473 'title' => esc_html__('Left', 'shopengine'),
474 'icon' => 'eicon-h-align-left',
475 ],
476 'right' => [
477 'title' => esc_html__('Right', 'shopengine'),
478 'icon' => 'eicon-h-align-right',
479 ],
480 'bottom' => [
481 'title' => esc_html__('Bottom', 'shopengine'),
482 'icon' => 'eicon-v-align-bottom',
483 ],
484 'center' => [
485 'title' => esc_html__('Center', 'shopengine'),
486 'icon' => 'eicon-h-align-center',
487 ],
488 ],
489 'default' => 'bottom',
490 'toggle' => false,
491 'frontend_available' => true,
492 'condition' => [
493 'show_product_hover_overlay' => 'yes',
494 ],
495 ]
496 );
497
498 // SETTINGS - PRICE
499 $this->add_control(
500 'price_settings',
501 [
502 'label' => esc_html__('Price', 'shopengine'),
503 'type' => Controls_Manager::HEADING,
504 'separator' => 'before',
505 ]
506 );
507
508 $this->add_control(
509 'price_alignment',
510 [
511 'label' => esc_html__('Alignment', 'shopengine'),
512 'type' => Controls_Manager::SELECT,
513 'default' => 'flex-start',
514 'options' => [
515 'flex-start' => esc_html__('Start', 'shopengine'),
516 'center' => esc_html__('Center', 'shopengine'),
517 'flex-end' => esc_html__('End', 'shopengine'),
518 'space-around' => esc_html__('Space Around', 'shopengine'),
519 'space-between' => esc_html__('Space Between', 'shopengine'),
520 'space-evenly' => esc_html__('Space Evenly', 'shopengine'),
521 ],
522 'selectors' => [
523 '{{WRAPPER}} .shopengine-product-list .product-price .price' => 'justify-content: {{VALUE}}',
524 ],
525 ]
526 );
527
528 $this->add_control(
529 'show_off_price_tag',
530 [
531 'label' => esc_html__('Show Off Tag', 'shopengine'),
532 'description' => esc_html__('Styling controls are in the style tab', 'shopengine'),
533 'type' => Controls_Manager::SWITCHER,
534 'label_on' => esc_html__('Yes', 'shopengine'),
535 'label_off' => esc_html__('No', 'shopengine'),
536 'return_value' => 'yes',
537 'default' => 'yes',
538 'selectors' => [
539 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'display: inline-block;',
540 ],
541 ]
542 );
543
544 // SETTINGS - CATEGORY
545 $this->add_control(
546 'category_settings',
547 [
548 'label' => esc_html__('Category', 'shopengine'),
549 'type' => Controls_Manager::HEADING,
550 'separator' => 'before',
551 ]
552 );
553
554 $this->add_control(
555 'show_category',
556 [
557 'label' => esc_html__('Show Category?', 'shopengine'),
558 'type' => Controls_Manager::SWITCHER,
559 'label_on' => esc_html__('Yes', 'shopengine'),
560 'label_off' => esc_html__('No', 'shopengine'),
561 'return_value' => 'yes',
562 'default' => 'yes',
563 'selectors' => [
564 '{{WRAPPER}} .shopengine-product-list .product-category' => 'display: inline-block;',
565 ],
566 ]
567 );
568
569 $this->add_control(
570 'category_limit',
571 [
572 'label' => esc_html__('Category Limit', 'shopengine'),
573 'type' => Controls_Manager::NUMBER,
574 'default' => 1,
575 'min' => 1,
576 'max' => 100,
577 'step' => 1,
578 'condition' => [
579 'show_category' => 'yes',
580 ],
581 ]
582 );
583
584 // SETTINGS - RATTING
585 $this->add_control(
586 'show_rating',
587 [
588 'label' => esc_html__('Show Rating?', 'shopengine'),
589 'description' => esc_html__('Styling controls are in the style tab', 'shopengine'),
590 'type' => Controls_Manager::SWITCHER,
591 'label_on' => esc_html__('Yes', 'shopengine'),
592 'label_off' => esc_html__('No', 'shopengine'),
593 'default' => 'yes',
594 'selectors' => [
595 '{{WRAPPER}} .shopengine-product-list .product-rating' => 'display: block;',
596 ],
597 'separator' => 'before',
598 ]
599 );
600
601 $this->end_controls_section();
602
603 // STYLE - PRODUCT WRAP
604 $this->start_controls_section(
605 'product_wrap_style_section',
606 [
607 'label' => esc_html__('Product Wrap', 'shopengine'),
608 'tab' => Controls_Manager::TAB_STYLE,
609 ]
610 );
611
612 $this->add_responsive_control(
613 'product_content_align',
614 [
615 'label' => esc_html__('Content Alignment', 'shopengine'),
616 'type' => Controls_Manager::CHOOSE,
617 'options' => [
618 'left' => [
619 'description' => esc_html__('Left', 'shopengine'),
620 'icon' => 'eicon-text-align-left',
621 ],
622 'center' => [
623 'description' => esc_html__('Center', 'shopengine'),
624 'icon' => 'eicon-text-align-center',
625 ],
626 'right' => [
627 'description' => esc_html__('Right', 'shopengine'),
628 'icon' => 'eicon-text-align-right',
629 ],
630 ],
631 'prefix_class' => 'elementor-align-',
632 'selectors_dictionary' => [
633 'left' => 'text-align :left; align-items: flex-start;',
634 'right' => 'text-align :right; align-items: flex-end;',
635 'center' => 'text-align :center; align-items: center;'
636 ],
637 'selectors' => [
638 '{{WRAPPER}} .product-list-grid .shopengine-single-product-item' => '{{VALUE}};',
639 '{{WRAPPER}} .product-list-view .shopengine-single-product-item .list-view-wrapper-contents' => '{{VALUE}};',
640 '.rtl {{WRAPPER}}.elementor-align-left .shopengine-single-product-item' => 'text-align: right;',
641 '.rtl {{WRAPPER}}.elementor-align-right .shopengine-single-product-item' => 'text-align: left;',
642 ],
643 ]
644 );
645
646 $this->add_control(
647 'product_item_bg_color',
648 [
649 'label' => esc_html__('Background Color', 'shopengine'),
650 'type' => Controls_Manager::COLOR,
651 'default' => '#fff',
652 'alpha' => false,
653 'selectors' => [
654 '{{WRAPPER}} .shopengine-single-product-item' => 'background-color: {{VALUE}};',
655 ],
656 ]
657 );
658
659 $this->add_responsive_control(
660 'list_view_product_width',
661 [
662 'label' => esc_html__('List View Product Width(%)', 'shopengine'),
663 'type' => Controls_Manager::SLIDER,
664 'size_units' => ['%','px'],
665 'range' => [
666 '%' => [
667 'min' => 0,
668 'max' => 100
669 ],
670 'px' => [
671 'min' => 0,
672 'max' => 1000
673 ]
674 ],
675 'default' => [
676 'unit' => '%',
677 'size' => '100',
678 ],
679 'selectors' => [
680 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view' => 'max-width: {{SIZE}}{{UNIT}}',
681 ],
682 'condition' => [
683 'product_view_style' => 'list'
684 ]
685 ]
686 );
687
688 $this->add_responsive_control(
689 'list_view_product_height',
690 [
691 'label' => esc_html__('List View Product Height (px)', 'shopengine'),
692 'type' => Controls_Manager::SLIDER,
693 'size_units' => ['px'],
694 'range' => [
695 'px' => [
696 'min' => 0,
697 'max' => 1000
698 ],
699 ],
700 'default' => [
701 'unit' => 'px',
702 'size' => '400',
703 ],
704 'selectors' => [
705 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view .shopengine-single-product-item' => 'min-height: {{SIZE}}{{UNIT}}',
706 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view .shopengine-single-product-item .product-thumb' => 'height: {{SIZE}}{{UNIT}};flex-basis:{{SIZE}}{{UNIT}};',
707 ],
708 'condition' => [
709 'product_view_style' => 'list'
710 ]
711 ]
712 );
713
714 $this->add_responsive_control(
715 'product_item_column_gap',
716 [
717 'label' => esc_html__('Column Gap (px)', 'shopengine'),
718 'type' => Controls_Manager::SLIDER,
719 'size_units' => ['px'],
720 'range' => [
721 'px' => [
722 'min' => 0,
723 'max' => 200,
724 ],
725 ],
726 'default' => [
727 'unit' => 'px',
728 'size' => '20',
729 ],
730 'selectors' => [
731 '{{WRAPPER}} .shopengine-product-list .product-list-grid' => 'grid-column-gap: {{SIZE}}{{UNIT}}',
732 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view .shopengine-single-product-item' => 'gap: {{SIZE}}{{UNIT}}',
733 ],
734 ]
735 );
736
737 $this->add_responsive_control(
738 'product_item_row_gap',
739 [
740 'label' => esc_html__('Row Gap (px)', 'shopengine'),
741 'type' => Controls_Manager::SLIDER,
742 'size_units' => ['px'],
743 'range' => [
744 'px' => [
745 'min' => 0,
746 'max' => 200,
747 ],
748 ],
749 'default' => [
750 'unit' => 'px',
751 'size' => '20',
752 ],
753 'selectors' => [
754 '{{WRAPPER}} .shopengine-product-list .product-list-grid' => 'grid-row-gap: {{SIZE}}{{UNIT}}',
755 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view' => 'grid-row-gap: {{SIZE}}{{UNIT}}',
756 ],
757 ]
758 );
759
760 $this->add_responsive_control(
761 'product_wrap_padding',
762 [
763 'label' => esc_html__('Padding (px)', 'shopengine'),
764 'type' => Controls_Manager::DIMENSIONS,
765 'size_units' => ['px'],
766 'default' => [
767 'top' => '15',
768 'right' => '15',
769 'bottom' => '15',
770 'left' => '15',
771 'unit' => 'px',
772 'isLinked' => true,
773 ],
774 'selectors' => [
775 '{{WRAPPER}} .shopengine-single-product-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
776 '.rtl {{WRAPPER}} .shopengine-single-product-item' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
777 ],
778 'separator' => 'before',
779 ]
780 );
781
782 $this->add_group_control(
783 Group_Control_Border::get_type(),
784 [
785 'name' => 'product_wrap_border',
786 'label' => esc_html__('Border', 'shopengine'),
787 'selector' => '{{WRAPPER}} .shopengine-single-product-item',
788 'fields_options' => [
789 'width' => [
790 'selectors' => [
791 '{{WRAPPER}} .shopengine-single-product-item' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
792 '.rtl {{WRAPPER}} .shopengine-single-product-item' => 'border-width: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
793 ],
794 ]
795 ],
796 'separator' => 'before',
797 ]
798 );
799
800 $this->end_controls_section();
801
802 // STYLE - PRODUCT IMAGE
803 $this->start_controls_section(
804 'product_image_style',
805 [
806 'label' => esc_html__('Product Image', 'shopengine'),
807 'tab' => Controls_Manager::TAB_STYLE,
808 ]
809 );
810
811 $this->add_control(
812 'product_image_bg',
813 [
814 'label' => esc_html__('Image Background', 'shopengine'),
815 'type' => Controls_Manager::COLOR,
816 'alpha' => false,
817 'selectors' => [
818 '{{WRAPPER}} .product-thumb' => 'background: {{VALUE}}',
819 ],
820 ]
821 );
822
823 $this->add_responsive_control(
824 'product_image_margin',
825 [
826 'label' => esc_html__('Margin (px)', 'shopengine'),
827 'type' => Controls_Manager::DIMENSIONS,
828 'size_units' => ['px'],
829 'default' => [
830 'top' => '0',
831 'right' => '0',
832 'bottom' => '15',
833 'left' => '0',
834 'unit' => 'px',
835 'isLinked' => false,
836 ],
837 'selectors' => [
838 '{{WRAPPER}} .product-thumb' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
839 '.rtl {{WRAPPER}} .product-thumb' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
840 ],
841 'separator' => 'before',
842 ]
843 );
844
845 $this->end_controls_section();
846
847 // STYLE - PRODUCT BADGE
848 $this->start_controls_section(
849 'product_badge_style_section',
850 [
851 'label' => esc_html__('Product Badge', 'shopengine'),
852 'tab' => Controls_Manager::TAB_STYLE,
853 'conditions' => [
854 'relation' => 'or',
855 'terms' => [
856 [
857 'name' => 'show_sale',
858 'operator' => '===',
859 'value' => 'yes',
860 ],
861 [
862 'name' => 'show_off',
863 'operator' => '===',
864 'value' => 'yes',
865 ],
866 ],
867 ],
868 ]
869 );
870
871 $this->add_group_control(
872 Group_Control_Typography::get_type(),
873 [
874 'name' => 'product_badge_typography',
875 'label' => esc_html__('Typography', 'shopengine'),
876 'selector' => '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link',
877 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
878 'fields_options' => [
879 'typography' => [
880 'default' => 'custom',
881 ],
882 'font_weight' => [
883 'default' => '700',
884 ],
885 'font_size' => [
886 'default' => [
887 'size' => '12',
888 'unit' => 'px',
889 ],
890 'label' => esc_html__('Font Size (px)', 'shopengine'),
891 'size_units' => ['px'],
892 ],
893 'line_height' => [
894 'default' => [
895 'size' => '24',
896 'unit' => 'px',
897 ],
898 'size_units' => ['px'], // enable only px
899 'responsive' => false,
900 ],
901 ],
902 ]
903 );
904
905 $this->add_control(
906 'product_badge_color',
907 [
908 'label' => esc_html__('Color', 'shopengine'),
909 'type' => Controls_Manager::COLOR,
910 'default' => '#ffffff',
911 'alpha' => false,
912 'selectors' => [
913 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'color: {{VALUE}}',
914 ],
915 ]
916 );
917
918 $this->add_control(
919 'product_badge_bg',
920 [
921 'label' => esc_html__('Badge Background', 'shopengine'),
922 'type' => Controls_Manager::COLOR,
923 'alpha' => false,
924 'default' => '#f03d3f',
925 'selectors' => [
926 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'background: {{VALUE}}',
927 ],
928 ]
929 );
930
931 $this->add_control(
932 'product_percentage_badge_bg',
933 [
934 'label' => esc_html__('Percentage Badge Background', 'shopengine'),
935 'type' => Controls_Manager::COLOR,
936 'alpha' => false,
937 'selectors' => [
938 '{{WRAPPER}} .product-tag-sale-badge .off' => 'background: {{VALUE}}',
939 ],
940 'condition' => [
941 'show_off' => 'yes',
942 ],
943 ]
944 );
945
946 $this->add_control(
947 'product_tag_badge_bg',
948 [
949 'label' => esc_html__('Tag Badge Background', 'shopengine'),
950 'type' => Controls_Manager::COLOR,
951 'alpha' => false,
952 'selectors' => [
953 '{{WRAPPER}} .product-tag-sale-badge .tag a' => 'background: {{VALUE}}',
954 ],
955 'condition' => [
956 'show_tag' => 'yes',
957 ],
958 ]
959 );
960
961 $this->add_control(
962 'stock_out_badge_bg',
963 [
964 'label' => esc_html__('Stock Out Badge Background', 'shopengine'),
965 'type' => Controls_Manager::COLOR,
966 'alpha' => false,
967 'selectors' => [
968 '{{WRAPPER}} .product-tag-sale-badge .out-of-stock' => 'background: {{VALUE}}',
969 ],
970 'condition' => [
971 'show_stock_out_badge' => 'yes',
972 ],
973 ]
974 );
975
976 $this->add_responsive_control(
977 'product_badge_space_between',
978 [
979 'label' => esc_html__('Space In-between Badge (px)', 'shopengine'),
980 'type' => Controls_Manager::SLIDER,
981 'size_units' => ['px'],
982 'range' => [
983 'px' => [
984 'min' => 0,
985 'max' => 200,
986 ],
987 ],
988 'default' => [
989 'unit' => 'px',
990 'size' => 5,
991 ],
992 'selectors' => [
993 '{{WRAPPER}} .product-tag-sale-badge ul' => 'display:flex;gap: {{SIZE}}{{UNIT}};',
994 '{{WRAPPER}} .product-tag-sale-badge.align-vertical ul li:not(:last-child)' => 'gap: {{SIZE}}{{UNIT}} 0;',
995 ],
996 'separator' => 'before',
997 ]
998 );
999
1000 $this->add_responsive_control(
1001 'product_badge_padding',
1002 [
1003 'label' => esc_html__('Padding (px)', 'shopengine'),
1004 'type' => Controls_Manager::DIMENSIONS,
1005 'size_units' => ['px'],
1006 'default' => [
1007 'top' => '0',
1008 'right' => '10',
1009 'bottom' => '0',
1010 'left' => '10',
1011 'unit' => 'px',
1012 'isLinked' => false,
1013 ],
1014 'selectors' => [
1015 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1016 '.rtl {{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1017 ],
1018 'separator' => 'before',
1019 ]
1020 );
1021
1022 $this->add_responsive_control(
1023 'product_badge_margin',
1024 [
1025 'label' => esc_html__('Margin (px)', 'shopengine'),
1026 'type' => Controls_Manager::DIMENSIONS,
1027 'size_units' => ['px'],
1028 'selectors' => [
1029 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1030 '.rtl {{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1031 ],
1032 'separator' => 'before',
1033 ]
1034 );
1035
1036 $this->add_group_control(
1037 Group_Control_Border::get_type(),
1038 [
1039 'name' => 'badge_border',
1040 'label' => esc_html__('Border', 'shopengine'),
1041 'selector' => '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link ,{{WRAPPER}} .product-tag-sale-badge .no-link.out-of-stock',
1042 'fields_options' => [
1043 'width' => [
1044 'selectors' => [
1045 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link ,{{WRAPPER}} .product-tag-sale-badge .no-link.out-of-stock' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1046 '.rtl {{WRAPPER}} .product-tag-sale-badge .tag a,.rtl {{WRAPPER}} .product-tag-sale-badge .no-link ,.rtl {{WRAPPER}} .product-tag-sale-badge .no-link.out-of-stock' => 'border-width: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1047 ],
1048 ]
1049 ],
1050 'separator' => 'before',
1051 ]
1052 );
1053
1054 $this->add_responsive_control(
1055 'badge_border_radius',
1056 [
1057 'label' => esc_html__('Border Radius', 'shopengine'),
1058 'type' => Controls_Manager::DIMENSIONS,
1059 'size_units' => ['px'],
1060 'default' => [
1061 'top' => '3',
1062 'right' => '3',
1063 'bottom' => '3',
1064 'left' => '3',
1065 ],
1066 'selectors' => [
1067 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1068 '.rtl {{WRAPPER}} .product-tag-sale-badge .tag a,.rtl {{WRAPPER}} .product-tag-sale-badge .no-link' => 'border-radius: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1069 ],
1070 ]
1071 );
1072
1073 $this->end_controls_section();
1074
1075 // STYLE - PRODUCT CATEGORY
1076 $this->start_controls_section(
1077 'product_category_style_section',
1078 [
1079 'label' => esc_html__('Product Category', 'shopengine'),
1080 'tab' => Controls_Manager::TAB_STYLE,
1081 'condition' => [
1082 'show_category' => 'yes',
1083 ],
1084 ]
1085 );
1086
1087 $this->add_group_control(
1088 Group_Control_Typography::get_type(),
1089 [
1090 'name' => 'product_category_typography',
1091 'label' => esc_html__('Typography', 'shopengine'),
1092 'selector' => '{{WRAPPER}} .product-category ul li a',
1093 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1094 'fields_options' => [
1095 'typography' => [
1096 'default' => 'custom',
1097 ],
1098 'font_weight' => [
1099 'default' => '400',
1100 ],
1101 'font_size' => [
1102 'default' => [
1103 'size' => '13',
1104 'unit' => 'px',
1105 ],
1106 'label' => esc_html__('Font Size (px)', 'shopengine'),
1107 'size_units' => ['px'],
1108 ],
1109 'line_height' => [
1110 'default' => [
1111 'size' => '20',
1112 'unit' => 'px',
1113 ],
1114 'size_units' => ['px'], // enable only px
1115 'responsive' => false,
1116 ],
1117 ],
1118 'separator' => 'after',
1119 ]
1120 );
1121
1122 $this->start_controls_tabs(
1123 'product_category_tabs'
1124 );
1125
1126 $this->start_controls_tab(
1127 'product_category_normal_tab',
1128 [
1129 'label' => esc_html__('Normal', 'shopengine'),
1130 ]
1131 );
1132
1133 $this->add_control(
1134 'product_category_color',
1135 [
1136 'label' => esc_html__('Color', 'shopengine'),
1137 'type' => Controls_Manager::COLOR,
1138 'default' => '#858585',
1139 'alpha' => false,
1140 'selectors' => [
1141 '{{WRAPPER}} .product-category ul li a' => 'color: {{VALUE}};',
1142 ],
1143 ]
1144 );
1145
1146 $this->end_controls_tab();
1147
1148 $this->start_controls_tab(
1149 'product_category_hover_tab',
1150 [
1151 'label' => esc_html__('Hover', 'shopengine'),
1152 ]
1153 );
1154
1155 $this->add_control(
1156 'product_category_hover_color',
1157 [
1158 'label' => esc_html__('Color', 'shopengine'),
1159 'type' => Controls_Manager::COLOR,
1160 'default' => '#F03D3F',
1161 'alpha' => false,
1162 'selectors' => [
1163 '{{WRAPPER}} .product-category ul li a:hover' => 'color: {{VALUE}};',
1164 ],
1165 ]
1166 );
1167
1168 $this->end_controls_tab();
1169 $this->end_controls_tabs();
1170
1171 $this->add_responsive_control(
1172 'product_category_padding',
1173 [
1174 'label' => esc_html__('Padding (px)', 'shopengine'),
1175 'type' => Controls_Manager::DIMENSIONS,
1176 'size_units' => ['px'],
1177 'default' => [
1178 'top' => '0',
1179 'right' => '0',
1180 'bottom' => '5',
1181 'left' => '0',
1182 'unit' => 'px',
1183 'isLinked' => false,
1184 ],
1185 'selectors' => [
1186 '{{WRAPPER}} .product-category' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1187 '.rtl {{WRAPPER}} .product-category' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1188 ],
1189 'separator' => 'before',
1190 ]
1191 );
1192
1193 $this->end_controls_section();
1194
1195 // STYLE - PRODUCT TITLE
1196 $this->start_controls_section(
1197 'product_title_style_section',
1198 [
1199 'label' => esc_html__('Product Title', 'shopengine'),
1200 'tab' => Controls_Manager::TAB_STYLE,
1201 ]
1202 );
1203
1204 $this->add_group_control(
1205 Group_Control_Typography::get_type(),
1206 [
1207 'name' => 'product_title_typography',
1208 'label' => esc_html__('Typography', 'shopengine'),
1209 'selector' => '{{WRAPPER}} .product-title',
1210 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1211 'fields_options' => [
1212 'typography' => [
1213 'default' => 'custom',
1214 ],
1215 'font_weight' => [
1216 'default' => '400',
1217 ],
1218 'font_size' => [
1219 'default' => [
1220 'size' => '15',
1221 'unit' => 'px',
1222 ],
1223 'label' => esc_html__('Font Size (px)', 'shopengine'),
1224 'size_units' => ['px'],
1225 ],
1226 'line_height' => [
1227 'default' => [
1228 'size' => '18',
1229 'unit' => 'px',
1230 ],
1231 'size_units' => ['px'], // enable only px
1232 'responsive' => false,
1233 ],
1234 ],
1235 ]
1236 );
1237
1238 $this->start_controls_tabs(
1239 'product_title_color_tabs'
1240 );
1241
1242 $this->start_controls_tab(
1243 'product_title_color_normal_tab',
1244 [
1245 'label' => esc_html__('Normal', 'shopengine'),
1246 ]
1247 );
1248
1249 $this->add_control(
1250 'product_title_color',
1251 [
1252 'label' => esc_html__('Color', 'shopengine'),
1253 'type' => Controls_Manager::COLOR,
1254 'default' => '#101010',
1255 'alpha' => false,
1256 'selectors' => [
1257 '{{WRAPPER}} .product-title a' => 'color: {{VALUE}};',
1258 ],
1259 ]
1260 );
1261
1262 $this->end_controls_tab();
1263
1264 $this->start_controls_tab(
1265 'product_title_color_hover_tab',
1266 [
1267 'label' => esc_html__('Hover', 'shopengine'),
1268 ]
1269 );
1270
1271 $this->add_control(
1272 'product_title_hover_color',
1273 [
1274 'label' => esc_html__('Color', 'shopengine'),
1275 'type' => Controls_Manager::COLOR,
1276 'default' => '#F03D3F',
1277 'alpha' => false,
1278 'selectors' => [
1279 '{{WRAPPER}} .product-title a:hover' => 'color: {{VALUE}};',
1280 ],
1281 ]
1282 );
1283
1284 $this->end_controls_tab();
1285 $this->end_controls_tabs();
1286
1287 $this->add_responsive_control(
1288 'product_title_padding',
1289 [
1290 'label' => esc_html__('Padding (px)', 'shopengine'),
1291 'type' => Controls_Manager::DIMENSIONS,
1292 'size_units' => ['px'],
1293 'default' => [
1294 'top' => '0',
1295 'right' => '0',
1296 'bottom' => '8',
1297 'left' => '0',
1298 'unit' => 'px',
1299 'isLinked' => false,
1300 ],
1301 'selectors' => [
1302 '{{WRAPPER}} .product-title' => 'margin: 0; padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1303 '.rtl {{WRAPPER}} .product-title' => 'margin: 0; padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1304 ],
1305 'separator' => 'before',
1306 ]
1307 );
1308
1309 $this->end_controls_section();
1310
1311 // STYLE - PRODUCT RATING
1312 $this->start_controls_section(
1313 'product_rating_style_section',
1314 [
1315 'label' => esc_html__('Product Rating', 'shopengine'),
1316 'tab' => Controls_Manager::TAB_STYLE,
1317 'condition' => [
1318 'show_rating' => 'yes',
1319 ],
1320 ]
1321 );
1322
1323 $this->add_control(
1324 'product_rating_star_size',
1325 [
1326 'label' => esc_html__('Rating Star Size', 'shopengine'),
1327 'type' => Controls_Manager::SLIDER,
1328 'size_units' => ['px'],
1329 'range' => [
1330 'px' => [
1331 'min' => 0,
1332 'max' => 100,
1333 'step' => 1,
1334 ],
1335 ],
1336 'default' => [
1337 'unit' => 'px',
1338 'size' => 12,
1339 ],
1340 'selectors' => [
1341 '{{WRAPPER}} .product-rating .star-rating' => 'font-size: {{SIZE}}{{UNIT}};',
1342 ],
1343 'separator' => 'before',
1344 ]
1345 );
1346
1347 $this->add_control(
1348 'product_rating_star_color',
1349 [
1350 'label' => esc_html__('Star Color', 'shopengine'),
1351 'type' => Controls_Manager::COLOR,
1352 'default' => '#fec42d',
1353 'alpha' => false,
1354 'selectors' => [
1355 '{{WRAPPER}} .product-rating .star-rating span::before' => 'color: {{VALUE}};',
1356 ],
1357 ]
1358 );
1359
1360 $this->add_control(
1361 'product_rating_empty_star_color',
1362 [
1363 'label' => esc_html__('Empty Star Color', 'shopengine'),
1364 'type' => Controls_Manager::COLOR,
1365 'default' => '#fec42d',
1366 'alpha' => false,
1367 'selectors' => [
1368 '{{WRAPPER}} .product-rating .star-rating::before' => 'color: {{VALUE}};',
1369 ],
1370 ]
1371 );
1372
1373 $this->add_control(
1374 'product_rating_count_color',
1375 [
1376 'label' => esc_html__('Count Color', 'shopengine'),
1377 'type' => Controls_Manager::COLOR,
1378 'default' => '#999999',
1379 'alpha' => false,
1380 'selectors' => [
1381 '{{WRAPPER}} .rating-count' => 'color: {{VALUE}}',
1382 ],
1383 ]
1384 );
1385
1386 $this->add_group_control(
1387 Group_Control_Typography::get_type(),
1388 [
1389 'name' => 'product_rating_count_typography',
1390 'label' => esc_html__('Count Typography', 'shopengine'),
1391 'selector' => '{{WRAPPER}} .rating-count',
1392 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1393 'fields_options' => [
1394 'typography' => [
1395 'default' => 'custom',
1396 ],
1397 'font_weight' => [
1398 'default' => '400',
1399 ],
1400 'font_size' => [
1401 'default' => [
1402 'size' => '12',
1403 'unit' => 'px',
1404 ],
1405 'label' => esc_html__('Font Size (px)', 'shopengine'),
1406 'size_units' => ['px'],
1407 ],
1408 'line_height' => [
1409 'default' => [
1410 'size' => '12',
1411 'unit' => 'px',
1412 ],
1413 'size_units' => ['px'], // enable only px
1414 'responsive' => false,
1415 ],
1416 ],
1417 ]
1418 );
1419
1420 $this->add_responsive_control(
1421 'product_rating_padding',
1422 [
1423 'label' => esc_html__('Padding (px)', 'shopengine'),
1424 'type' => Controls_Manager::DIMENSIONS,
1425 'size_units' => ['px'],
1426 'default' => [
1427 'top' => '0',
1428 'right' => '0',
1429 'bottom' => '20',
1430 'left' => '0',
1431 'unit' => 'px',
1432 'isLinked' => false,
1433 ],
1434 'selectors' => [
1435 '{{WRAPPER}} .product-rating' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1436 '.rtl {{WRAPPER}} .product-rating' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1437 ],
1438 'separator' => 'before',
1439 ]
1440 );
1441
1442 $this->end_controls_section();
1443
1444 // STYLE - PRODUCT PRICE
1445 $this->start_controls_section(
1446 'product_price_style_section',
1447 [
1448 'label' => esc_html__('Product Price', 'shopengine'),
1449 'tab' => Controls_Manager::TAB_STYLE,
1450 ]
1451 );
1452
1453 $this->add_control(
1454 'product_price_price_color',
1455 [
1456 'label' => esc_html__('Color', 'shopengine'),
1457 'type' => Controls_Manager::COLOR,
1458 'default' => '#101010',
1459 'alpha' => false,
1460 'selectors' => [
1461 '{{WRAPPER}} .product-price :is(.price, .amount, bdi)' => 'color: {{VALUE}};',
1462 ],
1463 ]
1464 );
1465
1466 $this->add_control(
1467 'product_price_sale_price_color',
1468 [
1469 'label' => esc_html__('Sale Color', 'shopengine'),
1470 'type' => Controls_Manager::COLOR,
1471 'alpha' => false,
1472 'default' => '#999999',
1473 'selectors' => [
1474 '{{WRAPPER}} .product-price .price del' => 'color: {{VALUE}};',
1475 ],
1476 ]
1477 );
1478
1479 $this->add_group_control(
1480 Group_Control_Typography::get_type(),
1481 [
1482 'name' => 'product_price_typography',
1483 'label' => esc_html__('Typography', 'shopengine'),
1484 'selector' => '{{WRAPPER}} .product-price .price',
1485 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1486 'fields_options' => [
1487 'typography' => [
1488 'default' => 'custom',
1489 ],
1490 'font_weight' => [
1491 'default' => '700',
1492 ],
1493 'font_size' => [
1494 'default' => [
1495 'size' => '16',
1496 'unit' => 'px',
1497 ],
1498 'label' => esc_html__('Font Size (px)', 'shopengine'),
1499 'size_units' => ['px'],
1500 ],
1501 'line_height' => [
1502 'default' => [
1503 'size' => '20',
1504 'unit' => 'px',
1505 ],
1506 'label' => esc_html__('Line Height (px)', 'shopengine'),
1507 'size_units' => ['px'], // enable only px
1508 'responsive' => false,
1509 ],
1510 ],
1511 ]
1512 );
1513
1514 $this->add_control(
1515 'product_price_space_between',
1516 [
1517 'label' => esc_html__('Space In-between Prices (px)', 'shopengine'),
1518 'type' => Controls_Manager::SLIDER,
1519 'size_units' => ['px'],
1520 'range' => [
1521 'px' => [
1522 'min' => 0,
1523 'max' => 200,
1524 'step' => 1,
1525 ],
1526 ],
1527 'default' => [
1528 'unit' => 'px',
1529 'size' => 5,
1530 ],
1531 'selectors' => [
1532 '{{WRAPPER}} .shopengine-product-list .product-price .price ins' => 'margin-right: {{SIZE}}{{UNIT}};',
1533 '.rtl {{WRAPPER}} .shopengine-product-list .product-price .price ins' => 'margin-left: {{SIZE}}{{UNIT}};',
1534 ],
1535
1536 ]
1537 );
1538
1539 $this->add_control(
1540 'product_price_discount_badge_style_section',
1541 [
1542 'label' => esc_html__('Price Discount Badge', 'shopengine'),
1543 'type' => Controls_Manager::HEADING,
1544 'separator' => 'before',
1545 'condition' => [
1546 'show_off_price_tag' => 'yes',
1547 ],
1548 ]
1549 );
1550
1551 $this->add_control(
1552 'product_price_discount_badge_color',
1553 [
1554 'label' => esc_html__('Color', 'shopengine'),
1555 'type' => Controls_Manager::COLOR,
1556 'default' => '#FFFFFF',
1557 'alpha' => false,
1558 'selectors' => [
1559 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'color: {{VALUE}};',
1560 ],
1561 'condition' => [
1562 'show_off_price_tag' => 'yes',
1563 ],
1564 ]
1565 );
1566
1567 $this->add_control(
1568 'product_price_discount_badge_bg_color',
1569 [
1570 'label' => esc_html__('Background', 'shopengine'),
1571 'type' => Controls_Manager::COLOR,
1572 'default' => '#F54F29',
1573 'alpha' => false,
1574 'selectors' => [
1575 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'background: {{VALUE}};',
1576 ],
1577 'condition' => [
1578 'show_off_price_tag' => 'yes',
1579 ],
1580 ]
1581 );
1582
1583 $this->add_group_control(
1584 Group_Control_Typography::get_type(),
1585 [
1586 'name' => 'product_price_discount_badge_typography',
1587 'label' => esc_html__('Typography', 'shopengine'),
1588 'description' => esc_html__('Typography for sale price and discount badge', 'shopengine'),
1589 'selector' => '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge',
1590 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1591 'fields_options' => [
1592 'typography' => [
1593 'default' => 'custom',
1594 'label' => esc_html__('Typography Sale and Discount', 'shopengine'),
1595 ],
1596 'font_weight' => [
1597 'default' => '700',
1598 ],
1599 'font_size' => [
1600 'default' => [
1601 'size' => '16',
1602 'unit' => 'px',
1603 ],
1604 'label' => esc_html__('Font Size (px)', 'shopengine'),
1605 'size_units' => ['px'],
1606 ],
1607 'line_height' => [
1608 'default' => [
1609 'size' => '24',
1610 'unit' => 'px',
1611 ],
1612 'label' => esc_html__('Line Height (px)', 'shopengine'),
1613 'size_units' => ['px'], // enable only px
1614 'responsive' => false,
1615 ],
1616 ],
1617 ]
1618 );
1619
1620 $this->add_responsive_control(
1621 'product_price_discount_badge_padding',
1622 [
1623 'label' => esc_html__('Badge Padding', 'shopengine'),
1624 'type' => Controls_Manager::DIMENSIONS,
1625 'size_units' => ['px'],
1626 'default' => [
1627 'top' => '0',
1628 'right' => '10',
1629 'bottom' => '0',
1630 'left' => '10',
1631 'unit' => 'px',
1632 'isLinked' => false,
1633 ],
1634 'selectors' => [
1635 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1636 '.rtl {{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1637 ],
1638 'condition' => [
1639 'show_off_price_tag' => 'yes',
1640 ],
1641 'separator' => 'before',
1642 ]
1643 );
1644
1645 $this->add_responsive_control(
1646 'product_price_discount_badge_margin',
1647 [
1648 'label' => esc_html__('Badge Margin', 'shopengine'),
1649 'type' => Controls_Manager::DIMENSIONS,
1650 'size_units' => ['px'],
1651 'default' => [
1652 'top' => '0',
1653 'right' => '0',
1654 'bottom' => '0',
1655 'left' => '5',
1656 'unit' => 'px',
1657 'isLinked' => false,
1658 ],
1659 'selectors' => [
1660 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1661 '.rtl {{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1662 ],
1663 'condition' => [
1664 'show_off_price_tag' => 'yes',
1665 ],
1666 'separator' => 'before',
1667 ]
1668 );
1669
1670 $this->add_responsive_control(
1671 'product_price_wrap_padding',
1672 [
1673 'label' => esc_html__('Wrap Padding (px)', 'shopengine'),
1674 'type' => Controls_Manager::DIMENSIONS,
1675 'size_units' => ['px'],
1676 'default' => [
1677 'top' => '0',
1678 'right' => '0',
1679 'bottom' => '15',
1680 'left' => '0',
1681 'unit' => 'px',
1682 'isLinked' => false,
1683 ],
1684 'selectors' => [
1685 '{{WRAPPER}} .product-price' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1686 '.rtl {{WRAPPER}} .product-price' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1687 ],
1688 'separator' => 'before',
1689 ]
1690 );
1691
1692 $this->end_controls_section();
1693
1694 // STYLE - PRODUCT HOVER
1695 $this->start_controls_section(
1696 'product_hover_overlay_style_section',
1697 [
1698 'label' => esc_html__('Product Hover', 'shopengine'),
1699 'tab' => Controls_Manager::TAB_STYLE,
1700 'condition' => [
1701 'show_product_hover_overlay' => 'yes',
1702 ],
1703 ]
1704 );
1705
1706 $this->start_controls_tabs(
1707 'product_hover_overlay_color_tabs'
1708 );
1709
1710 $this->start_controls_tab(
1711 'product_hover_overlay_color_normal_tab',
1712 [
1713 'label' => esc_html__('Normal', 'shopengine'),
1714 ]
1715 );
1716
1717 $this->add_control(
1718 'product_hover_overlay_color',
1719 [
1720 'label' => esc_html__('Color', 'shopengine'),
1721 'type' => Controls_Manager::COLOR,
1722 'default' => '#101010',
1723 'alpha' => false,
1724 'selectors' => [
1725 '{{WRAPPER}} .overlay-add-to-cart a::before' => 'color: {{VALUE}};',
1726 '{{WRAPPER}} .overlay-add-to-cart a::after' => 'color: {{VALUE}};',
1727 ],
1728 ]
1729 );
1730
1731 $this->add_control(
1732 'product_hover_overlay_bg_color',
1733 [
1734 'label' => esc_html__('Background Color', 'shopengine'),
1735 'type' => Controls_Manager::COLOR,
1736 'alpha' => false,
1737 'default' => '#ffffff',
1738 'selectors' => [
1739 '{{WRAPPER}} .overlay-add-to-cart a' => 'background: {{VALUE}} !important;',
1740 ],
1741 ]
1742 );
1743
1744 $this->end_controls_tab();
1745
1746 $this->start_controls_tab(
1747 'product_hover_overlay_color_hover_tab',
1748 [
1749 'label' => esc_html__('Hover', 'shopengine'),
1750 ]
1751 );
1752
1753 $this->add_control(
1754 'product_hover_overlay_hover_color',
1755 [
1756 'label' => esc_html__('Color', 'shopengine'),
1757 'type' => Controls_Manager::COLOR,
1758 'default' => '#F03D3F',
1759 'alpha' => false,
1760 'selectors' => [
1761 '{{WRAPPER}} .overlay-add-to-cart a.active::before' => 'color: {{VALUE}};',
1762 '{{WRAPPER}} .overlay-add-to-cart a.added::before' => 'color: {{VALUE}};',
1763 '{{WRAPPER}} .overlay-add-to-cart a.loading::after' => 'color: {{VALUE}};',
1764 '{{WRAPPER}} .overlay-add-to-cart a:hover::before' => 'color: {{VALUE}};',
1765 '{{WRAPPER}} .overlay-add-to-cart a:hover::after' => 'color: {{VALUE}};',
1766 ],
1767 ]
1768 );
1769
1770 $this->add_control(
1771 'product_hover_overlay_hover_bg_color',
1772 [
1773 'label' => esc_html__('Background Color', 'shopengine'),
1774 'type' => Controls_Manager::COLOR,
1775 'default' => '#ffffff',
1776 'alpha' => false,
1777 'selectors' => [
1778 '{{WRAPPER}} .overlay-add-to-cart a.active' => 'background: {{VALUE}} !important;',
1779 '{{WRAPPER}} .overlay-add-to-cart a:hover' => 'background: {{VALUE}} !important;',
1780 '{{WRAPPER}} .overlay-add-to-cart a:hover' => 'background: {{VALUE}} !important;',
1781 ],
1782 ]
1783 );
1784
1785 $this->end_controls_tab();
1786 $this->end_controls_tabs();
1787
1788 $this->add_responsive_control(
1789 'product_hover_overlay_font_size',
1790 [
1791 'label' => esc_html__('Font Size (px)', 'shopengine'),
1792 'type' => Controls_Manager::SLIDER,
1793 'size_units' => ['px'],
1794 'range' => [
1795 'px' => [
1796 'min' => 0,
1797 'max' => 200,
1798 ],
1799 ],
1800 'default' => [
1801 'unit' => 'px',
1802 'size' => 18,
1803 ],
1804 'selectors' => [
1805 '{{WRAPPER}} .overlay-add-to-cart a::before' => 'font-size: {{SIZE}}{{UNIT}};',
1806 '{{WRAPPER}} .overlay-add-to-cart a::after' => 'font-size: {{SIZE}}{{UNIT}};',
1807 ],
1808 'separator' => 'before',
1809 ]
1810 );
1811
1812 $this->add_responsive_control(
1813 'product_hover_overlay_padding',
1814 [
1815 'label' => esc_html__('Item Padding (px)', 'shopengine'),
1816 'type' => Controls_Manager::DIMENSIONS,
1817 'size_units' => ['px'],
1818 'default' => [
1819 'top' => '10',
1820 'right' => '22',
1821 'bottom' => '10',
1822 'left' => '22',
1823 'unit' => 'px',
1824 'isLinked' => false,
1825 ],
1826 'selectors' => [
1827 '{{WRAPPER}} .overlay-add-to-cart a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1828 '.rtl {{WRAPPER}} .overlay-add-to-cart a' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1829 ],
1830 'separator' => 'before',
1831 ]
1832 );
1833
1834 $this->add_responsive_control(
1835 'product_hover_overlay_item_space_between',
1836 [
1837 'label' => esc_html__('Space In-between Items (px)', 'shopengine'),
1838 'type' => Controls_Manager::SLIDER,
1839 'size_units' => ['px'],
1840 'range' => [
1841 'px' => [
1842 'min' => 0,
1843 'max' => 200,
1844 ],
1845 ],
1846 'default' => [
1847 'unit' => 'px',
1848 'size' => 0,
1849 ],
1850 'selectors' => [
1851 '{{WRAPPER}} .overlay-add-to-cart.position-bottom a:not(:last-child)' => 'margin-right: {{SIZE}}{{UNIT}};',
1852 '.rtl {{WRAPPER}} .overlay-add-to-cart.position-bottom a:not(:last-child)' => 'margin-left: {{SIZE}}{{UNIT}};',
1853 '{{WRAPPER}} .overlay-add-to-cart.position-left a:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
1854 '{{WRAPPER}} .overlay-add-to-cart.position-right a:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
1855 '{{WRAPPER}} .overlay-add-to-cart.position-center a:not(:nth-child(2n))' => 'margin-right: {{SIZE}}{{UNIT}};',
1856 '.rtl {{WRAPPER}} .overlay-add-to-cart.position-center a:not(:nth-child(2n))' => 'margin-left: {{SIZE}}{{UNIT}};',
1857 '{{WRAPPER}} .overlay-add-to-cart.position-center a:not(:nth-child(1), :nth-child(2))' => 'margin-top: {{SIZE}}{{UNIT}};',
1858 ],
1859 'separator' => 'before',
1860 ]
1861 );
1862
1863 $this->add_group_control(
1864 Group_Control_Border::get_type(),
1865 [
1866 'name' => 'product_hover_overlay_border',
1867 'label' => esc_html__('Border', 'shopengine'),
1868 'fields_options' => [
1869 'border' => [
1870 'default' => '',
1871 'selectors' => [
1872 '{{SELECTOR}} .overlay-add-to-cart' => 'border-style: {{VALUE}};',
1873 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-style: {{VALUE}};',
1874 ],
1875 ],
1876 'width' => [
1877 'label' => esc_html__('Border Width', 'shopengine'),
1878 'default' => [
1879 'top' => '0',
1880 'right' => '0',
1881 'bottom' => '0',
1882 'left' => '0',
1883 'isLinked' => true,
1884 ],
1885 'selectors' => [
1886 '{{SELECTOR}} .overlay-add-to-cart' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1887 '.rtl {{SELECTOR}} .overlay-add-to-cart' => 'border-width: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1888 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-width: 0 {{RIGHT}}{{UNIT}} 0 0;',
1889 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-width: 0 0 0 {{RIGHT}}{{UNIT}};',
1890 ],
1891 ],
1892 'color' => [
1893 'label' => esc_html__('Border Color', 'shopengine'),
1894 'default' => '#F2F2F2',
1895 'selectors' => [
1896 '{{SELECTOR}} .overlay-add-to-cart' => 'border-color: {{VALUE}};',
1897 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-color: {{VALUE}};',
1898 ],
1899 ],
1900 ],
1901 'separator' => 'before',
1902 ]
1903 );
1904
1905 $this->add_responsive_control(
1906 'product_hover_overlay_border_radius',
1907 [
1908 'label' => esc_html__('Border Radius (px)', 'shopengine'),
1909 'type' => Controls_Manager::DIMENSIONS,
1910 'size_units' => ['px'],
1911 'default' => [
1912 'top' => '5',
1913 'right' => '5',
1914 'bottom' => '0',
1915 'left' => '0',
1916 'unit' => 'px',
1917 'isLinked' => false,
1918 ],
1919 'selectors' => [
1920 '{{WRAPPER}} .overlay-add-to-cart' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1921 '.rtl {{WRAPPER}} .overlay-add-to-cart' => 'border-radius: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1922 ],
1923 'separator' => 'before',
1924 ]
1925 );
1926
1927 $this->add_responsive_control(
1928 'product_hover_overlay_margin',
1929 [
1930 'label' => esc_html__('Wrap Margin (px)', 'shopengine'),
1931 'type' => Controls_Manager::DIMENSIONS,
1932 'size_units' => ['px'],
1933 'default' => [
1934 'top' => '0',
1935 'right' => '0',
1936 'bottom' => '0',
1937 'left' => '0',
1938 'unit' => 'px',
1939 'isLinked' => false,
1940 ],
1941 'selectors' => [
1942 '{{WRAPPER}} .overlay-add-to-cart' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1943 '.rtl {{WRAPPER}} .overlay-add-to-cart' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1944 ],
1945 'separator' => 'before',
1946 ]
1947 );
1948
1949 $this->end_controls_section();
1950
1951
1952 /**
1953 * Section: Global Font
1954 */
1955 $this->start_controls_section(
1956 'shopengine_section_style_global',
1957 [
1958 'label' => esc_html__('Global Font', 'shopengine'),
1959 'tab' => Controls_Manager::TAB_STYLE,
1960 ]
1961 );
1962 $this->add_control(
1963 'shopengine_product_list_font_family',
1964 [
1965 'label' => esc_html__('Font Family', 'shopengine'),
1966 'description' => esc_html__('This font family is set for this specific widget.', 'shopengine'),
1967 'type' => Controls_Manager::FONT,
1968 'selectors' => [
1969 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link,
1970 {{WRAPPER}} .product-category ul li a,
1971 {{WRAPPER}} .product-title,
1972 {{WRAPPER}} .rating-count,
1973 {{WRAPPER}} .product-price .price,
1974 {{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'font-family: {{VALUE}};',
1975 ],
1976 ]
1977 );
1978 $this->end_controls_section();
1979 }
1980
1981 protected function screen() {
1982
1983 $settings = $this->get_settings_for_display();
1984
1985 extract($settings);
1986
1987 $tpl = Products::instance()->get_widget_template($this->get_name());
1988
1989 include $tpl;
1990 }
1991 }
1992