PluginProbe ʕ •ᴥ•ʔ
ShopEngine Elementor WooCommerce Builder Addon – All in One WooCommerce Solution / 4.9.2
ShopEngine Elementor WooCommerce Builder Addon – All in One WooCommerce Solution v4.9.2
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 6 days ago product-list-config.php 4 years ago product-list.php 6 days ago
product-list.php
1991 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 'frontend_available' => true,
459 'selectors' => [
460 '{{WRAPPER}} .shopengine-product-list .overlay-add-to-cart' => 'display: flex;',
461 ],
462 ]
463 );
464
465 $this->add_control(
466 'product_hover_overlay_position',
467 [
468 'label' => esc_html__('Position', 'shopengine'),
469 'type' => Controls_Manager::CHOOSE,
470 'options' => [
471 'left' => [
472 'title' => esc_html__('Left', 'shopengine'),
473 'icon' => 'eicon-h-align-left',
474 ],
475 'right' => [
476 'title' => esc_html__('Right', 'shopengine'),
477 'icon' => 'eicon-h-align-right',
478 ],
479 'bottom' => [
480 'title' => esc_html__('Bottom', 'shopengine'),
481 'icon' => 'eicon-v-align-bottom',
482 ],
483 'center' => [
484 'title' => esc_html__('Center', 'shopengine'),
485 'icon' => 'eicon-h-align-center',
486 ],
487 ],
488 'default' => 'bottom',
489 'toggle' => false,
490 'frontend_available' => true,
491 'condition' => [
492 'show_product_hover_overlay' => 'yes',
493 ],
494 ]
495 );
496
497 // SETTINGS - PRICE
498 $this->add_control(
499 'price_settings',
500 [
501 'label' => esc_html__('Price', 'shopengine'),
502 'type' => Controls_Manager::HEADING,
503 'separator' => 'before',
504 ]
505 );
506
507 $this->add_control(
508 'price_alignment',
509 [
510 'label' => esc_html__('Alignment', 'shopengine'),
511 'type' => Controls_Manager::SELECT,
512 'default' => 'flex-start',
513 'options' => [
514 'flex-start' => esc_html__('Start', 'shopengine'),
515 'center' => esc_html__('Center', 'shopengine'),
516 'flex-end' => esc_html__('End', 'shopengine'),
517 'space-around' => esc_html__('Space Around', 'shopengine'),
518 'space-between' => esc_html__('Space Between', 'shopengine'),
519 'space-evenly' => esc_html__('Space Evenly', 'shopengine'),
520 ],
521 'selectors' => [
522 '{{WRAPPER}} .shopengine-product-list .product-price .price' => 'justify-content: {{VALUE}}',
523 ],
524 ]
525 );
526
527 $this->add_control(
528 'show_off_price_tag',
529 [
530 'label' => esc_html__('Show Off Tag', 'shopengine'),
531 'description' => esc_html__('Styling controls are in the style tab', 'shopengine'),
532 'type' => Controls_Manager::SWITCHER,
533 'label_on' => esc_html__('Yes', 'shopengine'),
534 'label_off' => esc_html__('No', 'shopengine'),
535 'return_value' => 'yes',
536 'default' => 'yes',
537 'selectors' => [
538 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'display: inline-block;',
539 ],
540 ]
541 );
542
543 // SETTINGS - CATEGORY
544 $this->add_control(
545 'category_settings',
546 [
547 'label' => esc_html__('Category', 'shopengine'),
548 'type' => Controls_Manager::HEADING,
549 'separator' => 'before',
550 ]
551 );
552
553 $this->add_control(
554 'show_category',
555 [
556 'label' => esc_html__('Show Category?', 'shopengine'),
557 'type' => Controls_Manager::SWITCHER,
558 'label_on' => esc_html__('Yes', 'shopengine'),
559 'label_off' => esc_html__('No', 'shopengine'),
560 'return_value' => 'yes',
561 'default' => 'yes',
562 'selectors' => [
563 '{{WRAPPER}} .shopengine-product-list .product-category' => 'display: inline-block;',
564 ],
565 ]
566 );
567
568 $this->add_control(
569 'category_limit',
570 [
571 'label' => esc_html__('Category Limit', 'shopengine'),
572 'type' => Controls_Manager::NUMBER,
573 'default' => 1,
574 'min' => 1,
575 'max' => 100,
576 'step' => 1,
577 'condition' => [
578 'show_category' => 'yes',
579 ],
580 ]
581 );
582
583 // SETTINGS - RATTING
584 $this->add_control(
585 'show_rating',
586 [
587 'label' => esc_html__('Show Rating?', 'shopengine'),
588 'description' => esc_html__('Styling controls are in the style tab', 'shopengine'),
589 'type' => Controls_Manager::SWITCHER,
590 'label_on' => esc_html__('Yes', 'shopengine'),
591 'label_off' => esc_html__('No', 'shopengine'),
592 'default' => 'yes',
593 'selectors' => [
594 '{{WRAPPER}} .shopengine-product-list .product-rating' => 'display: block;',
595 ],
596 'separator' => 'before',
597 ]
598 );
599
600 $this->end_controls_section();
601
602 // STYLE - PRODUCT WRAP
603 $this->start_controls_section(
604 'product_wrap_style_section',
605 [
606 'label' => esc_html__('Product Wrap', 'shopengine'),
607 'tab' => Controls_Manager::TAB_STYLE,
608 ]
609 );
610
611 $this->add_responsive_control(
612 'product_content_align',
613 [
614 'label' => esc_html__('Content Alignment', 'shopengine'),
615 'type' => Controls_Manager::CHOOSE,
616 'options' => [
617 'left' => [
618 'description' => esc_html__('Left', 'shopengine'),
619 'icon' => 'eicon-text-align-left',
620 ],
621 'center' => [
622 'description' => esc_html__('Center', 'shopengine'),
623 'icon' => 'eicon-text-align-center',
624 ],
625 'right' => [
626 'description' => esc_html__('Right', 'shopengine'),
627 'icon' => 'eicon-text-align-right',
628 ],
629 ],
630 'prefix_class' => 'elementor-align-',
631 'selectors_dictionary' => [
632 'left' => 'text-align :left; align-items: flex-start;',
633 'right' => 'text-align :right; align-items: flex-end;',
634 'center' => 'text-align :center; align-items: center;'
635 ],
636 'selectors' => [
637 '{{WRAPPER}} .product-list-grid .shopengine-single-product-item' => '{{VALUE}};',
638 '{{WRAPPER}} .product-list-view .shopengine-single-product-item .list-view-wrapper-contents' => '{{VALUE}};',
639 '.rtl {{WRAPPER}}.elementor-align-left .shopengine-single-product-item' => 'text-align: right;',
640 '.rtl {{WRAPPER}}.elementor-align-right .shopengine-single-product-item' => 'text-align: left;',
641 ],
642 ]
643 );
644
645 $this->add_control(
646 'product_item_bg_color',
647 [
648 'label' => esc_html__('Background Color', 'shopengine'),
649 'type' => Controls_Manager::COLOR,
650 'default' => '#fff',
651 'alpha' => false,
652 'selectors' => [
653 '{{WRAPPER}} .shopengine-single-product-item' => 'background-color: {{VALUE}};',
654 ],
655 ]
656 );
657
658 $this->add_responsive_control(
659 'list_view_product_width',
660 [
661 'label' => esc_html__('List View Product Width(%)', 'shopengine'),
662 'type' => Controls_Manager::SLIDER,
663 'size_units' => ['%','px'],
664 'range' => [
665 '%' => [
666 'min' => 0,
667 'max' => 100
668 ],
669 'px' => [
670 'min' => 0,
671 'max' => 1000
672 ]
673 ],
674 'default' => [
675 'unit' => '%',
676 'size' => '100',
677 ],
678 'selectors' => [
679 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view' => 'max-width: {{SIZE}}{{UNIT}}',
680 ],
681 'condition' => [
682 'product_view_style' => 'list'
683 ]
684 ]
685 );
686
687 $this->add_responsive_control(
688 'list_view_product_height',
689 [
690 'label' => esc_html__('List View Product Height (px)', 'shopengine'),
691 'type' => Controls_Manager::SLIDER,
692 'size_units' => ['px'],
693 'range' => [
694 'px' => [
695 'min' => 0,
696 'max' => 1000
697 ],
698 ],
699 'default' => [
700 'unit' => 'px',
701 'size' => '400',
702 ],
703 'selectors' => [
704 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view .shopengine-single-product-item' => 'min-height: {{SIZE}}{{UNIT}}',
705 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view .shopengine-single-product-item .product-thumb' => 'height: {{SIZE}}{{UNIT}};flex-basis:{{SIZE}}{{UNIT}};',
706 ],
707 'condition' => [
708 'product_view_style' => 'list'
709 ]
710 ]
711 );
712
713 $this->add_responsive_control(
714 'product_item_column_gap',
715 [
716 'label' => esc_html__('Column Gap (px)', 'shopengine'),
717 'type' => Controls_Manager::SLIDER,
718 'size_units' => ['px'],
719 'range' => [
720 'px' => [
721 'min' => 0,
722 'max' => 200,
723 ],
724 ],
725 'default' => [
726 'unit' => 'px',
727 'size' => '20',
728 ],
729 'selectors' => [
730 '{{WRAPPER}} .shopengine-product-list .product-list-grid' => 'grid-column-gap: {{SIZE}}{{UNIT}}',
731 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view .shopengine-single-product-item' => 'gap: {{SIZE}}{{UNIT}}',
732 ],
733 ]
734 );
735
736 $this->add_responsive_control(
737 'product_item_row_gap',
738 [
739 'label' => esc_html__('Row Gap (px)', 'shopengine'),
740 'type' => Controls_Manager::SLIDER,
741 'size_units' => ['px'],
742 'range' => [
743 'px' => [
744 'min' => 0,
745 'max' => 200,
746 ],
747 ],
748 'default' => [
749 'unit' => 'px',
750 'size' => '20',
751 ],
752 'selectors' => [
753 '{{WRAPPER}} .shopengine-product-list .product-list-grid' => 'grid-row-gap: {{SIZE}}{{UNIT}}',
754 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view' => 'grid-row-gap: {{SIZE}}{{UNIT}}',
755 ],
756 ]
757 );
758
759 $this->add_responsive_control(
760 'product_wrap_padding',
761 [
762 'label' => esc_html__('Padding (px)', 'shopengine'),
763 'type' => Controls_Manager::DIMENSIONS,
764 'size_units' => ['px'],
765 'default' => [
766 'top' => '15',
767 'right' => '15',
768 'bottom' => '15',
769 'left' => '15',
770 'unit' => 'px',
771 'isLinked' => true,
772 ],
773 'selectors' => [
774 '{{WRAPPER}} .shopengine-single-product-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
775 '.rtl {{WRAPPER}} .shopengine-single-product-item' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
776 ],
777 'separator' => 'before',
778 ]
779 );
780
781 $this->add_group_control(
782 Group_Control_Border::get_type(),
783 [
784 'name' => 'product_wrap_border',
785 'label' => esc_html__('Border', 'shopengine'),
786 'selector' => '{{WRAPPER}} .shopengine-single-product-item',
787 'fields_options' => [
788 'width' => [
789 'selectors' => [
790 '{{WRAPPER}} .shopengine-single-product-item' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
791 '.rtl {{WRAPPER}} .shopengine-single-product-item' => 'border-width: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
792 ],
793 ]
794 ],
795 'separator' => 'before',
796 ]
797 );
798
799 $this->end_controls_section();
800
801 // STYLE - PRODUCT IMAGE
802 $this->start_controls_section(
803 'product_image_style',
804 [
805 'label' => esc_html__('Product Image', 'shopengine'),
806 'tab' => Controls_Manager::TAB_STYLE,
807 ]
808 );
809
810 $this->add_control(
811 'product_image_bg',
812 [
813 'label' => esc_html__('Image Background', 'shopengine'),
814 'type' => Controls_Manager::COLOR,
815 'alpha' => false,
816 'selectors' => [
817 '{{WRAPPER}} .product-thumb' => 'background: {{VALUE}}',
818 ],
819 ]
820 );
821
822 $this->add_responsive_control(
823 'product_image_margin',
824 [
825 'label' => esc_html__('Margin (px)', 'shopengine'),
826 'type' => Controls_Manager::DIMENSIONS,
827 'size_units' => ['px'],
828 'default' => [
829 'top' => '0',
830 'right' => '0',
831 'bottom' => '15',
832 'left' => '0',
833 'unit' => 'px',
834 'isLinked' => false,
835 ],
836 'selectors' => [
837 '{{WRAPPER}} .product-thumb' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
838 '.rtl {{WRAPPER}} .product-thumb' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
839 ],
840 'separator' => 'before',
841 ]
842 );
843
844 $this->end_controls_section();
845
846 // STYLE - PRODUCT BADGE
847 $this->start_controls_section(
848 'product_badge_style_section',
849 [
850 'label' => esc_html__('Product Badge', 'shopengine'),
851 'tab' => Controls_Manager::TAB_STYLE,
852 'conditions' => [
853 'relation' => 'or',
854 'terms' => [
855 [
856 'name' => 'show_sale',
857 'operator' => '===',
858 'value' => 'yes',
859 ],
860 [
861 'name' => 'show_off',
862 'operator' => '===',
863 'value' => 'yes',
864 ],
865 ],
866 ],
867 ]
868 );
869
870 $this->add_group_control(
871 Group_Control_Typography::get_type(),
872 [
873 'name' => 'product_badge_typography',
874 'label' => esc_html__('Typography', 'shopengine'),
875 'selector' => '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link',
876 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
877 'fields_options' => [
878 'typography' => [
879 'default' => 'custom',
880 ],
881 'font_weight' => [
882 'default' => '700',
883 ],
884 'font_size' => [
885 'default' => [
886 'size' => '12',
887 'unit' => 'px',
888 ],
889 'label' => esc_html__('Font Size (px)', 'shopengine'),
890 'size_units' => ['px'],
891 ],
892 'line_height' => [
893 'default' => [
894 'size' => '24',
895 'unit' => 'px',
896 ],
897 'size_units' => ['px'], // enable only px
898 'responsive' => false,
899 ],
900 ],
901 ]
902 );
903
904 $this->add_control(
905 'product_badge_color',
906 [
907 'label' => esc_html__('Color', 'shopengine'),
908 'type' => Controls_Manager::COLOR,
909 'default' => '#ffffff',
910 'alpha' => false,
911 'selectors' => [
912 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'color: {{VALUE}}',
913 ],
914 ]
915 );
916
917 $this->add_control(
918 'product_badge_bg',
919 [
920 'label' => esc_html__('Badge Background', 'shopengine'),
921 'type' => Controls_Manager::COLOR,
922 'alpha' => false,
923 'default' => '#f03d3f',
924 'selectors' => [
925 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'background: {{VALUE}}',
926 ],
927 ]
928 );
929
930 $this->add_control(
931 'product_percentage_badge_bg',
932 [
933 'label' => esc_html__('Percentage Badge Background', 'shopengine'),
934 'type' => Controls_Manager::COLOR,
935 'alpha' => false,
936 'selectors' => [
937 '{{WRAPPER}} .product-tag-sale-badge .off' => 'background: {{VALUE}}',
938 ],
939 'condition' => [
940 'show_off' => 'yes',
941 ],
942 ]
943 );
944
945 $this->add_control(
946 'product_tag_badge_bg',
947 [
948 'label' => esc_html__('Tag Badge Background', 'shopengine'),
949 'type' => Controls_Manager::COLOR,
950 'alpha' => false,
951 'selectors' => [
952 '{{WRAPPER}} .product-tag-sale-badge .tag a' => 'background: {{VALUE}}',
953 ],
954 'condition' => [
955 'show_tag' => 'yes',
956 ],
957 ]
958 );
959
960 $this->add_control(
961 'stock_out_badge_bg',
962 [
963 'label' => esc_html__('Stock Out Badge Background', 'shopengine'),
964 'type' => Controls_Manager::COLOR,
965 'alpha' => false,
966 'selectors' => [
967 '{{WRAPPER}} .product-tag-sale-badge .out-of-stock' => 'background: {{VALUE}}',
968 ],
969 'condition' => [
970 'show_stock_out_badge' => 'yes',
971 ],
972 ]
973 );
974
975 $this->add_responsive_control(
976 'product_badge_space_between',
977 [
978 'label' => esc_html__('Space In-between Badge (px)', 'shopengine'),
979 'type' => Controls_Manager::SLIDER,
980 'size_units' => ['px'],
981 'range' => [
982 'px' => [
983 'min' => 0,
984 'max' => 200,
985 ],
986 ],
987 'default' => [
988 'unit' => 'px',
989 'size' => 5,
990 ],
991 'selectors' => [
992 '{{WRAPPER}} .product-tag-sale-badge ul' => 'display:flex;gap: {{SIZE}}{{UNIT}};',
993 '{{WRAPPER}} .product-tag-sale-badge.align-vertical ul li:not(:last-child)' => 'gap: {{SIZE}}{{UNIT}} 0;',
994 ],
995 'separator' => 'before',
996 ]
997 );
998
999 $this->add_responsive_control(
1000 'product_badge_padding',
1001 [
1002 'label' => esc_html__('Padding (px)', 'shopengine'),
1003 'type' => Controls_Manager::DIMENSIONS,
1004 'size_units' => ['px'],
1005 'default' => [
1006 'top' => '0',
1007 'right' => '10',
1008 'bottom' => '0',
1009 'left' => '10',
1010 'unit' => 'px',
1011 'isLinked' => false,
1012 ],
1013 'selectors' => [
1014 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1015 '.rtl {{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1016 ],
1017 'separator' => 'before',
1018 ]
1019 );
1020
1021 $this->add_responsive_control(
1022 'product_badge_margin',
1023 [
1024 'label' => esc_html__('Margin (px)', 'shopengine'),
1025 'type' => Controls_Manager::DIMENSIONS,
1026 'size_units' => ['px'],
1027 'selectors' => [
1028 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1029 '.rtl {{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1030 ],
1031 'separator' => 'before',
1032 ]
1033 );
1034
1035 $this->add_group_control(
1036 Group_Control_Border::get_type(),
1037 [
1038 'name' => 'badge_border',
1039 'label' => esc_html__('Border', 'shopengine'),
1040 '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',
1041 'fields_options' => [
1042 'width' => [
1043 'selectors' => [
1044 '{{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}};',
1045 '.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}};',
1046 ],
1047 ]
1048 ],
1049 'separator' => 'before',
1050 ]
1051 );
1052
1053 $this->add_responsive_control(
1054 'badge_border_radius',
1055 [
1056 'label' => esc_html__('Border Radius', 'shopengine'),
1057 'type' => Controls_Manager::DIMENSIONS,
1058 'size_units' => ['px'],
1059 'default' => [
1060 'top' => '3',
1061 'right' => '3',
1062 'bottom' => '3',
1063 'left' => '3',
1064 ],
1065 'selectors' => [
1066 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1067 '.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}};',
1068 ],
1069 ]
1070 );
1071
1072 $this->end_controls_section();
1073
1074 // STYLE - PRODUCT CATEGORY
1075 $this->start_controls_section(
1076 'product_category_style_section',
1077 [
1078 'label' => esc_html__('Product Category', 'shopengine'),
1079 'tab' => Controls_Manager::TAB_STYLE,
1080 'condition' => [
1081 'show_category' => 'yes',
1082 ],
1083 ]
1084 );
1085
1086 $this->add_group_control(
1087 Group_Control_Typography::get_type(),
1088 [
1089 'name' => 'product_category_typography',
1090 'label' => esc_html__('Typography', 'shopengine'),
1091 'selector' => '{{WRAPPER}} .product-category ul li a',
1092 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1093 'fields_options' => [
1094 'typography' => [
1095 'default' => 'custom',
1096 ],
1097 'font_weight' => [
1098 'default' => '400',
1099 ],
1100 'font_size' => [
1101 'default' => [
1102 'size' => '13',
1103 'unit' => 'px',
1104 ],
1105 'label' => esc_html__('Font Size (px)', 'shopengine'),
1106 'size_units' => ['px'],
1107 ],
1108 'line_height' => [
1109 'default' => [
1110 'size' => '20',
1111 'unit' => 'px',
1112 ],
1113 'size_units' => ['px'], // enable only px
1114 'responsive' => false,
1115 ],
1116 ],
1117 'separator' => 'after',
1118 ]
1119 );
1120
1121 $this->start_controls_tabs(
1122 'product_category_tabs'
1123 );
1124
1125 $this->start_controls_tab(
1126 'product_category_normal_tab',
1127 [
1128 'label' => esc_html__('Normal', 'shopengine'),
1129 ]
1130 );
1131
1132 $this->add_control(
1133 'product_category_color',
1134 [
1135 'label' => esc_html__('Color', 'shopengine'),
1136 'type' => Controls_Manager::COLOR,
1137 'default' => '#858585',
1138 'alpha' => false,
1139 'selectors' => [
1140 '{{WRAPPER}} .product-category ul li a' => 'color: {{VALUE}};',
1141 ],
1142 ]
1143 );
1144
1145 $this->end_controls_tab();
1146
1147 $this->start_controls_tab(
1148 'product_category_hover_tab',
1149 [
1150 'label' => esc_html__('Hover', 'shopengine'),
1151 ]
1152 );
1153
1154 $this->add_control(
1155 'product_category_hover_color',
1156 [
1157 'label' => esc_html__('Color', 'shopengine'),
1158 'type' => Controls_Manager::COLOR,
1159 'default' => '#F03D3F',
1160 'alpha' => false,
1161 'selectors' => [
1162 '{{WRAPPER}} .product-category ul li a:hover' => 'color: {{VALUE}};',
1163 ],
1164 ]
1165 );
1166
1167 $this->end_controls_tab();
1168 $this->end_controls_tabs();
1169
1170 $this->add_responsive_control(
1171 'product_category_padding',
1172 [
1173 'label' => esc_html__('Padding (px)', 'shopengine'),
1174 'type' => Controls_Manager::DIMENSIONS,
1175 'size_units' => ['px'],
1176 'default' => [
1177 'top' => '0',
1178 'right' => '0',
1179 'bottom' => '5',
1180 'left' => '0',
1181 'unit' => 'px',
1182 'isLinked' => false,
1183 ],
1184 'selectors' => [
1185 '{{WRAPPER}} .product-category' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1186 '.rtl {{WRAPPER}} .product-category' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1187 ],
1188 'separator' => 'before',
1189 ]
1190 );
1191
1192 $this->end_controls_section();
1193
1194 // STYLE - PRODUCT TITLE
1195 $this->start_controls_section(
1196 'product_title_style_section',
1197 [
1198 'label' => esc_html__('Product Title', 'shopengine'),
1199 'tab' => Controls_Manager::TAB_STYLE,
1200 ]
1201 );
1202
1203 $this->add_group_control(
1204 Group_Control_Typography::get_type(),
1205 [
1206 'name' => 'product_title_typography',
1207 'label' => esc_html__('Typography', 'shopengine'),
1208 'selector' => '{{WRAPPER}} .product-title',
1209 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1210 'fields_options' => [
1211 'typography' => [
1212 'default' => 'custom',
1213 ],
1214 'font_weight' => [
1215 'default' => '400',
1216 ],
1217 'font_size' => [
1218 'default' => [
1219 'size' => '15',
1220 'unit' => 'px',
1221 ],
1222 'label' => esc_html__('Font Size (px)', 'shopengine'),
1223 'size_units' => ['px'],
1224 ],
1225 'line_height' => [
1226 'default' => [
1227 'size' => '18',
1228 'unit' => 'px',
1229 ],
1230 'size_units' => ['px'], // enable only px
1231 'responsive' => false,
1232 ],
1233 ],
1234 ]
1235 );
1236
1237 $this->start_controls_tabs(
1238 'product_title_color_tabs'
1239 );
1240
1241 $this->start_controls_tab(
1242 'product_title_color_normal_tab',
1243 [
1244 'label' => esc_html__('Normal', 'shopengine'),
1245 ]
1246 );
1247
1248 $this->add_control(
1249 'product_title_color',
1250 [
1251 'label' => esc_html__('Color', 'shopengine'),
1252 'type' => Controls_Manager::COLOR,
1253 'default' => '#101010',
1254 'alpha' => false,
1255 'selectors' => [
1256 '{{WRAPPER}} .product-title a' => 'color: {{VALUE}};',
1257 ],
1258 ]
1259 );
1260
1261 $this->end_controls_tab();
1262
1263 $this->start_controls_tab(
1264 'product_title_color_hover_tab',
1265 [
1266 'label' => esc_html__('Hover', 'shopengine'),
1267 ]
1268 );
1269
1270 $this->add_control(
1271 'product_title_hover_color',
1272 [
1273 'label' => esc_html__('Color', 'shopengine'),
1274 'type' => Controls_Manager::COLOR,
1275 'default' => '#F03D3F',
1276 'alpha' => false,
1277 'selectors' => [
1278 '{{WRAPPER}} .product-title a:hover' => 'color: {{VALUE}};',
1279 ],
1280 ]
1281 );
1282
1283 $this->end_controls_tab();
1284 $this->end_controls_tabs();
1285
1286 $this->add_responsive_control(
1287 'product_title_padding',
1288 [
1289 'label' => esc_html__('Padding (px)', 'shopengine'),
1290 'type' => Controls_Manager::DIMENSIONS,
1291 'size_units' => ['px'],
1292 'default' => [
1293 'top' => '0',
1294 'right' => '0',
1295 'bottom' => '8',
1296 'left' => '0',
1297 'unit' => 'px',
1298 'isLinked' => false,
1299 ],
1300 'selectors' => [
1301 '{{WRAPPER}} .product-title' => 'margin: 0; padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1302 '.rtl {{WRAPPER}} .product-title' => 'margin: 0; padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1303 ],
1304 'separator' => 'before',
1305 ]
1306 );
1307
1308 $this->end_controls_section();
1309
1310 // STYLE - PRODUCT RATING
1311 $this->start_controls_section(
1312 'product_rating_style_section',
1313 [
1314 'label' => esc_html__('Product Rating', 'shopengine'),
1315 'tab' => Controls_Manager::TAB_STYLE,
1316 'condition' => [
1317 'show_rating' => 'yes',
1318 ],
1319 ]
1320 );
1321
1322 $this->add_control(
1323 'product_rating_star_size',
1324 [
1325 'label' => esc_html__('Rating Star Size', 'shopengine'),
1326 'type' => Controls_Manager::SLIDER,
1327 'size_units' => ['px'],
1328 'range' => [
1329 'px' => [
1330 'min' => 0,
1331 'max' => 100,
1332 'step' => 1,
1333 ],
1334 ],
1335 'default' => [
1336 'unit' => 'px',
1337 'size' => 12,
1338 ],
1339 'selectors' => [
1340 '{{WRAPPER}} .product-rating .star-rating' => 'font-size: {{SIZE}}{{UNIT}};',
1341 ],
1342 'separator' => 'before',
1343 ]
1344 );
1345
1346 $this->add_control(
1347 'product_rating_star_color',
1348 [
1349 'label' => esc_html__('Star Color', 'shopengine'),
1350 'type' => Controls_Manager::COLOR,
1351 'default' => '#fec42d',
1352 'alpha' => false,
1353 'selectors' => [
1354 '{{WRAPPER}} .product-rating .star-rating span::before' => 'color: {{VALUE}};',
1355 ],
1356 ]
1357 );
1358
1359 $this->add_control(
1360 'product_rating_empty_star_color',
1361 [
1362 'label' => esc_html__('Empty Star Color', 'shopengine'),
1363 'type' => Controls_Manager::COLOR,
1364 'default' => '#fec42d',
1365 'alpha' => false,
1366 'selectors' => [
1367 '{{WRAPPER}} .product-rating .star-rating::before' => 'color: {{VALUE}};',
1368 ],
1369 ]
1370 );
1371
1372 $this->add_control(
1373 'product_rating_count_color',
1374 [
1375 'label' => esc_html__('Count Color', 'shopengine'),
1376 'type' => Controls_Manager::COLOR,
1377 'default' => '#999999',
1378 'alpha' => false,
1379 'selectors' => [
1380 '{{WRAPPER}} .rating-count' => 'color: {{VALUE}}',
1381 ],
1382 ]
1383 );
1384
1385 $this->add_group_control(
1386 Group_Control_Typography::get_type(),
1387 [
1388 'name' => 'product_rating_count_typography',
1389 'label' => esc_html__('Count Typography', 'shopengine'),
1390 'selector' => '{{WRAPPER}} .rating-count',
1391 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1392 'fields_options' => [
1393 'typography' => [
1394 'default' => 'custom',
1395 ],
1396 'font_weight' => [
1397 'default' => '400',
1398 ],
1399 'font_size' => [
1400 'default' => [
1401 'size' => '12',
1402 'unit' => 'px',
1403 ],
1404 'label' => esc_html__('Font Size (px)', 'shopengine'),
1405 'size_units' => ['px'],
1406 ],
1407 'line_height' => [
1408 'default' => [
1409 'size' => '12',
1410 'unit' => 'px',
1411 ],
1412 'size_units' => ['px'], // enable only px
1413 'responsive' => false,
1414 ],
1415 ],
1416 ]
1417 );
1418
1419 $this->add_responsive_control(
1420 'product_rating_padding',
1421 [
1422 'label' => esc_html__('Padding (px)', 'shopengine'),
1423 'type' => Controls_Manager::DIMENSIONS,
1424 'size_units' => ['px'],
1425 'default' => [
1426 'top' => '0',
1427 'right' => '0',
1428 'bottom' => '20',
1429 'left' => '0',
1430 'unit' => 'px',
1431 'isLinked' => false,
1432 ],
1433 'selectors' => [
1434 '{{WRAPPER}} .product-rating' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1435 '.rtl {{WRAPPER}} .product-rating' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1436 ],
1437 'separator' => 'before',
1438 ]
1439 );
1440
1441 $this->end_controls_section();
1442
1443 // STYLE - PRODUCT PRICE
1444 $this->start_controls_section(
1445 'product_price_style_section',
1446 [
1447 'label' => esc_html__('Product Price', 'shopengine'),
1448 'tab' => Controls_Manager::TAB_STYLE,
1449 ]
1450 );
1451
1452 $this->add_control(
1453 'product_price_price_color',
1454 [
1455 'label' => esc_html__('Color', 'shopengine'),
1456 'type' => Controls_Manager::COLOR,
1457 'default' => '#101010',
1458 'alpha' => false,
1459 'selectors' => [
1460 '{{WRAPPER}} .product-price :is(.price, .amount, bdi)' => 'color: {{VALUE}};',
1461 ],
1462 ]
1463 );
1464
1465 $this->add_control(
1466 'product_price_sale_price_color',
1467 [
1468 'label' => esc_html__('Sale Color', 'shopengine'),
1469 'type' => Controls_Manager::COLOR,
1470 'alpha' => false,
1471 'default' => '#999999',
1472 'selectors' => [
1473 '{{WRAPPER}} .product-price .price del' => 'color: {{VALUE}};',
1474 ],
1475 ]
1476 );
1477
1478 $this->add_group_control(
1479 Group_Control_Typography::get_type(),
1480 [
1481 'name' => 'product_price_typography',
1482 'label' => esc_html__('Typography', 'shopengine'),
1483 'selector' => '{{WRAPPER}} .product-price .price',
1484 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1485 'fields_options' => [
1486 'typography' => [
1487 'default' => 'custom',
1488 ],
1489 'font_weight' => [
1490 'default' => '700',
1491 ],
1492 'font_size' => [
1493 'default' => [
1494 'size' => '16',
1495 'unit' => 'px',
1496 ],
1497 'label' => esc_html__('Font Size (px)', 'shopengine'),
1498 'size_units' => ['px'],
1499 ],
1500 'line_height' => [
1501 'default' => [
1502 'size' => '20',
1503 'unit' => 'px',
1504 ],
1505 'label' => esc_html__('Line Height (px)', 'shopengine'),
1506 'size_units' => ['px'], // enable only px
1507 'responsive' => false,
1508 ],
1509 ],
1510 ]
1511 );
1512
1513 $this->add_control(
1514 'product_price_space_between',
1515 [
1516 'label' => esc_html__('Space In-between Prices (px)', 'shopengine'),
1517 'type' => Controls_Manager::SLIDER,
1518 'size_units' => ['px'],
1519 'range' => [
1520 'px' => [
1521 'min' => 0,
1522 'max' => 200,
1523 'step' => 1,
1524 ],
1525 ],
1526 'default' => [
1527 'unit' => 'px',
1528 'size' => 5,
1529 ],
1530 'selectors' => [
1531 '{{WRAPPER}} .shopengine-product-list .product-price .price ins' => 'margin-right: {{SIZE}}{{UNIT}};',
1532 '.rtl {{WRAPPER}} .shopengine-product-list .product-price .price ins' => 'margin-left: {{SIZE}}{{UNIT}};',
1533 ],
1534
1535 ]
1536 );
1537
1538 $this->add_control(
1539 'product_price_discount_badge_style_section',
1540 [
1541 'label' => esc_html__('Price Discount Badge', 'shopengine'),
1542 'type' => Controls_Manager::HEADING,
1543 'separator' => 'before',
1544 'condition' => [
1545 'show_off_price_tag' => 'yes',
1546 ],
1547 ]
1548 );
1549
1550 $this->add_control(
1551 'product_price_discount_badge_color',
1552 [
1553 'label' => esc_html__('Color', 'shopengine'),
1554 'type' => Controls_Manager::COLOR,
1555 'default' => '#FFFFFF',
1556 'alpha' => false,
1557 'selectors' => [
1558 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'color: {{VALUE}};',
1559 ],
1560 'condition' => [
1561 'show_off_price_tag' => 'yes',
1562 ],
1563 ]
1564 );
1565
1566 $this->add_control(
1567 'product_price_discount_badge_bg_color',
1568 [
1569 'label' => esc_html__('Background', 'shopengine'),
1570 'type' => Controls_Manager::COLOR,
1571 'default' => '#F54F29',
1572 'alpha' => false,
1573 'selectors' => [
1574 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'background: {{VALUE}};',
1575 ],
1576 'condition' => [
1577 'show_off_price_tag' => 'yes',
1578 ],
1579 ]
1580 );
1581
1582 $this->add_group_control(
1583 Group_Control_Typography::get_type(),
1584 [
1585 'name' => 'product_price_discount_badge_typography',
1586 'label' => esc_html__('Typography', 'shopengine'),
1587 'description' => esc_html__('Typography for sale price and discount badge', 'shopengine'),
1588 'selector' => '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge',
1589 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1590 'fields_options' => [
1591 'typography' => [
1592 'default' => 'custom',
1593 'label' => esc_html__('Typography Sale and Discount', 'shopengine'),
1594 ],
1595 'font_weight' => [
1596 'default' => '700',
1597 ],
1598 'font_size' => [
1599 'default' => [
1600 'size' => '16',
1601 'unit' => 'px',
1602 ],
1603 'label' => esc_html__('Font Size (px)', 'shopengine'),
1604 'size_units' => ['px'],
1605 ],
1606 'line_height' => [
1607 'default' => [
1608 'size' => '24',
1609 'unit' => 'px',
1610 ],
1611 'label' => esc_html__('Line Height (px)', 'shopengine'),
1612 'size_units' => ['px'], // enable only px
1613 'responsive' => false,
1614 ],
1615 ],
1616 ]
1617 );
1618
1619 $this->add_responsive_control(
1620 'product_price_discount_badge_padding',
1621 [
1622 'label' => esc_html__('Badge Padding', 'shopengine'),
1623 'type' => Controls_Manager::DIMENSIONS,
1624 'size_units' => ['px'],
1625 'default' => [
1626 'top' => '0',
1627 'right' => '10',
1628 'bottom' => '0',
1629 'left' => '10',
1630 'unit' => 'px',
1631 'isLinked' => false,
1632 ],
1633 'selectors' => [
1634 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1635 '.rtl {{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1636 ],
1637 'condition' => [
1638 'show_off_price_tag' => 'yes',
1639 ],
1640 'separator' => 'before',
1641 ]
1642 );
1643
1644 $this->add_responsive_control(
1645 'product_price_discount_badge_margin',
1646 [
1647 'label' => esc_html__('Badge Margin', 'shopengine'),
1648 'type' => Controls_Manager::DIMENSIONS,
1649 'size_units' => ['px'],
1650 'default' => [
1651 'top' => '0',
1652 'right' => '0',
1653 'bottom' => '0',
1654 'left' => '5',
1655 'unit' => 'px',
1656 'isLinked' => false,
1657 ],
1658 'selectors' => [
1659 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1660 '.rtl {{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1661 ],
1662 'condition' => [
1663 'show_off_price_tag' => 'yes',
1664 ],
1665 'separator' => 'before',
1666 ]
1667 );
1668
1669 $this->add_responsive_control(
1670 'product_price_wrap_padding',
1671 [
1672 'label' => esc_html__('Wrap Padding (px)', 'shopengine'),
1673 'type' => Controls_Manager::DIMENSIONS,
1674 'size_units' => ['px'],
1675 'default' => [
1676 'top' => '0',
1677 'right' => '0',
1678 'bottom' => '15',
1679 'left' => '0',
1680 'unit' => 'px',
1681 'isLinked' => false,
1682 ],
1683 'selectors' => [
1684 '{{WRAPPER}} .product-price' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1685 '.rtl {{WRAPPER}} .product-price' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1686 ],
1687 'separator' => 'before',
1688 ]
1689 );
1690
1691 $this->end_controls_section();
1692
1693 // STYLE - PRODUCT HOVER
1694 $this->start_controls_section(
1695 'product_hover_overlay_style_section',
1696 [
1697 'label' => esc_html__('Product Hover', 'shopengine'),
1698 'tab' => Controls_Manager::TAB_STYLE,
1699 'condition' => [
1700 'show_product_hover_overlay' => 'yes',
1701 ],
1702 ]
1703 );
1704
1705 $this->start_controls_tabs(
1706 'product_hover_overlay_color_tabs'
1707 );
1708
1709 $this->start_controls_tab(
1710 'product_hover_overlay_color_normal_tab',
1711 [
1712 'label' => esc_html__('Normal', 'shopengine'),
1713 ]
1714 );
1715
1716 $this->add_control(
1717 'product_hover_overlay_color',
1718 [
1719 'label' => esc_html__('Color', 'shopengine'),
1720 'type' => Controls_Manager::COLOR,
1721 'default' => '#101010',
1722 'alpha' => false,
1723 'selectors' => [
1724 '{{WRAPPER}} .overlay-add-to-cart a::before' => 'color: {{VALUE}};',
1725 '{{WRAPPER}} .overlay-add-to-cart a::after' => 'color: {{VALUE}};',
1726 ],
1727 ]
1728 );
1729
1730 $this->add_control(
1731 'product_hover_overlay_bg_color',
1732 [
1733 'label' => esc_html__('Background Color', 'shopengine'),
1734 'type' => Controls_Manager::COLOR,
1735 'alpha' => false,
1736 'default' => '#ffffff',
1737 'selectors' => [
1738 '{{WRAPPER}} .overlay-add-to-cart a' => 'background: {{VALUE}} !important;',
1739 ],
1740 ]
1741 );
1742
1743 $this->end_controls_tab();
1744
1745 $this->start_controls_tab(
1746 'product_hover_overlay_color_hover_tab',
1747 [
1748 'label' => esc_html__('Hover', 'shopengine'),
1749 ]
1750 );
1751
1752 $this->add_control(
1753 'product_hover_overlay_hover_color',
1754 [
1755 'label' => esc_html__('Color', 'shopengine'),
1756 'type' => Controls_Manager::COLOR,
1757 'default' => '#F03D3F',
1758 'alpha' => false,
1759 'selectors' => [
1760 '{{WRAPPER}} .overlay-add-to-cart a.active::before' => 'color: {{VALUE}};',
1761 '{{WRAPPER}} .overlay-add-to-cart a.added::before' => 'color: {{VALUE}};',
1762 '{{WRAPPER}} .overlay-add-to-cart a.loading::after' => 'color: {{VALUE}};',
1763 '{{WRAPPER}} .overlay-add-to-cart a:hover::before' => 'color: {{VALUE}};',
1764 '{{WRAPPER}} .overlay-add-to-cart a:hover::after' => 'color: {{VALUE}};',
1765 ],
1766 ]
1767 );
1768
1769 $this->add_control(
1770 'product_hover_overlay_hover_bg_color',
1771 [
1772 'label' => esc_html__('Background Color', 'shopengine'),
1773 'type' => Controls_Manager::COLOR,
1774 'default' => '#ffffff',
1775 'alpha' => false,
1776 'selectors' => [
1777 '{{WRAPPER}} .overlay-add-to-cart a.active' => 'background: {{VALUE}} !important;',
1778 '{{WRAPPER}} .overlay-add-to-cart a:hover' => 'background: {{VALUE}} !important;',
1779 '{{WRAPPER}} .overlay-add-to-cart a:hover' => 'background: {{VALUE}} !important;',
1780 ],
1781 ]
1782 );
1783
1784 $this->end_controls_tab();
1785 $this->end_controls_tabs();
1786
1787 $this->add_responsive_control(
1788 'product_hover_overlay_font_size',
1789 [
1790 'label' => esc_html__('Font Size (px)', 'shopengine'),
1791 'type' => Controls_Manager::SLIDER,
1792 'size_units' => ['px'],
1793 'range' => [
1794 'px' => [
1795 'min' => 0,
1796 'max' => 200,
1797 ],
1798 ],
1799 'default' => [
1800 'unit' => 'px',
1801 'size' => 18,
1802 ],
1803 'selectors' => [
1804 '{{WRAPPER}} .overlay-add-to-cart a::before' => 'font-size: {{SIZE}}{{UNIT}};',
1805 '{{WRAPPER}} .overlay-add-to-cart a::after' => 'font-size: {{SIZE}}{{UNIT}};',
1806 ],
1807 'separator' => 'before',
1808 ]
1809 );
1810
1811 $this->add_responsive_control(
1812 'product_hover_overlay_padding',
1813 [
1814 'label' => esc_html__('Item Padding (px)', 'shopengine'),
1815 'type' => Controls_Manager::DIMENSIONS,
1816 'size_units' => ['px'],
1817 'default' => [
1818 'top' => '10',
1819 'right' => '22',
1820 'bottom' => '10',
1821 'left' => '22',
1822 'unit' => 'px',
1823 'isLinked' => false,
1824 ],
1825 'selectors' => [
1826 '{{WRAPPER}} .overlay-add-to-cart a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1827 '.rtl {{WRAPPER}} .overlay-add-to-cart a' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1828 ],
1829 'separator' => 'before',
1830 ]
1831 );
1832
1833 $this->add_responsive_control(
1834 'product_hover_overlay_item_space_between',
1835 [
1836 'label' => esc_html__('Space In-between Items (px)', 'shopengine'),
1837 'type' => Controls_Manager::SLIDER,
1838 'size_units' => ['px'],
1839 'range' => [
1840 'px' => [
1841 'min' => 0,
1842 'max' => 200,
1843 ],
1844 ],
1845 'default' => [
1846 'unit' => 'px',
1847 'size' => 0,
1848 ],
1849 'selectors' => [
1850 '{{WRAPPER}} .overlay-add-to-cart.position-bottom a:not(:last-child)' => 'margin-right: {{SIZE}}{{UNIT}};',
1851 '.rtl {{WRAPPER}} .overlay-add-to-cart.position-bottom a:not(:last-child)' => 'margin-left: {{SIZE}}{{UNIT}};',
1852 '{{WRAPPER}} .overlay-add-to-cart.position-left a:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
1853 '{{WRAPPER}} .overlay-add-to-cart.position-right a:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
1854 '{{WRAPPER}} .overlay-add-to-cart.position-center a:not(:nth-child(2n))' => 'margin-right: {{SIZE}}{{UNIT}};',
1855 '.rtl {{WRAPPER}} .overlay-add-to-cart.position-center a:not(:nth-child(2n))' => 'margin-left: {{SIZE}}{{UNIT}};',
1856 '{{WRAPPER}} .overlay-add-to-cart.position-center a:not(:nth-child(1), :nth-child(2))' => 'margin-top: {{SIZE}}{{UNIT}};',
1857 ],
1858 'separator' => 'before',
1859 ]
1860 );
1861
1862 $this->add_group_control(
1863 Group_Control_Border::get_type(),
1864 [
1865 'name' => 'product_hover_overlay_border',
1866 'label' => esc_html__('Border', 'shopengine'),
1867 'fields_options' => [
1868 'border' => [
1869 'default' => '',
1870 'selectors' => [
1871 '{{SELECTOR}} .overlay-add-to-cart' => 'border-style: {{VALUE}};',
1872 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-style: {{VALUE}};',
1873 ],
1874 ],
1875 'width' => [
1876 'label' => esc_html__('Border Width', 'shopengine'),
1877 'default' => [
1878 'top' => '0',
1879 'right' => '0',
1880 'bottom' => '0',
1881 'left' => '0',
1882 'isLinked' => true,
1883 ],
1884 'selectors' => [
1885 '{{SELECTOR}} .overlay-add-to-cart' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1886 '.rtl {{SELECTOR}} .overlay-add-to-cart' => 'border-width: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1887 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-width: 0 {{RIGHT}}{{UNIT}} 0 0;',
1888 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-width: 0 0 0 {{RIGHT}}{{UNIT}};',
1889 ],
1890 ],
1891 'color' => [
1892 'label' => esc_html__('Border Color', 'shopengine'),
1893 'default' => '#F2F2F2',
1894 'selectors' => [
1895 '{{SELECTOR}} .overlay-add-to-cart' => 'border-color: {{VALUE}};',
1896 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-color: {{VALUE}};',
1897 ],
1898 ],
1899 ],
1900 'separator' => 'before',
1901 ]
1902 );
1903
1904 $this->add_responsive_control(
1905 'product_hover_overlay_border_radius',
1906 [
1907 'label' => esc_html__('Border Radius (px)', 'shopengine'),
1908 'type' => Controls_Manager::DIMENSIONS,
1909 'size_units' => ['px'],
1910 'default' => [
1911 'top' => '5',
1912 'right' => '5',
1913 'bottom' => '0',
1914 'left' => '0',
1915 'unit' => 'px',
1916 'isLinked' => false,
1917 ],
1918 'selectors' => [
1919 '{{WRAPPER}} .overlay-add-to-cart' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1920 '.rtl {{WRAPPER}} .overlay-add-to-cart' => 'border-radius: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1921 ],
1922 'separator' => 'before',
1923 ]
1924 );
1925
1926 $this->add_responsive_control(
1927 'product_hover_overlay_margin',
1928 [
1929 'label' => esc_html__('Wrap Margin (px)', 'shopengine'),
1930 'type' => Controls_Manager::DIMENSIONS,
1931 'size_units' => ['px'],
1932 'default' => [
1933 'top' => '0',
1934 'right' => '0',
1935 'bottom' => '0',
1936 'left' => '0',
1937 'unit' => 'px',
1938 'isLinked' => false,
1939 ],
1940 'selectors' => [
1941 '{{WRAPPER}} .overlay-add-to-cart' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1942 '.rtl {{WRAPPER}} .overlay-add-to-cart' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1943 ],
1944 'separator' => 'before',
1945 ]
1946 );
1947
1948 $this->end_controls_section();
1949
1950
1951 /**
1952 * Section: Global Font
1953 */
1954 $this->start_controls_section(
1955 'shopengine_section_style_global',
1956 [
1957 'label' => esc_html__('Global Font', 'shopengine'),
1958 'tab' => Controls_Manager::TAB_STYLE,
1959 ]
1960 );
1961 $this->add_control(
1962 'shopengine_product_list_font_family',
1963 [
1964 'label' => esc_html__('Font Family', 'shopengine'),
1965 'description' => esc_html__('This font family is set for this specific widget.', 'shopengine'),
1966 'type' => Controls_Manager::FONT,
1967 'selectors' => [
1968 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link,
1969 {{WRAPPER}} .product-category ul li a,
1970 {{WRAPPER}} .product-title,
1971 {{WRAPPER}} .rating-count,
1972 {{WRAPPER}} .product-price .price,
1973 {{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'font-family: {{VALUE}};',
1974 ],
1975 ]
1976 );
1977 $this->end_controls_section();
1978 }
1979
1980 protected function screen() {
1981
1982 $settings = $this->get_settings_for_display();
1983
1984 extract($settings);
1985
1986 $tpl = Products::instance()->get_widget_template($this->get_name());
1987
1988 include $tpl;
1989 }
1990 }
1991