archive-view-mode.php — ShopEngine Elementor WooCommerce Builder Addon – All in One WooCommerce Solution with eCommerce Templates & Woo Widgets 4.9.5

shopengine / widgets / archive-view-mode / archive-view-mode.php

shopengine / widgets / archive-view-mode Last commit date

screens 2 years ago archive-view-mode-config.php 4 years ago archive-view-mode.php 1 week ago

archive-view-mode.php

2024 lines

1	<?php
2
3	namespace Elementor;
4
5	use ShopEngine\Widgets\Products;
6
7	defined('ABSPATH') \|\| exit;
8
9
10	class ShopEngine_Archive_View_Mode extends \ShopEngine\Base\Widget
11	{
12
13	const SELECTOR_PREFIX = '.shopengine-archive-products.shopengine-archive-products--view-list ';
14	const CL_SELECTOR_PREFIX = '.shopengine-archive-products.shopengine-archive-products--view-list.shopengine-archive-products--custom-list .shopengine-cl-content ';
15
16	public function config() {
17	return new ShopEngine_Archive_View_Mode_Config();
18	}
19
20	protected function register_controls() {
21	$this->start_controls_section(
22	'shopengine_view_mode_section',
23	[
24	'label' => __('View Mode', 'shopengine'),
25	'tab' => Controls_Manager::TAB_CONTENT,
26	]
27	);
28
29	$this->add_control(
30	'shopengine_view_mode_four_grid',
31	[
32	'label' => esc_html__( 'Show Four Grid', 'shopengine' ),
33	'type' => \Elementor\Controls_Manager::SWITCHER,
34	'label_on' => esc_html__( 'Show', 'shopengine' ),
35	'label_off' => esc_html__( 'Hide', 'shopengine' ),
36	'return_value' => 'yes',
37	'default' => 'yes',
38	]
39	);
40
41
42	$this->add_control(
43	'shopengine_view_mode_four_grid_icon',
44	[
45	'label' => esc_html__( 'Four Grid Icon', 'shopengine' ),
46	'type' => \Elementor\Controls_Manager::ICONS,
47	'separator' => 'after',
48	'default' => [
49	'value' => 'shopengine-icon shopengine-icon-grid-1',
50	'library' => 'shopengine-icons',
51	],
52	'condition' => [
53	'shopengine_view_mode_four_grid' => 'yes',
54	],
55	]
56	);
57
58	$this->add_control(
59	'shopengine_view_mode_three_grid',
60	[
61	'label' => esc_html__( 'Show Three Grid', 'shopengine' ),
62	'type' => \Elementor\Controls_Manager::SWITCHER,
63	'label_on' => esc_html__( 'Show', 'shopengine' ),
64	'label_off' => esc_html__( 'Hide', 'shopengine' ),
65	'return_value' => 'yes',
66	'default' => '',
67	]
68	);
69
70	$this->add_control(
71	'shopengine_view_mode_three_grid_icon',
72	[
73	'label' => esc_html__( 'Three Grid Icon', 'shopengine' ),
74	'type' => \Elementor\Controls_Manager::ICONS,
75	'separator' => 'after',
76	'default' => [
77	'value' => 'eicon-gallery-grid',
78	'library' => 'eicon',
79	],
80	'condition' => [
81	'shopengine_view_mode_three_grid' => 'yes',
82	],
83	]
84	);
85
86	$this->add_control(
87	'shopengine_view_mode_two_grid',
88	[
89	'label' => esc_html__( 'Show Two Grid', 'shopengine' ),
90	'type' => \Elementor\Controls_Manager::SWITCHER,
91	'label_on' => esc_html__( 'Show', 'shopengine' ),
92	'label_off' => esc_html__( 'Hide', 'shopengine' ),
93	'return_value' => 'yes',
94	'default' => '',
95	]
96	);
97
98	$this->add_control(
99	'shopengine_view_mode_two_grid_icon',
100	[
101	'label' => esc_html__( 'Two Grid Icon', 'shopengine' ),
102	'type' => \Elementor\Controls_Manager::ICONS,
103	'separator' => 'after',
104	'default' => [
105	'value' => 'shopengine-icon shopengine-icon-grid-3',
106	'library' => 'shopengine-icons',
107	],
108	'condition' => [
109	'shopengine_view_mode_two_grid' => 'yes',
110	],
111	]
112	);
113
114	$this->add_control(
115	'shopengine_view_mode_list_grid',
116	[
117	'label' => esc_html__( 'Show List Grid', 'shopengine' ),
118	'type' => \Elementor\Controls_Manager::SWITCHER,
119	'label_on' => esc_html__( 'Show', 'shopengine' ),
120	'label_off' => esc_html__( 'Hide', 'shopengine' ),
121	'return_value' => 'yes',
122	'default' => 'yes',
123	]
124	);
125
126	$this->add_control(
127	'shopengine_view_mode_list_grid_icon',
128	[
129	'label' => esc_html__( 'List Icon', 'shopengine' ),
130	'type' => \Elementor\Controls_Manager::ICONS,
131	'default' => [
132	'value' => 'shopengine-icon shopengine-icon-grid-2',
133	'library' => 'shopengine-icons',
134	],
135	'condition' => [
136	'shopengine_view_mode_list_grid' => 'yes',
137	],
138	]
139	);
140
141	$this->end_controls_section();
142
143	$this->start_controls_section(
144	'shopengine_cl_section',
145	[
146	'label' => esc_html__('List View: Custom Layout', 'shopengine'),
147	'tab' => Controls_Manager::TAB_CONTENT,
148	'condition' => [
149	'shopengine_view_mode_list_grid' => 'yes',
150	],
151	]
152	);
153
154	$this->add_control(
155	'shopengine_cl_show_badge',
156	[
157	'label' => esc_html__('Show Sale Badge', 'shopengine'),
158	'type' => \Elementor\Controls_Manager::SWITCHER,
159	'label_on' => esc_html__('Show', 'shopengine'),
160	'label_off' => esc_html__('Hide', 'shopengine'),
161	'return_value' => 'yes',
162	'default' => 'yes',
163	]
164	);
165
166	$this->add_control(
167	'shopengine_cl_show_category',
168	[
169	'label' => esc_html__('Show Category', 'shopengine'),
170	'type' => \Elementor\Controls_Manager::SWITCHER,
171	'label_on' => esc_html__('Show', 'shopengine'),
172	'label_off' => esc_html__('Hide', 'shopengine'),
173	'return_value' => 'yes',
174	'default' => 'yes',
175	]
176	);
177
178	$this->add_control(
179	'shopengine_cl_category_max',
180	[
181	'label' => esc_html__('Max Categories', 'shopengine'),
182	'type' => Controls_Manager::NUMBER,
183	'min' => 1,
184	// Matches the fixed render cap in shopengine_render_list_custom_content()
185	// (archive-products/screens/default.php) that this control's CSS enforces.
186	'max' => 10,
187	'default' => 1,
188	'condition' => [
189	'shopengine_cl_show_category' => 'yes',
190	],
191	]
192	);
193
194	$this->add_control(
195	'shopengine_cl_show_rating',
196	[
197	'label' => esc_html__('Show Rating', 'shopengine'),
198	'type' => \Elementor\Controls_Manager::SWITCHER,
199	'label_on' => esc_html__('Show', 'shopengine'),
200	'label_off' => esc_html__('Hide', 'shopengine'),
201	'return_value' => 'yes',
202	'default' => 'yes',
203	]
204	);
205
206	$this->add_control(
207	'shopengine_cl_title_tag',
208	[
209	'label' => esc_html__('Title HTML Tag', 'shopengine'),
210	'type' => Controls_Manager::SELECT,
211	'options' => [
212	'h1' => 'H1',
213	'h2' => 'H2',
214	'h3' => 'H3',
215	'h4' => 'H4',
216	'h5' => 'H5',
217	'h6' => 'H6',
218	'div' => 'Div',
219	'span' => 'Span',
220	'p' => 'P',
221	],
222	'default' => 'h2',
223	]
224	);
225
226	$this->add_control(
227	'shopengine_cl_show_off_tag',
228	[
229	'label' => esc_html__('Show Off Percentage', 'shopengine'),
230	'type' => \Elementor\Controls_Manager::SWITCHER,
231	'label_on' => esc_html__('Show', 'shopengine'),
232	'label_off' => esc_html__('Hide', 'shopengine'),
233	'return_value' => 'yes',
234	'default' => 'yes',
235	// Show/hide is driven by CSS (not the PHP render gate the other cl_show_* toggles
236	// use) so it live-updates in the editor instantly, same as the style controls below
237	// — see [[reference-elementor-live-preview]].
238	'selectors' => [
239	self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .shopengine-cl-off-tag' => 'display: inline-block;',
240	],
241	]
242	);
243
244	$this->add_control(
245	'shopengine_cl_show_excerpt',
246	[
247	'label' => esc_html__('Show Description', 'shopengine'),
248	'type' => \Elementor\Controls_Manager::SWITCHER,
249	'label_on' => esc_html__('Show', 'shopengine'),
250	'label_off' => esc_html__('Hide', 'shopengine'),
251	'return_value' => 'yes',
252	'default' => 'yes',
253	]
254	);
255
256	$this->add_control(
257	'shopengine_cl_excerpt_length',
258	[
259	'label' => esc_html__('Max Words', 'shopengine'),
260	'type' => Controls_Manager::NUMBER,
261	'min' => 1,
262	'max' => 50,
263	'step' => 1,
264	'default' => 20,
265	'condition' => [
266	'shopengine_cl_show_excerpt' => 'yes',
267	],
268	]
269	);
270
271	$this->add_control(
272	'shopengine_cl_add_to_cart_text',
273	[
274	'label' => esc_html__('Add to Cart Text', 'shopengine'),
275	'type' => Controls_Manager::TEXT,
276	'placeholder' => esc_html__('Add to cart', 'shopengine'),
277	]
278	);
279
280	$cl_ordering_repeater = new Repeater();
281	$this->add_control(
282	'shopengine_cl_ordering_list',
283	[
284	'label' => esc_html__('Content Order', 'shopengine'),
285	'type' => Controls_Manager::REPEATER,
286	'fields' => $cl_ordering_repeater->get_controls(),
287	'default' => [
288	[
289	'list_title' => esc_html__('Category', 'shopengine'),
290	'list_key' => 'category',
291	],
292	[
293	'list_title' => esc_html__('Rating', 'shopengine'),
294	'list_key' => 'rating',
295	],
296	[
297	'list_title' => esc_html__('Title', 'shopengine'),
298	'list_key' => 'title',
299	],
300	[
301	'list_title' => esc_html__('Price', 'shopengine'),
302	'list_key' => 'price',
303	],
304	[
305	'list_title' => esc_html__('Description', 'shopengine'),
306	'list_key' => 'excerpt',
307	],
308	[
309	'list_title' => esc_html__('Add to Cart', 'shopengine'),
310	'list_key' => 'add-to-cart',
311	],
312	],
313	'title_field' => '{{{ list_title }}}',
314	'item_actions' => [
315	'add' => false,
316	'duplicate' => false,
317	'remove' => false,
318	'sort' => true,
319	],
320	'separator' => 'before',
321	]
322	);
323
324	$this->add_control(
325	'shopengine_cl_show_quickview',
326	[
327	'label' => esc_html__('Show Quick View', 'shopengine'),
328	'type' => \Elementor\Controls_Manager::SWITCHER,
329	'label_on' => esc_html__('Show', 'shopengine'),
330	'label_off' => esc_html__('Hide', 'shopengine'),
331	'return_value' => 'yes',
332	'default' => 'yes',
333	]
334	);
335
336	$this->add_control(
337	'shopengine_cl_show_wishlist',
338	[
339	'label' => esc_html__('Show Wishlist', 'shopengine'),
340	'type' => \Elementor\Controls_Manager::SWITCHER,
341	'label_on' => esc_html__('Show', 'shopengine'),
342	'label_off' => esc_html__('Hide', 'shopengine'),
343	'return_value' => 'yes',
344	'default' => 'yes',
345	]
346	);
347
348	$this->add_control(
349	'shopengine_cl_show_comparison',
350	[
351	'label' => esc_html__('Show Comparison', 'shopengine'),
352	'type' => \Elementor\Controls_Manager::SWITCHER,
353	'label_on' => esc_html__('Show', 'shopengine'),
354	'label_off' => esc_html__('Hide', 'shopengine'),
355	'return_value' => 'yes',
356	'default' => 'yes',
357	]
358	);
359
360	$this->add_control(
361	'shopengine_cl_show_direct_checkout',
362	[
363	'label' => esc_html__('Show Direct Checkout', 'shopengine'),
364	'type' => \Elementor\Controls_Manager::SWITCHER,
365	'label_on' => esc_html__('Show', 'shopengine'),
366	'label_off' => esc_html__('Hide', 'shopengine'),
367	'return_value' => 'yes',
368	'default' => 'yes',
369	]
370	);
371
372	$cl_action_btns_ordering_repeater = new Repeater();
373	$this->add_control(
374	'shopengine_cl_action_btns_ordering_list',
375	[
376	'label' => esc_html__('Add to Cart / Icons Order', 'shopengine'),
377	'type' => Controls_Manager::REPEATER,
378	'fields' => $cl_action_btns_ordering_repeater->get_controls(),
379	'default' => [
380	[
381	'list_title' => esc_html__('Quick View', 'shopengine'),
382	'list_key' => 'quick-view',
383	],
384	[
385	'list_title' => esc_html__('Wishlist', 'shopengine'),
386	'list_key' => 'wishlist',
387	],
388	[
389	'list_title' => esc_html__('Add to Cart', 'shopengine'),
390	'list_key' => 'add-to-cart',
391	],
392	[
393	'list_title' => esc_html__('Comparison', 'shopengine'),
394	'list_key' => 'comparison',
395	],
396	[
397	'list_title' => esc_html__('Direct Checkout (PRO)', 'shopengine'),
398	'list_key' => 'direct-checkout',
399	],
400	],
401	'title_field' => '{{{ list_title }}}',
402	'item_actions' => [
403	'add' => false,
404	'duplicate' => false,
405	'remove' => false,
406	'sort' => true,
407	],
408	'separator' => 'before',
409	]
410	);
411
412	$this->end_controls_section();
413
414	$this->start_controls_section(
415	'shopengine_section_style',
416	[
417	'label' => esc_html__('View Mode Button', 'shopengine'),
418	'tab' => Controls_Manager::TAB_STYLE,
419	]
420	);
421
422	$this->add_control(
423	'shopengine_view_mode_icon_size',
424	[
425	'label' => esc_html__('Icon Size (px)', 'shopengine'),
426	'type' => Controls_Manager::SLIDER,
427	'size_units' => ['px'],
428	'range' => array(
429	'px' => array(
430	'min' => 1,
431	'max' => 100,
432	),
433	),
434	'default' => [
435	'unit' => 'px',
436	'size' => 18,
437	],
438	'selectors' => [
439	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch :is(svg, i)' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; font-size: {{SIZE}}{{UNIT}}; flex-shrink: 0;',
440	],
441	]
442	);
443
444	$this->add_control(
445	'shopengine_view_mode_icon_box_size',
446	[
447	'label' => esc_html__('Icon Box Size (px)', 'shopengine'),
448	'type' => Controls_Manager::SLIDER,
449	'size_units' => ['px'],
450	'range' => array(
451	'px' => array(
452	'min' => 1,
453	'max' => 100,
454	),
455	),
456	'default' => [
457	'unit' => 'px',
458	'size' => 52,
459	],
460	'selectors' => [
461	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
462	],
463	]
464	);
465
466	$this->add_control(
467	'shopengine_view_mode_alignment',
468	[
469	'label' => esc_html__('Alignment', 'shopengine'),
470	'type' => Controls_Manager::CHOOSE,
471	'options' => [
472	'start' => [
473	'description' => esc_html__('Left', 'shopengine'),
474	'icon' => 'eicon-text-align-left',
475	],
476	'center' => [
477	'description' => esc_html__('Center', 'shopengine'),
478	'icon' => 'eicon-text-align-center',
479	],
480	'flex-end' => [
481	'description' => esc_html__('Right', 'shopengine'),
482	'icon' => 'eicon-text-align-right',
483	],
484	],
485	'selectors' => [
486	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list' => 'justify-content: {{VALUE}};',
487	'.rtl {{WRAPPER}}.elementor-view-align-start .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list' => 'justify-content: start;',
488	'.rtl {{WRAPPER}}.elementor-view-align-flex-end .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list' => 'justify-content: end;',
489	],
490	'prefix_class' => 'elementor-view-align-',
491	]
492	);
493
494	$this->start_controls_tabs('shopengine_view_mode_tabs_style');
495
496	$this->start_controls_tab(
497	'shopengine_view_mode_tabnormal',
498	[
499	'label' => esc_html__('Normal', 'shopengine'),
500	]
501	);
502
503	$this->add_control(
504	'shopengine_view_mode_color',
505	[
506	'label' => esc_html__('Color', 'shopengine'),
507	'type' => Controls_Manager::COLOR,
508	'default' => '#a7a7a7',
509	'alpha' => false,
510	'selectors' => [
511	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch' => 'color: {{VALUE}};',
512	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch svg path' => 'stroke: {{VALUE}}; fill: {{VALUE}};',
513	],
514	]
515	);
516
517	$this->add_control(
518	'shopengine_view_mode_background',
519	[
520	'label' => esc_html__('Background Color', 'shopengine'),
521	'type' => Controls_Manager::COLOR,
522	'default' => '#fff',
523	'alpha' => false,
524	'selectors' => [
525	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch' => 'background-color: {{VALUE}};',
526	],
527	]
528	);
529
530	$this->end_controls_tab();
531
532	$this->start_controls_tab(
533	'shopengine_view_mode_tabhover',
534	[
535	'label' => esc_html__('Hover & Active', 'shopengine'),
536	]
537	);
538
539	$this->add_control(
540	'shopengine_view_mode_color_hover',
541	[
542	'label' => esc_html__('Color', 'shopengine'),
543	'type' => Controls_Manager::COLOR,
544	'alpha' => false,
545	'selectors' => [
546	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch:hover' => 'color: {{VALUE}};',
547	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch.isactive' => 'color: {{VALUE}};',
548	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch:hover svg path' => 'stroke: {{VALUE}};transition:all 0.3s ease-in-out',
549	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch.isactive svg path' => 'stroke: {{VALUE}};',
550	],
551	'default' => '#ff3f00',
552	]
553	);
554
555	$this->add_control(
556	'shopengine_view_mode_background_hover',
557	[
558	'label' => esc_html__('Background Color', 'shopengine'),
559	'type' => Controls_Manager::COLOR,
560	'alpha' => false,
561	'default' => '#ffffff',
562	'selectors' => [
563	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch:hover' => 'background-color: {{VALUE}};',
564	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch.isactive' => 'background-color: {{VALUE}};',
565	],
566	]
567	);
568
569	$this->end_controls_tab();
570	$this->end_controls_tabs();
571
572	$this->add_group_control(
573	Group_Control_Border::get_type(),
574	[
575	'name' => 'shopengine_view_mode_border',
576	'label' => esc_html__('Border', 'shopengine'),
577	'fields_options' => [
578	'border' => [
579	'default' => 'solid',
580	],
581	'width' => [
582	'default' => [
583	'top' => '1',
584	'right' => '1',
585	'bottom' => '1',
586	'left' => '1',
587	'isLinked' => true,
588	],
589	'selectors' => [
590	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
591	'.rtl {{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch' => 'border-width: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}}',
592	]
593	],
594	'color' => [
595	'default' => '#f2f2f2'
596	]
597	],
598	'selector' => '{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch',
599	'separator' => 'before'
600	]
601	);
602
603	$this->end_controls_section();
604
605	/**
606	*
607	*
608	*
609	* Product Layout: List View Image style
610	*
611	*
612	*/
613	$this->start_controls_section(
614	'shopengine_product_layout',
615	[
616	'label' => esc_html__('List View: Image Style', 'shopengine'),
617	'tab' => Controls_Manager::TAB_STYLE,
618	'condition' => [
619	'shopengine_view_mode_list_grid' => 'yes',
620	],
621	]
622	);
623
624	$this->add_responsive_control(
625	'shopengine_product_layout_gap',
626	[
627	'label' => esc_html__('Image gap from conent', 'shopengine'),
628	'type' => Controls_Manager::SLIDER,
629	'size_units' => ['px'],
630	'range' => array(
631	'px' => array(
632	'min' => 1,
633	'max' => 200,
634	),
635	),
636	'default' => [
637	'unit' => 'px',
638	'size' => 60,
639	],
640
641	'selectors' => [
642	self::SELECTOR_PREFIX . '.shopengine-archive-mode-grid' => 'column-gap: {{SIZE}}{{UNIT}};',
643	'.shopengine-archive-products.shopengine-archive-products--view-list.shopengine-archive-products--custom-list .shopengine-archive-products__left-image' => 'gap: {{SIZE}}{{UNIT}};',
644	],
645	]
646	);
647
648	$this->add_responsive_control(
649	'shopengine_product_image_width',
650	[
651	'label' => esc_html__('Image Width', 'shopengine'),
652	'type' => Controls_Manager::SLIDER,
653	'size_units' => ['px'],
654	'range' => array(
655	'px' => array(
656	'min' => 1,
657	'max' => 800,
658	),
659	),
660	'default' => [
661	'unit' => 'px',
662	'size' => 400,
663	],
664
665	'selectors' => [
666	self::SELECTOR_PREFIX . '.shopengine-archive-products__left-image img' => 'width: {{SIZE}}{{UNIT}} !important; min-width: {{SIZE}}{{UNIT}} !important;',
667	],
668	]
669	);
670
671	$this->add_responsive_control(
672	'shopengine_product_image_height',
673	[
674	'label' => esc_html__('Image Height', 'shopengine'),
675	'type' => Controls_Manager::SLIDER,
676	'size_units' => ['px'],
677	'range' => array(
678	'px' => array(
679	'min' => 1,
680	'max' => 800,
681	),
682	),
683	'default' => [
684	'unit' => 'px',
685	'size' => 400,
686	],
687
688	'selectors' => [
689	self::SELECTOR_PREFIX . '.shopengine-archive-products__left-image img' => 'height: {{SIZE}}{{UNIT}} !important;',
690	],
691	]
692	);
693
694	$this->add_responsive_control(
695	'shopengine_product_image_fit',
696	[
697	'label' => esc_html__('Image Fit', 'shopengine'),
698	'type' => Controls_Manager::SELECT,
699	'default' => 'cover',
700	'options' => [
701	'cover' => esc_html__('Cover', 'shopengine'),
702	'contain' => esc_html__('Contain', 'shopengine'),
703	'fill' => esc_html__('Fill', 'shopengine')
704	],
705	'selectors' => [
706	self::SELECTOR_PREFIX . '.shopengine-archive-products__left-image img' => 'object-fit: {{VALUE}}',
707	],
708	]
709	);
710
711	$this->add_responsive_control(
712	'shopengine_product_image_position',
713	[
714	'label' => esc_html__('Image View Position', 'shopengine'),
715	'type' => Controls_Manager::SELECT,
716	'default' => 'center',
717	'options' => [
718	'top' => esc_html__('Top', 'shopengine'),
719	'center' => esc_html__('Center', 'shopengine'),
720	'bottom' => esc_html__('Bottom', 'shopengine')
721	],
722	'selectors' => [
723	self::SELECTOR_PREFIX . '.shopengine-archive-products__left-image img' => 'object-position: {{VALUE}}',
724	],
725	]
726	);
727
728	$this->add_responsive_control(
729	'shopengine_product_image_margin',
730	[
731	'label' => esc_html__('Margin', 'shopengine'),
732	'type' => Controls_Manager::DIMENSIONS,
733	'size_units' => ['px'],
734	'selectors' => [
735	self::SELECTOR_PREFIX . '.shopengine-archive-products__left-image img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
736	'.rtl ' . self::SELECTOR_PREFIX . '.shopengine-archive-products__left-image img' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
737	],
738	'separator' => 'before',
739	]
740	);
741
742	$this->end_controls_section(); // end of Product Layout: List View
743
744	/**
745	*
746	*
747	*
748	* List View Content Style
749	*
750	*
751	*/
752	$this->start_controls_section(
753	'shopengine_product_content',
754	[
755	'label' => esc_html__('List View: Content Style', 'shopengine'),
756	'tab' => Controls_Manager::TAB_STYLE,
757	'condition' => [
758	'shopengine_view_mode_list_grid' => 'yes',
759	],
760	]
761	);
762
763	$this->add_control(
764	'shopengine_product_content_bg_color',
765	[
766	'label' => esc_html__('Background Color', 'shopengine'),
767	'type' => Controls_Manager::COLOR,
768	'alpha' => false,
769	'selectors' => [
770	self::SELECTOR_PREFIX . '.product, '
771	. self::CL_SELECTOR_PREFIX => 'background-color: {{VALUE}};',
772	],
773	]
774	);
775
776	$this->add_responsive_control(
777	'shopengine_product_content_gap',
778	[
779	'label' => esc_html__('Content gap from buttons', 'shopengine'),
780	'type' => Controls_Manager::SLIDER,
781	'size_units' => ['px'],
782	'range' => array(
783	'px' => array(
784	'min' => 1,
785	'max' => 200,
786	),
787	),
788	'default' => [
789	'unit' => 'px',
790	'size' => 25,
791	],
792
793	'selectors' => [
794	self::SELECTOR_PREFIX . '.woocommerce-LoopProduct-link' => 'margin-bottom: {{SIZE}}{{UNIT}};',
795	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart' => 'margin-top: {{SIZE}}{{UNIT}};',
796	],
797	]
798	);
799
800	$this->add_responsive_control(
801	'shopengine_product_content_padding',
802	[
803	'label' => esc_html__('Padding', 'shopengine'),
804	'type' => Controls_Manager::DIMENSIONS,
805	'size_units' => ['px'],
806	'selectors' => [
807	self::SELECTOR_PREFIX . '.product, '
808	. self::CL_SELECTOR_PREFIX => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
809	'.rtl .shopengine-archive-products.shopengine-archive-products--view-list .product, '
810	. '.rtl ' . self::CL_SELECTOR_PREFIX => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}} !important;',
811	],
812	'separator' => 'before',
813	]
814	);
815
816	$this->end_controls_section(); // end of List View Content Style
817
818
819	/*
820	=============================
821	product title start
822	=============================
823	*/
824
825	$this->start_controls_section(
826	'shopengine_section_style_title',
827	[
828	'label' => esc_html__('List View : Product Title', 'shopengine'),
829	'tab' => Controls_Manager::TAB_STYLE,
830	'condition' => [
831	'shopengine_view_mode_list_grid' => 'yes',
832	],
833	]
834	);
835
836
837	$this->add_control(
838	'shopengine_title_color',
839	[
840	'label' => esc_html__('Color', 'shopengine'),
841	'type' => Controls_Manager::COLOR,
842	'alpha' => false,
843	'default' => '#101010',
844	'selectors' => [
845	self::SELECTOR_PREFIX . 'ul.products li.product .woocommerce-loop-product__title, '
846	. self::CL_SELECTOR_PREFIX . '.shopengine-cl-title' => 'color: {{VALUE}};',
847	],
848	]
849	);
850
851	$this->add_group_control(
852	Group_Control_Typography::get_type(),
853	[
854	'name' => 'shopengine_title_color_typography',
855	'label' => esc_html__('Typography', 'shopengine'),
856	'selector' => self::SELECTOR_PREFIX . 'ul.products li.product .woocommerce-loop-product__title, '
857	. self::CL_SELECTOR_PREFIX . '.shopengine-cl-title',
858	'exclude' => ['font_family', 'letter_spacing', 'text_decoration', 'font_style'],
859	'fields_options' => [
860	'typography' => [
861	'default' => 'custom',
862	],
863	'font_weight' => [
864	'default' => '500',
865	],
866	'font_size' => [
867	'label' => esc_html__('Font Size (px)', 'shopengine'),
868	'default' => [
869	'size' => '16',
870	'unit' => 'px',
871	],
872	'size_units' => ['px'],
873	],
874	'text_transform' => [
875	'default' => 'capitalize',
876	],
877	'line_height' => [
878	'label' => esc_html__('Line Height (px)', 'shopengine'),
879	'default' => [
880	'size' => '18',
881	'unit' => 'px',
882	],
883	'size_units' => ['px'] // enable only px
884	],
885	],
886	]
887	);
888
889
890	$this->add_responsive_control(
891	'shopengine_title_padding',
892	[
893	'label' => esc_html__('Padding', 'shopengine'),
894	'type' => Controls_Manager::DIMENSIONS,
895	'size_units' => ['px'],
896	'selectors' => [
897	self::SELECTOR_PREFIX . '.product .woocommerce-loop-product__title, '
898	. self::CL_SELECTOR_PREFIX . '.shopengine-cl-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
899	'.rtl .shopengine-archive-products.shopengine-archive-products--view-list .product .woocommerce-loop-product__title, '
900	. '.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-title' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}} !important;',
901	],
902	'separator' => 'before',
903	]
904	);
905	$this->end_controls_section(); // end of product title
906
907	/*
908	=============================
909	List View: Custom Layout - Sale Badge style
910	=============================
911	*/
912	$this->start_controls_section(
913	'shopengine_cl_section_style_badge',
914	[
915	'label' => esc_html__('List View: Sale Badge', 'shopengine'),
916	'tab' => Controls_Manager::TAB_STYLE,
917	'condition' => [
918	'shopengine_view_mode_list_grid' => 'yes',
919	'shopengine_cl_show_badge' => 'yes',
920	],
921	]
922	);
923
924	$this->add_control(
925	'shopengine_cl_badge_color',
926	[
927	'label' => esc_html__('Color', 'shopengine'),
928	'type' => Controls_Manager::COLOR,
929	'alpha' => false,
930	'default' => '#FFFFFF',
931	'selectors' => [
932	self::CL_SELECTOR_PREFIX . '.shopengine-cl-badge .onsale' => 'color: {{VALUE}};',
933	],
934	]
935	);
936
937	$this->add_control(
938	'shopengine_cl_badge_bg_color',
939	[
940	'label' => esc_html__('Background Color', 'shopengine'),
941	'type' => Controls_Manager::COLOR,
942	'alpha' => false,
943	'default' => '#4285F4',
944	'selectors' => [
945	self::CL_SELECTOR_PREFIX . '.shopengine-cl-badge .onsale' => 'background-color: {{VALUE}};',
946	],
947	]
948	);
949
950	$this->add_group_control(
951	Group_Control_Typography::get_type(),
952	[
953	'name' => 'shopengine_cl_badge_typography',
954	'label' => esc_html__('Typography', 'shopengine'),
955	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-badge .onsale',
956	'exclude' => ['font_family'],
957	]
958	);
959
960	$this->add_group_control(
961	Group_Control_Border::get_type(),
962	[
963	'name' => 'shopengine_cl_badge_border',
964	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-badge .onsale',
965	]
966	);
967
968	$this->add_control(
969	'shopengine_cl_badge_radius',
970	[
971	'label' => esc_html__('Border Radius', 'shopengine'),
972	'type' => Controls_Manager::DIMENSIONS,
973	'size_units' => ['px', '%'],
974	'default' => [
975	'top' => '50',
976	'right' => '50',
977	'bottom' => '50',
978	'left' => '50',
979	'unit' => '%',
980	'isLinked' => true,
981	],
982	'selectors' => [
983	self::CL_SELECTOR_PREFIX . '.shopengine-cl-badge .onsale' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
984	],
985	]
986	);
987
988	$this->end_controls_section(); // end of List View: Custom Layout - Sale Badge style
989
990	/*
991	=============================
992	List View: Custom Layout - Category style
993	=============================
994	*/
995	$this->start_controls_section(
996	'shopengine_cl_section_style_category',
997	[
998	'label' => esc_html__('List View: Category', 'shopengine'),
999	'tab' => Controls_Manager::TAB_STYLE,
1000	'condition' => [
1001	'shopengine_view_mode_list_grid' => 'yes',
1002	'shopengine_cl_show_category' => 'yes',
1003	],
1004	]
1005	);
1006
1007	$this->add_control(
1008	'shopengine_cl_category_color',
1009	[
1010	'label' => esc_html__('Color', 'shopengine'),
1011	'type' => Controls_Manager::COLOR,
1012	'alpha' => false,
1013	'default' => '#858585',
1014	'selectors' => [
1015	self::CL_SELECTOR_PREFIX . '.shopengine-cl-category' => 'color: {{VALUE}};',
1016	],
1017	]
1018	);
1019
1020	$this->add_group_control(
1021	Group_Control_Typography::get_type(),
1022	[
1023	'name' => 'shopengine_cl_category_typography',
1024	'label' => esc_html__('Typography', 'shopengine'),
1025	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-category',
1026	'exclude' => ['font_family'],
1027	]
1028	);
1029
1030	$this->add_responsive_control(
1031	'shopengine_cl_category_margin',
1032	[
1033	'label' => esc_html__('Margin', 'shopengine'),
1034	'type' => Controls_Manager::DIMENSIONS,
1035	'size_units' => ['px'],
1036	'selectors' => [
1037	self::CL_SELECTOR_PREFIX . '.shopengine-cl-category' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1038	'.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-category' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1039	],
1040	'separator' => 'before',
1041	]
1042	);
1043
1044	$this->end_controls_section(); // end of List View: Custom Layout - Category style
1045
1046	/*
1047	=============================
1048	List View: Custom Layout - Rating style
1049	=============================
1050	*/
1051	$this->start_controls_section(
1052	'shopengine_cl_section_style_rating',
1053	[
1054	'label' => esc_html__('List View: Rating', 'shopengine'),
1055	'tab' => Controls_Manager::TAB_STYLE,
1056	'condition' => [
1057	'shopengine_view_mode_list_grid' => 'yes',
1058	'shopengine_cl_show_rating' => 'yes',
1059	],
1060	]
1061	);
1062
1063	$this->add_control(
1064	'shopengine_cl_rating_color',
1065	[
1066	'label' => esc_html__('Color', 'shopengine'),
1067	'type' => Controls_Manager::COLOR,
1068	'alpha' => false,
1069	'default' => '#FEC42D',
1070	'selectors' => [
1071	self::CL_SELECTOR_PREFIX . '.shopengine-cl-rating .star-rating' => 'color: {{VALUE}};',
1072	],
1073	]
1074	);
1075
1076	$this->add_control(
1077	'shopengine_cl_rating_empty_color',
1078	[
1079	'label' => esc_html__('Empty Star Color', 'shopengine'),
1080	'type' => Controls_Manager::COLOR,
1081	'alpha' => false,
1082	'default' => '#cfc8d8',
1083	'selectors' => [
1084	self::CL_SELECTOR_PREFIX . '.shopengine-cl-rating .star-rating::before' => 'color: {{VALUE}};',
1085	],
1086	]
1087	);
1088
1089	$this->add_control(
1090	'shopengine_cl_rating_count_color',
1091	[
1092	'label' => esc_html__('Review Count Color', 'shopengine'),
1093	'type' => Controls_Manager::COLOR,
1094	'alpha' => false,
1095	'selectors' => [
1096	self::CL_SELECTOR_PREFIX . '.shopengine-cl-rating .shopengine-product-rating-review-count' => 'color: {{VALUE}};',
1097	],
1098	]
1099	);
1100
1101	$this->add_responsive_control(
1102	'shopengine_cl_rating_size',
1103	[
1104	'label' => esc_html__('Font Size (px)', 'shopengine'),
1105	'type' => Controls_Manager::SLIDER,
1106	'size_units' => ['px'],
1107	'range' => [
1108	'px' => [
1109	'min' => 0,
1110	'max' => 50,
1111	],
1112	],
1113	'default' => [
1114	'unit' => 'px',
1115	'size' => 11,
1116	],
1117	'selectors' => [
1118	self::CL_SELECTOR_PREFIX . '.shopengine-cl-rating .star-rating, ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-rating .shopengine-product-rating-review-count' => 'font-size: {{SIZE}}{{UNIT}};',
1119	],
1120	]
1121	);
1122
1123	$this->add_responsive_control(
1124	'shopengine_cl_rating_gap',
1125	[
1126	'label' => esc_html__('Star Gap (px)', 'shopengine'),
1127	'type' => Controls_Manager::SLIDER,
1128	'size_units' => ['px'],
1129	'selectors' => [
1130	self::CL_SELECTOR_PREFIX . '.shopengine-cl-rating .star-rating' => 'letter-spacing: {{SIZE}}{{UNIT}}; width: calc(5.4em + (4 * {{SIZE}}{{UNIT}}));',
1131	'.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-rating .star-rating' => 'letter-spacing: {{SIZE}}{{UNIT}}; width: calc(5.4em + (4 * {{SIZE}}{{UNIT}}));',
1132	],
1133	]
1134	);
1135
1136	$this->add_responsive_control(
1137	'shopengine_cl_rating_margin',
1138	[
1139	'label' => esc_html__('Margin', 'shopengine'),
1140	'type' => Controls_Manager::DIMENSIONS,
1141	'size_units' => ['px'],
1142	'selectors' => [
1143	self::CL_SELECTOR_PREFIX . '.shopengine-cl-rating' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1144	'.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-rating' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1145	],
1146	'separator' => 'before',
1147	]
1148	);
1149
1150	$this->end_controls_section(); // end of List View: Custom Layout - Rating style
1151
1152	/*
1153	=============================
1154	List View: Custom Layout - Price style
1155	=============================
1156	*/
1157	$this->start_controls_section(
1158	'shopengine_cl_section_style_price',
1159	[
1160	'label' => esc_html__('List View: Price', 'shopengine'),
1161	'tab' => Controls_Manager::TAB_STYLE,
1162	'condition' => [
1163	'shopengine_view_mode_list_grid' => 'yes',
1164	],
1165	]
1166	);
1167
1168	$this->add_control(
1169	'shopengine_cl_price_color',
1170	[
1171	'label' => esc_html__('Color', 'shopengine'),
1172	'type' => Controls_Manager::COLOR,
1173	'alpha' => false,
1174	'default' => '#101010',
1175	'selectors' => [
1176	self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .amount' => 'color: {{VALUE}};',
1177	],
1178	]
1179	);
1180
1181	$this->add_group_control(
1182	Group_Control_Typography::get_type(),
1183	[
1184	'name' => 'shopengine_cl_price_typography',
1185	'label' => esc_html__('Typography', 'shopengine'),
1186	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .amount',
1187	'exclude' => ['font_family'],
1188	]
1189	);
1190
1191	$this->add_responsive_control(
1192	'shopengine_cl_price_margin',
1193	[
1194	'label' => esc_html__('Margin', 'shopengine'),
1195	'type' => Controls_Manager::DIMENSIONS,
1196	'size_units' => ['px'],
1197	'selectors' => [
1198	self::CL_SELECTOR_PREFIX . '.shopengine-cl-price' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1199	'.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-price' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1200	],
1201	'separator' => 'before',
1202	]
1203	);
1204
1205	$this->end_controls_section(); // end of List View: Custom Layout - Price style
1206
1207	/*
1208	=============================
1209	List View: Custom Layout - Off Tag style
1210	=============================
1211	*/
1212	$this->start_controls_section(
1213	'shopengine_cl_section_style_off_tag',
1214	[
1215	'label' => esc_html__('List View: Off Tag', 'shopengine'),
1216	'tab' => Controls_Manager::TAB_STYLE,
1217	'condition' => [
1218	'shopengine_view_mode_list_grid' => 'yes',
1219	'shopengine_cl_show_off_tag' => 'yes',
1220	],
1221	]
1222	);
1223
1224	$this->add_control(
1225	'shopengine_cl_off_tag_color',
1226	[
1227	'label' => esc_html__('Color', 'shopengine'),
1228	'type' => Controls_Manager::COLOR,
1229	'alpha' => false,
1230	'default' => '#FFFFFF',
1231	'selectors' => [
1232	self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .shopengine-cl-off-tag' => 'color: {{VALUE}};',
1233	],
1234	]
1235	);
1236
1237	$this->add_control(
1238	'shopengine_cl_off_tag_bg_color',
1239	[
1240	'label' => esc_html__('Background', 'shopengine'),
1241	'type' => Controls_Manager::COLOR,
1242	'alpha' => false,
1243	'default' => '#F54F29',
1244	'selectors' => [
1245	self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .shopengine-cl-off-tag' => 'background: {{VALUE}};',
1246	],
1247	]
1248	);
1249
1250	$this->add_responsive_control(
1251	'shopengine_cl_off_tag_padding',
1252	[
1253	'label' => esc_html__('Padding', 'shopengine'),
1254	'type' => Controls_Manager::DIMENSIONS,
1255	'size_units' => ['px'],
1256	'default' => [
1257	'top' => '0',
1258	'right' => '10',
1259	'bottom' => '0',
1260	'left' => '10',
1261	'unit' => 'px',
1262	'isLinked' => false,
1263	],
1264	'selectors' => [
1265	self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .shopengine-cl-off-tag' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1266	'.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .shopengine-cl-off-tag' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1267	],
1268	]
1269	);
1270
1271	$this->add_control(
1272	'shopengine_cl_off_tag_radius',
1273	[
1274	'label' => esc_html__('Border Radius', 'shopengine'),
1275	'type' => Controls_Manager::DIMENSIONS,
1276	'size_units' => ['px'],
1277	'default' => [
1278	'top' => '4',
1279	'right' => '4',
1280	'bottom' => '4',
1281	'left' => '4',
1282	'unit' => 'px',
1283	'isLinked' => true,
1284	],
1285	'selectors' => [
1286	self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .shopengine-cl-off-tag' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1287	'.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .shopengine-cl-off-tag' => 'border-radius: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1288	],
1289	]
1290	);
1291
1292	$this->end_controls_section(); // end of List View: Custom Layout - Off Tag style
1293
1294	/*
1295	=============================
1296	List View: Custom Layout - Description style
1297	=============================
1298	*/
1299	$this->start_controls_section(
1300	'shopengine_cl_section_style_excerpt',
1301	[
1302	'label' => esc_html__('List View: Description', 'shopengine'),
1303	'tab' => Controls_Manager::TAB_STYLE,
1304	'condition' => [
1305	'shopengine_view_mode_list_grid' => 'yes',
1306	'shopengine_cl_show_excerpt' => 'yes',
1307	],
1308	]
1309	);
1310
1311	$this->add_control(
1312	'shopengine_cl_excerpt_color',
1313	[
1314	'label' => esc_html__('Color', 'shopengine'),
1315	'type' => Controls_Manager::COLOR,
1316	'alpha' => false,
1317	'selectors' => [
1318	self::CL_SELECTOR_PREFIX . '.shopengine-cl-excerpt' => 'color: {{VALUE}};',
1319	],
1320	]
1321	);
1322
1323	$this->add_group_control(
1324	Group_Control_Typography::get_type(),
1325	[
1326	'name' => 'shopengine_cl_excerpt_typography',
1327	'label' => esc_html__('Typography', 'shopengine'),
1328	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-excerpt',
1329	'exclude' => ['font_family'],
1330	]
1331	);
1332
1333	$this->add_responsive_control(
1334	'shopengine_cl_excerpt_margin',
1335	[
1336	'label' => esc_html__('Margin', 'shopengine'),
1337	'type' => Controls_Manager::DIMENSIONS,
1338	'size_units' => ['px'],
1339	'selectors' => [
1340	self::CL_SELECTOR_PREFIX . '.shopengine-cl-excerpt' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1341	'.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-excerpt' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1342	],
1343	'separator' => 'before',
1344	]
1345	);
1346
1347	$this->end_controls_section(); // end of List View: Custom Layout - Description style
1348
1349	/*
1350	=============================
1351	List View: Add to Cart
1352	=============================
1353	*/
1354	$this->start_controls_section(
1355	'shopengine_cl_section_style_cart',
1356	[
1357	'label' => esc_html__('List View: Add to Cart', 'shopengine'),
1358	'tab' => Controls_Manager::TAB_STYLE,
1359	'condition' => [
1360	'shopengine_view_mode_list_grid' => 'yes',
1361	],
1362	]
1363	);
1364
1365	$cl_cart_btn_sel = 'a.add_to_cart_button, a.product_type_variable, a.product_type_grouped, a.product_type_external';
1366
1367	$this->add_control(
1368	'shopengine_cl_cart_btn_bg_clr',
1369	[
1370	'label' => esc_html__('Background Color', 'shopengine'),
1371	'type' => Controls_Manager::COLOR,
1372	'default' => '#4361EE',
1373	'selectors' => [
1374	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')' => 'background: {{VALUE}} !important;',
1375	],
1376	]
1377	);
1378
1379	$this->add_control(
1380	'shopengine_cl_cart_btn_hbg_clr',
1381	[
1382	'label' => esc_html__('Hover Background Color', 'shopengine'),
1383	'type' => Controls_Manager::COLOR,
1384	'default' => '#354EC9',
1385	'selectors' => [
1386	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . '):hover' => 'background: {{VALUE}} !important;',
1387	],
1388	]
1389	);
1390
1391	$this->add_control(
1392	'shopengine_cl_cart_btn_clr',
1393	[
1394	'label' => esc_html__('Text/Icon Color', 'shopengine'),
1395	'type' => Controls_Manager::COLOR,
1396	'default' => '#FFFFFF',
1397	'selectors' => [
1398	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')' => 'color: {{VALUE}} !important;',
1399	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ') :is(i, span, svg, path)' => 'color: {{VALUE}} !important; fill: {{VALUE}} !important;',
1400	],
1401	]
1402	);
1403
1404	$this->add_control(
1405	'shopengine_cl_cart_btn_hover_clr',
1406	[
1407	'label' => esc_html__('Hover Text/Icon Color', 'shopengine'),
1408	'type' => Controls_Manager::COLOR,
1409	'default' => '#FFFFFF',
1410	'selectors' => [
1411	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . '):hover' => 'color: {{VALUE}} !important;',
1412	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . '):hover :is(i, span, svg, path)' => 'color: {{VALUE}} !important; fill: {{VALUE}} !important;',
1413	],
1414	]
1415	);
1416
1417	$this->add_group_control(
1418	Group_Control_Typography::get_type(),
1419	[
1420	'name' => 'shopengine_cl_cart_btn_typography',
1421	'label' => esc_html__('Typography', 'shopengine'),
1422	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')',
1423	'exclude' => ['font_family'],
1424	]
1425	);
1426
1427	$this->add_group_control(
1428	Group_Control_Border::get_type(),
1429	[
1430	'name' => 'shopengine_cl_cart_btn_border',
1431	'fields_options' => [
1432	'border' => [],
1433	'width' => [
1434	'label' => esc_html__('Border Width', 'shopengine'),
1435	'default' => [
1436	'top' => '0',
1437	'right' => '0',
1438	'bottom' => '0',
1439	'left' => '0',
1440	],
1441	],
1442	'color' => [
1443	'label' => esc_html__('Border Color', 'shopengine'),
1444	],
1445	],
1446	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')',
1447	]
1448	);
1449
1450	$this->add_group_control(
1451	Group_Control_Border::get_type(),
1452	[
1453	'name' => 'shopengine_cl_cart_btn_border_hover',
1454	'fields_options' => [
1455	'border' => [
1456	'label' => esc_html__('Hover Border Type', 'shopengine'),
1457	],
1458	'width' => [
1459	'label' => esc_html__('Border Width', 'shopengine'),
1460	'default' => [
1461	'top' => '0',
1462	'right' => '0',
1463	'bottom' => '0',
1464	'left' => '0',
1465	],
1466	],
1467	'color' => [
1468	'label' => esc_html__('Border Color', 'shopengine'),
1469	],
1470	],
1471	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . '):hover',
1472	]
1473	);
1474
1475	$this->add_responsive_control(
1476	'shopengine_cl_cart_btn_radius',
1477	[
1478	'label' => esc_html__('Border Radius', 'shopengine'),
1479	'type' => Controls_Manager::DIMENSIONS,
1480	'size_units' => ['px', '%'],
1481	'default' => [
1482	'top' => '50',
1483	'right' => '50',
1484	'bottom' => '50',
1485	'left' => '50',
1486	'unit' => 'px',
1487	'isLinked' => true,
1488	],
1489	'selectors' => [
1490	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
1491	],
1492	]
1493	);
1494
1495	$this->add_responsive_control(
1496	'shopengine_cl_cart_btn_width',
1497	[
1498	'label' => esc_html__('Width', 'shopengine'),
1499	'type' => Controls_Manager::SLIDER,
1500	'size_units' => ['px', '%'],
1501	'range' => [
1502	'px' => [
1503	'min' => 0,
1504	'max' => 400,
1505	],
1506	'%' => [
1507	'min' => 0,
1508	'max' => 100,
1509	],
1510	],
1511	'selectors' => [
1512	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')' => 'width: {{SIZE}}{{UNIT}} !important; flex: none;',
1513	],
1514	]
1515	);
1516
1517	$this->add_responsive_control(
1518	'shopengine_cl_cart_btn_padding',
1519	[
1520	'label' => esc_html__('Padding', 'shopengine'),
1521	'type' => Controls_Manager::DIMENSIONS,
1522	'size_units' => ['px'],
1523	'default' => [
1524	'top' => '14',
1525	'right' => '28',
1526	'bottom' => '14',
1527	'left' => '28',
1528	'unit' => 'px',
1529	'isLinked' => false,
1530	],
1531	'selectors' => [
1532	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
1533	'.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}} !important;',
1534	],
1535	'separator' => 'before',
1536	]
1537	);
1538
1539	$this->add_responsive_control(
1540	'shopengine_cl_cart_btn_margin',
1541	[
1542	'label' => esc_html__('Margin', 'shopengine'),
1543	'type' => Controls_Manager::DIMENSIONS,
1544	'size_units' => ['px'],
1545	'selectors' => [
1546	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1547	'.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1548	],
1549	]
1550	);
1551
1552	$this->add_group_control(
1553	Group_Control_Box_Shadow::get_type(),
1554	[
1555	'name' => 'shopengine_cl_cart_btn_box_shadow',
1556	'fields_options' => [
1557	'box_shadow' => [
1558	'default' => [
1559	'horizontal' => 0,
1560	'vertical' => 1,
1561	'blur' => 3,
1562	'spread' => 0,
1563	'color' => 'rgba(0,0,0,0.06)',
1564	],
1565	],
1566	],
1567	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_cart_btn_sel . ')',
1568	]
1569	);
1570
1571	$this->end_controls_section(); // end of List View: Add to Cart
1572
1573	/*
1574	=============================
1575	List View: Action Buttons
1576	=============================
1577	*/
1578	$this->start_controls_section(
1579	'shopengine_cl_section_style_action_btns',
1580	[
1581	'label' => esc_html__('List View: Action Buttons', 'shopengine'),
1582	'tab' => Controls_Manager::TAB_STYLE,
1583	'condition' => [
1584	'shopengine_view_mode_list_grid' => 'yes',
1585	],
1586	]
1587	);
1588
1589	$cl_action_btn_sel = '.shopengine-wishlist, .shopengine-comparison, .shopengine-quickview-trigger, .shopengine_direct_checkout';
1590
1591	$this->add_control(
1592	'shopengine_cl_action_btn_bg_clr',
1593	[
1594	'label' => esc_html__('Background Color', 'shopengine'),
1595	'type' => Controls_Manager::COLOR,
1596	'default' => '#FFFFFF',
1597	'selectors' => [
1598	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ')' => 'background: {{VALUE}} !important;',
1599	],
1600	]
1601	);
1602
1603	$this->add_control(
1604	'shopengine_cl_action_btn_hover_active_bg_clr',
1605	[
1606	'label' => esc_html__('Hover and Active Background Color', 'shopengine'),
1607	'type' => Controls_Manager::COLOR,
1608	'default' => '#FFFFFF',
1609	'selectors' => [
1610	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . '):hover' => 'background: {{VALUE}} !important;',
1611	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ').active' => 'background: {{VALUE}} !important;',
1612	],
1613	]
1614	);
1615
1616	$this->add_control(
1617	'shopengine_cl_action_btn_clr',
1618	[
1619	'label' => esc_html__('Icon Color', 'shopengine'),
1620	'type' => Controls_Manager::COLOR,
1621	'default' => '#101010',
1622	'selectors' => [
1623	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ')' => 'color: {{VALUE}} !important;',
1624	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ') :is(i, span, svg, path)' => 'color: {{VALUE}} !important; fill: {{VALUE}} !important;',
1625	],
1626	]
1627	);
1628
1629	$this->add_control(
1630	'shopengine_cl_action_btn_hover_active_clr',
1631	[
1632	'label' => esc_html__('Hover and Active Color', 'shopengine'),
1633	'type' => Controls_Manager::COLOR,
1634	'default' => '#F03D3F',
1635	'selectors' => [
1636	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . '):hover' => 'color: {{VALUE}} !important;',
1637	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . '):hover :is(i, span, svg, path)' => 'color: {{VALUE}} !important; fill: {{VALUE}} !important;',
1638	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ').active' => 'color: {{VALUE}} !important;',
1639	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ').active :is(i, span, svg, path)' => 'color: {{VALUE}} !important; fill: {{VALUE}} !important;',
1640	],
1641	]
1642	);
1643
1644	$this->add_group_control(
1645	Group_Control_Border::get_type(),
1646	[
1647	'name' => 'shopengine_cl_action_btn_border',
1648	'fields_options' => [
1649	'border' => [
1650	'default' => 'solid',
1651	],
1652	'width' => [
1653	'label' => esc_html__('Border Width', 'shopengine'),
1654	'default' => [
1655	'top' => '1',
1656	'right' => '1',
1657	'bottom' => '1',
1658	'left' => '1',
1659	],
1660	],
1661	'color' => [
1662	'label' => esc_html__('Border Color', 'shopengine'),
1663	'default' => '#f2f2f2',
1664	],
1665	],
1666	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ')',
1667	]
1668	);
1669
1670	$this->add_group_control(
1671	Group_Control_Border::get_type(),
1672	[
1673	'name' => 'shopengine_cl_action_btn_border_hover',
1674	'fields_options' => [
1675	'border' => [
1676	'label' => esc_html__('Hover Border Type', 'shopengine'),
1677	'default' => 'solid',
1678	],
1679	'width' => [
1680	'label' => esc_html__('Border Width', 'shopengine'),
1681	'default' => [
1682	'top' => '1',
1683	'right' => '1',
1684	'bottom' => '1',
1685	'left' => '1',
1686	],
1687	],
1688	'color' => [
1689	'label' => esc_html__('Border Color', 'shopengine'),
1690	'default' => '#f2f2f2',
1691	],
1692	],
1693	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . '):hover',
1694	]
1695	);
1696
1697	$this->add_control(
1698	'shopengine_cl_action_btn_icon_size',
1699	[
1700	'label' => esc_html__('Icon Size', 'shopengine'),
1701	'type' => Controls_Manager::SLIDER,
1702	'size_units' => ['px'],
1703	'range' => [
1704	'px' => [
1705	'min' => 0,
1706	'max' => 100,
1707	'step' => 1,
1708	],
1709	],
1710	'default' => [
1711	'unit' => 'px',
1712	'size' => 18,
1713	],
1714	'selectors' => [
1715	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ') :is(svg)' => 'width: {{SIZE}}{{UNIT}} !important;',
1716	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ') :is(i)::before' => 'font-size: {{SIZE}}{{UNIT}} !important;',
1717	],
1718	]
1719	);
1720
1721	$this->add_responsive_control(
1722	'shopengine_cl_action_btn_padding',
1723	[
1724	'label' => esc_html__('Padding', 'shopengine'),
1725	'type' => Controls_Manager::DIMENSIONS,
1726	'size_units' => ['px'],
1727	'default' => [
1728	'top' => '5',
1729	'right' => '5',
1730	'bottom' => '5',
1731	'left' => '5',
1732	'unit' => 'px',
1733	'isLinked' => false,
1734	],
1735	'selectors' => [
1736	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ')' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
1737	'.rtl ' . self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ')' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}} !important;',
1738	],
1739	]
1740	);
1741
1742	$this->add_responsive_control(
1743	'shopengine_cl_action_btn_radius',
1744	[
1745	'label' => esc_html__('Border Radius', 'shopengine'),
1746	'type' => Controls_Manager::DIMENSIONS,
1747	'size_units' => ['px', '%'],
1748	'default' => [
1749	'top' => '50',
1750	'right' => '50',
1751	'bottom' => '50',
1752	'left' => '50',
1753	'unit' => '%',
1754	'isLinked' => true,
1755	],
1756	'selectors' => [
1757	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ')' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
1758	],
1759	]
1760	);
1761
1762	$this->add_responsive_control(
1763	'shopengine_cl_action_btn_width',
1764	[
1765	'label' => esc_html__('Width', 'shopengine'),
1766	'type' => Controls_Manager::SLIDER,
1767	'size_units' => ['px'],
1768	'range' => [
1769	'px' => [
1770	'min' => 0,
1771	'max' => 100,
1772	],
1773	],
1774	'default' => [
1775	'unit' => 'px',
1776	'size' => 44,
1777	],
1778	'selectors' => [
1779	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ')' => 'width: {{SIZE}}{{UNIT}} !important; box-sizing: border-box !important;',
1780	],
1781	]
1782	);
1783
1784	$this->add_responsive_control(
1785	'shopengine_cl_action_btn_height',
1786	[
1787	'label' => esc_html__('Height', 'shopengine'),
1788	'type' => Controls_Manager::SLIDER,
1789	'size_units' => ['px'],
1790	'range' => [
1791	'px' => [
1792	'min' => 0,
1793	'max' => 100,
1794	],
1795	],
1796	'default' => [
1797	'unit' => 'px',
1798	'size' => 44,
1799	],
1800	'selectors' => [
1801	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ')' => 'height: {{SIZE}}{{UNIT}} !important; box-sizing: border-box !important;',
1802	],
1803	]
1804	);
1805
1806	$this->add_control(
1807	'shopengine_cl_action_btn_gap',
1808	[
1809	'label' => esc_html__('Gap', 'shopengine'),
1810	'type' => Controls_Manager::SLIDER,
1811	'size_units' => ['px'],
1812	'range' => [
1813	'px' => [
1814	'min' => 0,
1815	'max' => 100,
1816	'step' => 1,
1817	],
1818	],
1819	'default' => [
1820	'unit' => 'px',
1821	'size' => 10,
1822	],
1823	'selectors' => [
1824	self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart' => 'column-gap: {{SIZE}}{{UNIT}} !important; row-gap: {{SIZE}}{{UNIT}} !important; gap: {{SIZE}}{{UNIT}} !important;',
1825	],
1826	]
1827	);
1828
1829	$this->add_group_control(
1830	Group_Control_Box_Shadow::get_type(),
1831	[
1832	'name' => 'shopengine_cl_action_btn_box_shadow',
1833	'fields_options' => [
1834	'box_shadow' => [
1835	'default' => [
1836	'horizontal' => 0,
1837	'vertical' => 1,
1838	'blur' => 3,
1839	'spread' => 0,
1840	'color' => 'rgba(0,0,0,0.06)',
1841	],
1842	],
1843	],
1844	'selector' => self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(' . $cl_action_btn_sel . ')',
1845	]
1846	);
1847
1848	$this->end_controls_section(); // end of List View: Action Buttons
1849
1850	/*
1851	=============================
1852	Global Font Family
1853	=============================
1854	*/
1855	$this->start_controls_section(
1856	'shopengine_global_font_family_section',
1857	[
1858	'label' => esc_html__('Global Font Family', 'shopengine'),
1859	'tab' => Controls_Manager::TAB_STYLE,
1860	'condition' => [
1861	'shopengine_view_mode_list_grid' => 'yes',
1862	],
1863	]
1864	);
1865
1866	$this->add_control(
1867	'shopengine_global_font_family',
1868	[
1869	'label' => esc_html__('Font Family', 'shopengine'),
1870	'type' => Controls_Manager::FONT,
1871	'selectors' => [
1872	self::SELECTOR_PREFIX . 'ul.products li.product .woocommerce-loop-product__title, '
1873	. self::CL_SELECTOR_PREFIX . '.shopengine-cl-category, '
1874	. self::CL_SELECTOR_PREFIX . '.shopengine-cl-title, '
1875	. self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .amount, '
1876	. self::CL_SELECTOR_PREFIX . '.shopengine-cl-price .shopengine-cl-off-tag, '
1877	. self::CL_SELECTOR_PREFIX . '.shopengine-cl-excerpt, '
1878	. self::CL_SELECTOR_PREFIX . '.shopengine-cl-rating .shopengine-product-rating-review-count, '
1879	. self::CL_SELECTOR_PREFIX . '.shopengine-cl-add-to-cart :is(a.add_to_cart_button, a.product_type_variable, a.product_type_grouped, a.product_type_external)' => 'font-family: "{{VALUE}}";',
1880	],
1881	]
1882	);
1883
1884	$this->end_controls_section(); // end of Global Font Family
1885	}
1886
1887	/**
1888	* Custom List Layout ordering CSS.
1889	*
1890	* Emitted from this widget's own render — the same approach Archive Products already
1891	* uses for its own ordering controls (generate_order_item_css()) — so that Elementor's
1892	* per-widget live re-render updates the order while editing, without reloading the preview.
1893	*/
1894	private function generate_cl_order_css($settings) {
1895
1896	if(($settings['shopengine_view_mode_list_grid'] ?? '') !== 'yes') {
1897	return;
1898	}
1899
1900	$parent = '.shopengine-archive-products--custom-list .shopengine-cl-content';
1901
1902	$content_selectors = [
1903	'badge' => '.shopengine-cl-badge',
1904	'category' => '.shopengine-cl-category',
1905	'rating' => '.shopengine-cl-rating',
1906	'title' => '.shopengine-cl-title',
1907	'price' => '.shopengine-cl-price',
1908	'excerpt' => '.shopengine-cl-excerpt',
1909	'add-to-cart' => '.shopengine-cl-add-to-cart',
1910	];
1911
1912	$btn_selectors = [
1913	'add-to-cart' => ['a.add_to_cart_button', 'a.product_type_variable', 'a.product_type_grouped', 'a.product_type_external'],
1914	'wishlist' => ['.shopengine-wishlist'],
1915	'comparison' => ['.shopengine-comparison'],
1916	'quick-view' => ['.shopengine-quickview-trigger'],
1917	'direct-checkout' => ['a.shopengine_direct_checkout'],
1918	];
1919
1920	$styles = '';
1921
1922	if(!empty($settings['shopengine_cl_ordering_list'])) {
1923
1924	foreach($settings['shopengine_cl_ordering_list'] as $key => $item) {
1925
1926	if(!empty($content_selectors[$item['list_key']])) {
1927
1928	$styles .= $parent . ' ' . $content_selectors[$item['list_key']] . '{order: ' . ($key + 1) . ';}';
1929	}
1930	}
1931	}
1932
1933	if(!empty($settings['shopengine_cl_action_btns_ordering_list'])) {
1934
1935	$btn_parent = $parent . ' .shopengine-cl-add-to-cart';
1936
1937	foreach($settings['shopengine_cl_action_btns_ordering_list'] as $key => $item) {
1938
1939	if(empty($btn_selectors[$item['list_key']])) {
1940	continue;
1941	}
1942
1943	foreach($btn_selectors[$item['list_key']] as $btn_selector) {
1944
1945	$styles .= $btn_parent . ' ' . $btn_selector . '{order: ' . ($key + 1) . ';}';
1946	}
1947	}
1948	}
1949
1950	if($styles) {
1951	echo '<style>';
1952	shopengine_content_render($styles);
1953	echo '</style>';
1954	}
1955	}
1956
1957	/**
1958	* Custom List Layout element visibility CSS.
1959	*
1960	* Emitted from this widget's own render for the same reason as
1961	* generate_cl_order_css() above: the show/hide settings live on this
1962	* widget but the markup they target belongs to Archive Products, so a
1963	* PHP-side check in that widget's render never live-updates while
1964	* editing this widget's switches. CSS from here does.
1965	*/
1966	private function generate_cl_visibility_css($settings) {
1967
1968	if(($settings['shopengine_view_mode_list_grid'] ?? '') !== 'yes') {
1969	return;
1970	}
1971
1972	$content_parent = '.shopengine-archive-products--custom-list .shopengine-cl-content';
1973	$btn_parent = $content_parent . ' .shopengine-cl-add-to-cart';
1974
1975	$toggle_selectors = [
1976	'shopengine_cl_show_badge' => $content_parent . ' .shopengine-cl-badge',
1977	'shopengine_cl_show_category' => $content_parent . ' .shopengine-cl-category',
1978	'shopengine_cl_show_rating' => $content_parent . ' .shopengine-cl-rating',
1979	'shopengine_cl_show_excerpt' => $content_parent . ' .shopengine-cl-excerpt',
1980	'shopengine_cl_show_quickview' => $btn_parent . ' .shopengine-quickview-trigger',
1981	'shopengine_cl_show_wishlist' => $btn_parent . ' .shopengine-wishlist',
1982	'shopengine_cl_show_comparison' => $btn_parent . ' .shopengine-comparison',
1983	'shopengine_cl_show_direct_checkout' => $btn_parent . ' a.shopengine_direct_checkout',
1984	];
1985
1986	$styles = '';
1987
1988	foreach($toggle_selectors as $setting_key => $selector) {
1989
1990	// Elementor switchers store the return_value ('yes') when on and an
1991	// empty string when off — never 'no' — so test against 'yes'.
1992	if(($settings[$setting_key] ?? 'yes') !== 'yes') {
1993
1994	$styles .= $selector . '{display: none !important;}';
1995	}
1996	}
1997
1998	// "Max Categories": shopengine_render_list_custom_content() always renders up to
1999	// a fixed cap of 10 terms server-side, and the actual configured limit is enforced
2000	// purely here via CSS — so, like the toggles above, it can live-update in the
2001	// editor without a page reload.
2002	$cl_cats_max = isset($settings['shopengine_cl_category_max']) ? (int) $settings['shopengine_cl_category_max'] : 1;
2003	$cl_cats_max = max(1, min(10, $cl_cats_max));
2004	$styles .= $content_parent . ' .shopengine-cl-category li:nth-child(n+' . ($cl_cats_max + 1) . ') {display: none !important;}';
2005
2006	if($styles) {
2007	echo '<style>';
2008	shopengine_content_render($styles);
2009	echo '</style>';
2010	}
2011	}
2012
2013	protected function screen() {
2014	$settings = $this->get_settings_for_display();
2015
2016	$this->generate_cl_order_css($settings);
2017	$this->generate_cl_visibility_css($settings);
2018
2019	$tpl = Products::instance()->get_widget_template($this->get_name());
2020
2021	include $tpl;
2022	}
2023	}
2024