archive-view-mode.php — ShopEngine Elementor WooCommerce Builder Addon – All in One WooCommerce Solution 4.6.9

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 3 years ago

archive-view-mode.php

608 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
15	public function config() {
16	return new ShopEngine_Archive_View_Mode_Config();
17	}
18
19	protected function register_controls() {
20	$this->start_controls_section(
21	'shopengine_view_mode_section',
22	[
23	'label' => __('View Mode', 'shopengine'),
24	'tab' => Controls_Manager::TAB_CONTENT,
25	]
26	);
27
28	$this->add_control(
29	'shopengine_view_mode_four_grid',
30	[
31	'label' => esc_html__( 'Show Four Grid', 'shopengine' ),
32	'type' => \Elementor\Controls_Manager::SWITCHER,
33	'label_on' => esc_html__( 'Show', 'shopengine' ),
34	'label_off' => esc_html__( 'Hide', 'shopengine' ),
35	'return_value' => 'yes',
36	'default' => 'yes',
37	]
38	);
39
40
41	$this->add_control(
42	'shopengine_view_mode_four_grid_icon',
43	[
44	'label' => esc_html__( 'Four Grid Icon', 'shopengine' ),
45	'type' => \Elementor\Controls_Manager::ICONS,
46	'separator' => 'after',
47	'default' => [
48	'value' => 'shopengine-icon shopengine-icon-grid-1',
49	'library' => 'shopengine-icons',
50	],
51	'condition' => [
52	'shopengine_view_mode_four_grid' => 'yes',
53	],
54	]
55	);
56
57	$this->add_control(
58	'shopengine_view_mode_three_grid',
59	[
60	'label' => esc_html__( 'Show Three Grid', 'shopengine' ),
61	'type' => \Elementor\Controls_Manager::SWITCHER,
62	'label_on' => esc_html__( 'Show', 'shopengine' ),
63	'label_off' => esc_html__( 'Hide', 'shopengine' ),
64	'return_value' => 'yes',
65	'default' => '',
66	]
67	);
68
69	$this->add_control(
70	'shopengine_view_mode_three_grid_icon',
71	[
72	'label' => esc_html__( 'Three Grid Icon', 'shopengine' ),
73	'type' => \Elementor\Controls_Manager::ICONS,
74	'separator' => 'after',
75	'default' => [
76	'value' => 'eicon-gallery-grid',
77	'library' => 'eicon',
78	],
79	'condition' => [
80	'shopengine_view_mode_three_grid' => 'yes',
81	],
82	]
83	);
84
85	$this->add_control(
86	'shopengine_view_mode_two_grid',
87	[
88	'label' => esc_html__( 'Show Two Grid', 'shopengine' ),
89	'type' => \Elementor\Controls_Manager::SWITCHER,
90	'label_on' => esc_html__( 'Show', 'shopengine' ),
91	'label_off' => esc_html__( 'Hide', 'shopengine' ),
92	'return_value' => 'yes',
93	'default' => '',
94	]
95	);
96
97	$this->add_control(
98	'shopengine_view_mode_two_grid_icon',
99	[
100	'label' => esc_html__( 'Two Grid Icon', 'shopengine' ),
101	'type' => \Elementor\Controls_Manager::ICONS,
102	'separator' => 'after',
103	'default' => [
104	'value' => 'shopengine-icon shopengine-icon-grid-3',
105	'library' => 'shopengine-icons',
106	],
107	'condition' => [
108	'shopengine_view_mode_two_grid' => 'yes',
109	],
110	]
111	);
112
113	$this->add_control(
114	'shopengine_view_mode_list_grid',
115	[
116	'label' => esc_html__( 'Show List Grid', 'shopengine' ),
117	'type' => \Elementor\Controls_Manager::SWITCHER,
118	'label_on' => esc_html__( 'Show', 'shopengine' ),
119	'label_off' => esc_html__( 'Hide', 'shopengine' ),
120	'return_value' => 'yes',
121	'default' => 'yes',
122	]
123	);
124
125	$this->add_control(
126	'shopengine_view_mode_list_grid_icon',
127	[
128	'label' => esc_html__( 'List Icon', 'shopengine' ),
129	'type' => \Elementor\Controls_Manager::ICONS,
130	'default' => [
131	'value' => 'shopengine-icon shopengine-icon-grid-2',
132	'library' => 'shopengine-icons',
133	],
134	'condition' => [
135	'shopengine_view_mode_list_grid' => 'yes',
136	],
137	]
138	);
139
140	$this->end_controls_section();
141	$this->start_controls_section(
142	'shopengine_section_style',
143	[
144	'label' => esc_html__('View Mode Button', 'shopengine'),
145	'tab' => Controls_Manager::TAB_STYLE,
146	]
147	);
148
149	$this->add_control(
150	'shopengine_view_mode_icon_size',
151	[
152	'label' => esc_html__('Icon Size (px)', 'shopengine'),
153	'type' => Controls_Manager::SLIDER,
154	'size_units' => ['px'],
155	'range' => array(
156	'px' => array(
157	'min' => 1,
158	'max' => 100,
159	),
160	),
161	'default' => [
162	'unit' => 'px',
163	'size' => 18,
164	],
165	'selectors' => [
166	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch' => 'font-size: {{SIZE}}{{UNIT}};',
167	],
168	]
169	);
170
171	$this->add_control(
172	'shopengine_view_mode_icon_box_size',
173	[
174	'label' => esc_html__('Icon Box Size (px)', 'shopengine'),
175	'type' => Controls_Manager::SLIDER,
176	'size_units' => ['px'],
177	'range' => array(
178	'px' => array(
179	'min' => 1,
180	'max' => 100,
181	),
182	),
183	'default' => [
184	'unit' => 'px',
185	'size' => 52,
186	],
187	'selectors' => [
188	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
189	],
190	]
191	);
192
193	$this->add_control(
194	'shopengine_view_mode_alignment',
195	[
196	'label' => esc_html__('Alignment', 'shopengine'),
197	'type' => Controls_Manager::CHOOSE,
198	'options' => [
199	'start' => [
200	'description' => esc_html__('Left', 'shopengine'),
201	'icon' => 'eicon-text-align-left',
202	],
203	'center' => [
204	'description' => esc_html__('Center', 'shopengine'),
205	'icon' => 'eicon-text-align-center',
206	],
207	'flex-end' => [
208	'description' => esc_html__('Right', 'shopengine'),
209	'icon' => 'eicon-text-align-right',
210	],
211	],
212	'selectors' => [
213	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list' => 'justify-content: {{VALUE}};',
214	'.rtl {{WRAPPER}}.elementor-view-align-start .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list' => 'justify-content: start;',
215	'.rtl {{WRAPPER}}.elementor-view-align-flex-end .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list' => 'justify-content: end;',
216	],
217	'prefix_class' => 'elementor-view-align-',
218	]
219	);
220
221	$this->start_controls_tabs('shopengine_view_mode_tabs_style');
222
223	$this->start_controls_tab(
224	'shopengine_view_mode_tabnormal',
225	[
226	'label' => esc_html__('Normal', 'shopengine'),
227	]
228	);
229
230	$this->add_control(
231	'shopengine_view_mode_color',
232	[
233	'label' => esc_html__('Color', 'shopengine'),
234	'type' => Controls_Manager::COLOR,
235	'default' => '#a7a7a7',
236	'alpha' => false,
237	'selectors' => [
238	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch' => 'color: {{VALUE}};',
239	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch svg path' => 'stroke: {{VALUE}};',
240	],
241	]
242	);
243
244	$this->add_control(
245	'shopengine_view_mode_background',
246	[
247	'label' => esc_html__('Background Color', 'shopengine'),
248	'type' => Controls_Manager::COLOR,
249	'default' => '#fff',
250	'alpha' => false,
251	'selectors' => [
252	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch' => 'background-color: {{VALUE}};',
253	],
254	]
255	);
256
257	$this->end_controls_tab();
258
259	$this->start_controls_tab(
260	'shopengine_view_mode_tabhover',
261	[
262	'label' => esc_html__('Hover & Active', 'shopengine'),
263	]
264	);
265
266	$this->add_control(
267	'shopengine_view_mode_color_hover',
268	[
269	'label' => esc_html__('Color', 'shopengine'),
270	'type' => Controls_Manager::COLOR,
271	'alpha' => false,
272	'selectors' => [
273	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch:hover' => 'color: {{VALUE}};',
274	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch.isactive' => 'color: {{VALUE}};',
275	'{{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',
276	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch.isactive svg path' => 'stroke: {{VALUE}};',
277	],
278	'default' => '#ff3f00',
279	]
280	);
281
282	$this->add_control(
283	'shopengine_view_mode_background_hover',
284	[
285	'label' => esc_html__('Background Color', 'shopengine'),
286	'type' => Controls_Manager::COLOR,
287	'alpha' => false,
288	'default' => '#ffffff',
289	'selectors' => [
290	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch:hover' => 'background-color: {{VALUE}};',
291	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch.isactive' => 'background-color: {{VALUE}};',
292	],
293	]
294	);
295
296	$this->add_control(
297	'shopengine_view_mode_hover_border_color',
298	[
299	'label' => esc_html__('Border Color', 'shopengine'),
300	'type' => Controls_Manager::COLOR,
301	'alpha' => false,
302	'selectors' => [
303	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch:hover' => 'border-color: {{VALUE}};',
304	'{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch.isactive' => 'border-color: {{VALUE}};',
305	],
306	]
307	);
308
309	$this->end_controls_tab();
310	$this->end_controls_tabs();
311
312	$this->add_group_control(
313	Group_Control_Border::get_type(),
314	[
315	'name' => 'shopengine_view_mode_border',
316	'label' => esc_html__('Border', 'shopengine'),
317	'fields_options' => [
318	'border' => [
319	'default' => 'solid',
320	],
321	'width' => [
322	'default' => [
323	'top' => '1',
324	'right' => '1',
325	'bottom' => '1',
326	'left' => '1',
327	'isLinked' => true,
328	],
329	'selectors' => [
330	'{{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}}',
331	'.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}}',
332	]
333	],
334	'color' => [
335	'default' => '#f2f2f2'
336	]
337	],
338	'selector' => '{{WRAPPER}} .shopengine-archive-view-mode .shopengine-archive-view-mode-switch-list .shopengine-archive-view-mode-switch',
339	'separator' => 'before'
340	]
341	);
342
343	$this->end_controls_section();
344
345	/**
346	*
347	*
348	*
349	* Product Layout: List View Image style
350	*
351	*
352	*/
353	$this->start_controls_section(
354	'shopengine_product_layout',
355	[
356	'label' => esc_html__('List View: Image Style', 'shopengine'),
357	'tab' => Controls_Manager::TAB_STYLE,
358	'condition' => [
359	'shopengine_view_mode_list_grid' => 'yes',
360	],
361	]
362	);
363
364	$this->add_responsive_control(
365	'shopengine_product_layout_gap',
366	[
367	'label' => esc_html__('Image gap from conent', 'shopengine'),
368	'type' => Controls_Manager::SLIDER,
369	'size_units' => ['px'],
370	'range' => array(
371	'px' => array(
372	'min' => 1,
373	'max' => 200,
374	),
375	),
376	'default' => [
377	'unit' => 'px',
378	'size' => 60,
379	],
380
381	'selectors' => [
382	self::SELECTOR_PREFIX . '.shopengine-archive-mode-grid' => 'column-gap: {{SIZE}}{{UNIT}};',
383	],
384	]
385	);
386
387	$this->add_responsive_control(
388	'shopengine_product_image_width',
389	[
390	'label' => esc_html__('Image Width', 'shopengine'),
391	'type' => Controls_Manager::SLIDER,
392	'size_units' => ['px'],
393	'range' => array(
394	'px' => array(
395	'min' => 1,
396	'max' => 800,
397	),
398	),
399	'default' => [
400	'unit' => 'px',
401	'size' => 400,
402	],
403
404	'selectors' => [
405	self::SELECTOR_PREFIX . '.shopengine-archive-products__left-image img' => 'width: {{SIZE}}{{UNIT}} !important; min-width: {{SIZE}}{{UNIT}} !important;',
406	],
407	]
408	);
409
410	$this->add_responsive_control(
411	'shopengine_product_image_height',
412	[
413	'label' => esc_html__('Image Height', 'shopengine'),
414	'type' => Controls_Manager::SLIDER,
415	'size_units' => ['px'],
416	'range' => array(
417	'px' => array(
418	'min' => 1,
419	'max' => 800,
420	),
421	),
422	'default' => [
423	'unit' => 'px',
424	'size' => 400,
425	],
426
427	'selectors' => [
428	self::SELECTOR_PREFIX . '.shopengine-archive-products__left-image img' => 'height: {{SIZE}}{{UNIT}} !important;',
429	],
430	]
431	);
432
433	$this->add_responsive_control(
434	'shopengine_product_image_fit',
435	[
436	'label' => esc_html__('Image Fit', 'shopengine'),
437	'type' => Controls_Manager::SELECT,
438	'default' => 'cover',
439	'options' => [
440	'cover' => esc_html__('Cover', 'shopengine'),
441	'contain' => esc_html__('Contain', 'shopengine'),
442	'fill' => esc_html__('Fill', 'shopengine')
443	],
444	'selectors' => [
445	self::SELECTOR_PREFIX . '.shopengine-archive-products__left-image img' => 'object-fit: {{VALUE}}',
446	],
447	]
448	);
449
450	$this->add_responsive_control(
451	'shopengine_product_image_position',
452	[
453	'label' => esc_html__('Image View Position', 'shopengine'),
454	'type' => Controls_Manager::SELECT,
455	'default' => 'center',
456	'options' => [
457	'top' => esc_html__('Top', 'shopengine'),
458	'center' => esc_html__('Center', 'shopengine'),
459	'bottom' => esc_html__('Bottom', 'shopengine')
460	],
461	'selectors' => [
462	self::SELECTOR_PREFIX . '.shopengine-archive-products__left-image img' => 'object-position: {{VALUE}}',
463	],
464	]
465	);
466
467	$this->end_controls_section(); // end of Product Layout: List View
468
469	/**
470	*
471	*
472	*
473	* List View Content Style
474	*
475	*
476	*/
477	$this->start_controls_section(
478	'shopengine_product_content',
479	[
480	'label' => esc_html__('List View: Content Style', 'shopengine'),
481	'tab' => Controls_Manager::TAB_STYLE,
482	'condition' => [
483	'shopengine_view_mode_list_grid' => 'yes',
484	],
485	]
486	);
487
488	$this->add_responsive_control(
489	'shopengine_product_content_gap',
490	[
491	'label' => esc_html__('Content gap from buttons', 'shopengine'),
492	'type' => Controls_Manager::SLIDER,
493	'size_units' => ['px'],
494	'range' => array(
495	'px' => array(
496	'min' => 1,
497	'max' => 200,
498	),
499	),
500	'default' => [
501	'unit' => 'px',
502	'size' => 25,
503	],
504
505	'selectors' => [
506	self::SELECTOR_PREFIX . '.woocommerce-LoopProduct-link' => 'margin-bottom: {{SIZE}}{{UNIT}};',
507	],
508	]
509	);
510
511	$this->add_responsive_control(
512	'shopengine_product_content_padding',
513	[
514	'label' => esc_html__('Padding', 'shopengine'),
515	'type' => Controls_Manager::DIMENSIONS,
516	'size_units' => ['px'],
517	'selectors' => [
518	self::SELECTOR_PREFIX . '.product' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
519	'.rtl .shopengine-archive-products.shopengine-archive-products--view-list .product' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}} !important;',
520	],
521	'separator' => 'before',
522	]
523	);
524
525	$this->end_controls_section(); // end of List View Content Style
526
527
528	/*
529	=============================
530	product title start
531	=============================
532	*/
533
534	$this->start_controls_section(
535	'shopengine_section_style_title',
536	[
537	'label' => esc_html__('List View : Product Title', 'shopengine'),
538	'tab' => Controls_Manager::TAB_STYLE,
539	'condition' => [
540	'shopengine_view_mode_list_grid' => 'yes',
541	],
542	]
543	);
544
545
546	$this->add_group_control(
547	Group_Control_Typography::get_type(),
548	[
549	'name' => 'shopengine_title_color_typography',
550	'label' => esc_html__('Typography', 'shopengine'),
551	'selector' => self::SELECTOR_PREFIX . 'ul.products li.product .woocommerce-loop-product__title',
552	'exclude' => ['font_family', 'letter_spacing', 'text_decoration', 'font_style'],
553	'fields_options' => [
554	'typography' => [
555	'default' => 'custom',
556	],
557	'font_weight' => [
558	'default' => '500',
559	],
560	'font_size' => [
561	'label' => esc_html__('Font Size (px)', 'shopengine'),
562	'default' => [
563	'size' => '16',
564	'unit' => 'px',
565	],
566	'size_units' => ['px'],
567	],
568	'text_transform' => [
569	'default' => 'capitalize',
570	],
571	'line_height' => [
572	'label' => esc_html__('Line Height (px)', 'shopengine'),
573	'default' => [
574	'size' => '18',
575	'unit' => 'px',
576	],
577	'size_units' => ['px'] // enable only px
578	],
579	],
580	]
581	);
582
583
584	$this->add_responsive_control(
585	'shopengine_title_padding',
586	[
587	'label' => esc_html__('Padding', 'shopengine'),
588	'type' => Controls_Manager::DIMENSIONS,
589	'size_units' => ['px'],
590	'selectors' => [
591	self::SELECTOR_PREFIX . '.product .woocommerce-loop-product__title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
592	'.rtl .shopengine-archive-products.shopengine-archive-products--view-list .product .woocommerce-loop-product__title' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}} !important;',
593	],
594	'separator' => 'before',
595	]
596	);
597	$this->end_controls_section(); // end of product title
598	}
599
600	protected function screen() {
601	$settings = $this->get_settings_for_display();
602
603	$tpl = Products::instance()->get_widget_template($this->get_name());
604
605	include $tpl;
606	}
607	}
608