shopbuilder / app / Elementor / Widgets / Controls / ProductImagesSettings.php

ProductImagesSettings.php in ShopBuilder – WooCommerce Builder For Elementor 3.2.3, at app/Elementor/Widgets/Controls/ProductImagesSettings.php

617 lines 17.1 KB

Raw Download Zip

1	<?php
2	/**
3	* Main ProductImagesSettings class.
4	*
5	* @package RadiusTheme\SB
6	*/
7
8	namespace RadiusTheme\SB\Elementor\Widgets\Controls;
9
10	use Elementor\Controls_Manager;
11	use RadiusTheme\SB\Helpers\Fns;
12
13	// Do not allow directly accessing this file.
14	if ( ! defined( 'ABSPATH' ) ) {
15	exit( 'This script cannot be accessed directly.' );
16	}
17
18
19	/**
20	* Product Image Settings class
21	*/
22	class ProductImagesSettings {
23
24	/**
25	* Widget Control Selectors
26	*
27	* @var array
28	*/
29	private static $selectors = [];
30	/**
31	* Widget Field
32	*
33	* @param object $widget Widget.
34	* @return array
35	*/
36	public static function widget_fields( $widget ) {
37	self::$selectors = $widget->selectors;
38	return self::general_section() +
39	self::image() +
40	self::flash_sale( $widget ) +
41	self::lightbox_icon();
42	}
43
44	/**
45	* Widget Field
46	*
47	* @return array
48	*/
49	public static function general_section() {
50	$fields = [
51	'image_general_section_start' => [
52	'mode' => 'section_start',
53	'label' => esc_html__( 'General', 'shopbuilder' ),
54	],
55
56	'sale_flash_badge' => [
57	'label' => esc_html__( 'Show Flash Sale?', 'shopbuilder' ),
58	'type' => 'switch',
59	'description' => esc_html__( 'Switch on to show Flash Sale.', 'shopbuilder' ),
60	'default' => 'yes',
61	],
62
63	'show_module_badges' => [
64	'label' => esc_html__( 'Show Badges?', 'shopbuilder' ),
65	'type' => 'switch',
66	'description' => esc_html__( 'Switch on to show the Badges form from the Module..', 'shopbuilder' ),
67	'default' => 'yes',
68	],
69	'show_thumbnails' => [
70	'label' => esc_html__( 'Show Thumbnails?', 'shopbuilder' ),
71	'type' => 'switch',
72	'description' => esc_html__( 'Switch on to show Thumbnails.', 'shopbuilder' ),
73	'default' => 'yes',
74	],
75	'show_zoom' => [
76	'label' => esc_html__( 'Show Lightbox Icon?', 'shopbuilder' ),
77	'type' => 'switch',
78	'description' => esc_html__( 'Switch on to show Zoom Icon.', 'shopbuilder' ),
79	'default' => 'yes',
80	],
81	'lightbox_icon' => [
82	'label' => esc_html__( 'Icon', 'shopbuilder' ),
83	'type' => 'icons',
84	'fa4compatibility' => 'icon',
85	'default' => [
86	'value' => 'fas fa-expand-alt',
87	'library' => 'fa-solid',
88	],
89	'condition' => [
90	'show_zoom' => 'yes',
91	],
92	],
93	'image_general_section_end' => [
94	'mode' => 'section_end',
95	],
96	];
97
98	if ( ( function_exists( 'rtwpvg' ) && rtwpvg()->active_pro() ) \|\| rtsb()->has_pro() ) {
99	$image_layout = [
100	'image_layout' => [
101	'type' => 'rtsb-image-selector',
102	'label' => esc_html__( 'Image Layout', 'shopbuilder' ),
103	'description' => esc_html__( 'Please choose image layout. The layout display the change after reload.', 'shopbuilder' ),
104	'options' => [
105	'bottom' => [
106	'title' => esc_html__( 'Gallery Bottom', 'shopbuilder' ),
107	'url' => esc_url( rtsb()->get_assets_uri( 'images/layout/image-layout-gallery-bottom-2.png' ) ),
108	],
109	'left' => [
110	'title' => esc_html__( 'Gallery left', 'shopbuilder' ),
111	'url' => esc_url( rtsb()->get_assets_uri( 'images/layout/image-layout-gallery-left-2.png' ) ),
112	],
113	'right' => [
114	'title' => esc_html__( 'Gallery Right', 'shopbuilder' ),
115	'url' => esc_url( rtsb()->get_assets_uri( 'images/layout/image-layout-gallery-right-2.png' ) ),
116	],
117	'grid' => [
118	'title' => esc_html__( 'Gallery Grid', 'shopbuilder' ),
119	'url' => esc_url( rtsb()->get_assets_uri( 'images/layout/image-layout-gallery-grid-2.png' ) ),
120	],
121	],
122	'default' => 'bottom',
123	],
124	];
125	$fields['show_thumbnails']['condition'] = [
126	'image_layout!' => 'grid',
127	];
128	$fields = Fns::insert_controls( 'image_general_section_start', $fields, $image_layout, true );
129
130	}
131
132	return $fields;
133	}
134
135	/**
136	* Widget Field
137	*
138	* @return array
139	*/
140	public static function image() {
141	$fields = [
142	'image_section_start' => [
143	'mode' => 'section_start',
144	'label' => esc_html__( 'Product Image', 'shopbuilder' ),
145	],
146	'image_width' => [
147	'label' => esc_html__( 'Image Width', 'shopbuilder' ),
148	'type' => 'slider',
149	'size_units' => [ '%', 'px' ],
150	'range' => [
151	'%' => [
152	'min' => 0,
153	'max' => 100,
154	'step' => 1,
155	],
156	'px' => [
157	'min' => 0,
158	'max' => 2000,
159	'step' => 1,
160	],
161	],
162	'default' => [
163	'unit' => '%',
164	'size' => 100,
165	],
166	'separator' => 'default',
167	'selectors' => [
168	self::$selectors['image_width'] => 'width: {{SIZE}}{{UNIT}} !important;',
169	':root' => '--vg-image-width: {{SIZE}}{{UNIT}} !important;',
170	],
171	],
172	'image_border_radius' => [
173	'label' => esc_html__( 'Border Radius', 'shopbuilder' ),
174	'type' => 'slider',
175	'size_units' => [ 'px', '%' ],
176	'range' => [
177	'px' => [
178	'min' => 0,
179	'max' => 100,
180	'step' => 1,
181	],
182	'%' => [
183	'min' => 0,
184	'max' => 100,
185	'step' => 1,
186	],
187	],
188	'selectors' => [
189	self::$selectors['image_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}} !important;',
190	':root' => '--vg-image-border-radius: {{SIZE}}{{UNIT}} !important;',
191	],
192	],
193	'gallery_thumbs_style' => [
194	'type' => 'html',
195	'raw' => sprintf(
196	'<h3 class="rtsb-elementor-group-heading">%s</h3>',
197	esc_html__( 'Gallery Thumbnails', 'shopbuilder' )
198	),
199	'content_classes' => 'elementor-panel-heading-title',
200	],
201
202	'gallery_thumbs_column_gap' => [
203	'mode' => 'responsive',
204	'label' => esc_html__( 'Thumbnail Gap', 'shopbuilder' ),
205	'description' => esc_html__( 'Gallery Thumbnails Gap Is required.', 'shopbuilder' ),
206	'render_type' => 'template',
207	'type' => 'slider',
208	'range' => [
209	'px' => [
210	'min' => 0,
211	'max' => 100,
212	'step' => 1,
213	],
214	],
215	'default' => [
216	'unit' => 'px',
217	'size' => 10,
218	],
219	'desktop_default' => [
220	'size' => 10,
221	'unit' => 'px',
222	],
223	'tablet_default' => [
224	'size' => 10,
225	'unit' => 'px',
226	],
227	'mobile_default' => [
228	'size' => 10,
229	'unit' => 'px',
230	],
231	'selectors' => [
232	':root' => '--rtwpvg-thumbnail-gap:{{SIZE}}{{UNIT}};--vg-thumb-gap:{{SIZE}}{{UNIT}};',
233	],
234	],
235	'gallery_thumbs_column' => [
236	'mode' => 'responsive',
237	'label' => esc_html__( 'Column', 'shopbuilder' ),
238	'description' => esc_html__( 'Above Control the Gallery Thumbnails Gap is required.', 'shopbuilder' ),
239	'type' => 'slider',
240	'render_type' => 'template',
241	'range' => [
242	'px' => [
243	'min' => 2,
244	'max' => 8,
245	'step' => 1,
246	],
247	],
248	'default' => [
249	'unit' => 'px',
250	'size' => 6,
251	],
252	'desktop_default' => [
253	'size' => 5,
254	'unit' => 'px',
255	],
256	'tablet_default' => [
257	'size' => 4,
258	'unit' => 'px',
259	],
260	'mobile_default' => [
261	'size' => 3,
262	'unit' => 'px',
263	],
264	'selectors' => [
265	':root' => '--vg-thumbnail-column:{{SIZE}};',
266	self::$selectors['gallery_thumbs_column'] => 'width: calc(100%/{{SIZE}} - ( {{gallery_thumbs_column_gap.size}}{{gallery_thumbs_column_gap.unit}} / {{SIZE}} ) * ({{SIZE}} - 1 ) );flex: 0 0 auto;max-width: initial;',
267	],
268	],
269	'gallery_image_gap_with_main' => [
270	'mode' => 'responsive',
271	'label' => esc_html__( 'Gap with main image', 'shopbuilder' ),
272	'type' => 'slider',
273	'range' => [
274	'px' => [
275	'min' => 0,
276	'max' => 200,
277	'step' => 1,
278	],
279	],
280	'default' => [
281	'unit' => 'px',
282	'size' => 10,
283	],
284	'selectors' => [
285	':root' => '--rtwpvg-thumbnail-gap-with-main:{{SIZE}}{{UNIT}};--vg-main-slider-thumb-gap:{{SIZE}}{{UNIT}};',
286	],
287	],
288	'thumb_border' => [
289	'mode' => 'group',
290	'type' => 'border',
291	'selector' => self::$selectors['thumb_border'],
292	'size_units' => [ 'px' ],
293	],
294	'thumbs_border_radius' => [
295	'label' => esc_html__( 'Border Radius', 'shopbuilder' ),
296	'type' => 'slider',
297	'size_units' => [ 'px', '%' ],
298	'range' => [
299	'px' => [
300	'min' => 0,
301	'max' => 100,
302	'step' => 1,
303	],
304	'%' => [
305	'min' => 0,
306	'max' => 100,
307	'step' => 1,
308	],
309	],
310	'selectors' => [
311	':root' => '--vg-thumb-border-radius:{{SIZE}}{{UNIT}};',
312	self::$selectors['thumbs_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}}',
313	],
314	],
315	'image_section_end' => [
316	'mode' => 'section_end',
317	],
318	];
319	if ( function_exists( 'rtwpvg' ) ) {
320	unset( $fields['gallery_thumbs_column']['selectors'] );
321	}
322	return $fields;
323	}
324	/**
325	* Widget Field
326	*
327	* @param object $widget widget.
328	* @return array
329	*/
330	public static function flash_sale( $widget ) {
331	$fields = ProductFlashSale::flash_sale( $widget );
332
333	$fields['flash_sale_section_start']['condition'] = [
334	'sale_flash_badge' => 'yes',
335	];
336
337	$extra_controls = [];
338
339	$extra_controls['flash_sale_position'] = [
340	'label' => esc_html__( 'Position', 'shopbuilder' ),
341	'type' => 'choose',
342	'options' => [
343	'left' => [
344	'title' => esc_html__( 'Left', 'shopbuilder' ),
345	'icon' => 'eicon-h-align-left',
346	],
347	'right' => [
348	'title' => esc_html__( 'Right', 'shopbuilder' ),
349	'icon' => 'eicon-h-align-right',
350	],
351	],
352	'default' => 'left',
353	'separator' => 'before',
354	];
355
356	$extra_controls['flash_sale_position_horizontal'] = [
357	'label' => esc_html__( 'Horizontal', 'shopbuilder' ),
358	'type' => 'slider',
359	'size_units' => [ 'px', '%' ],
360	'range' => [
361	'px' => [
362	'min' => -100,
363	'max' => 100,
364	'step' => 5,
365	],
366	'%' => [
367	'min' => 0,
368	'max' => 100,
369	],
370	],
371	'default' => [
372	'unit' => 'px',
373	'size' => 0,
374	],
375	'selectors' => [
376	$widget->selectors['flash_sale_position_horizontal'] => '{{flash_sale_position.VALUE}}: {{SIZE}}{{UNIT}};position: absolute;z-index: 2;',
377	],
378	];
379	$extra_controls['flash_sale_position_vertical'] = [
380	'label' => esc_html__( 'Vertical', 'shopbuilder' ),
381	'type' => 'slider',
382	'size_units' => [ 'px', '%' ],
383	'range' => [
384	'px' => [
385	'min' => -100,
386	'max' => 100,
387	'step' => 5,
388	],
389	'%' => [
390	'min' => 0,
391	'max' => 100,
392	],
393	],
394	'default' => [
395	'unit' => 'px',
396	'size' => 0,
397	],
398	'selectors' => [
399	$widget->selectors['flash_sale_position_vertical'] => 'top: {{SIZE}}{{UNIT}};position: absolute;z-index: 2;',
400	],
401	];
402
403	$fields = Fns::insert_controls( 'flash_sale_badge_border_radius', $fields, $extra_controls );
404
405	return $fields;
406	}
407	/**
408	* Widget Field
409	*
410	* @return array
411	*/
412	public static function lightbox_icon() {
413	$fields = [
414	'zoom_section_start' => [
415	'mode' => 'section_start',
416	'label' => esc_html__( 'Image Lightbox', 'shopbuilder' ),
417	'tab' => 'style',
418	'condition' => [
419	'show_zoom' => 'yes',
420	],
421	],
422	'zoom_color' => [
423	'label' => esc_html__( 'Color', 'shopbuilder' ),
424	'type' => 'color',
425
426	'separator' => 'default',
427	'selectors' => [
428	':root' => '--vg-lightbox-icon-color: {{VALUE}};',
429	self::$selectors['zoom_color'] => 'color: {{VALUE}};',
430	],
431	],
432	'zoom_bg_color' => [
433	'label' => esc_html__( 'Background Color', 'shopbuilder' ),
434	'type' => 'color',
435	'selectors' => [
436	':root' => '--vg-lightbox-icon-bg-color: {{VALUE}};',
437	self::$selectors['zoom_bg_color'] => 'background-color: {{VALUE}};',
438	],
439	],
440	'zoom_icon_size' => [
441	'label' => esc_html__( 'Icon Size (px)', 'shopbuilder' ),
442	'type' => 'slider',
443	'size_units' => [ 'px' ],
444	'range' => [
445	'px' => [
446	'min' => 0,
447	'max' => 50,
448	'step' => 1,
449	],
450	],
451	'selectors' => [
452	':root' => '--vg-lightbox-icon-size: {{SIZE}}{{UNIT}}',
453	self::$selectors['zoom_icon_size']['icon'] => 'font-size: {{SIZE}}{{UNIT}};',
454	self::$selectors['zoom_icon_size']['svg'] => 'width: {{SIZE}}{{UNIT}};',
455	],
456	'separator' => 'before',
457	],
458	'zoom_badge_width' => [
459	'label' => esc_html__( 'Icon Area Width (px)', 'shopbuilder' ),
460	'type' => 'slider',
461	'size_units' => [ 'px' ],
462	'range' => [
463	'px' => [
464	'min' => 15,
465	'max' => 100,
466	'step' => 1,
467	],
468	],
469	'selectors' => [
470	':root' => '--vg-lightbox-area-width: {{SIZE}}{{UNIT}}',
471	self::$selectors['zoom_badge_width'] => 'width: {{SIZE}}{{UNIT}};min-width: initial;',
472	],
473	],
474	'zoom_badge_height' => [
475	'label' => esc_html__( 'Icon Area Height (px)', 'shopbuilder' ),
476	'type' => 'slider',
477	'size_units' => [ 'px' ],
478	'range' => [
479	'px' => [
480	'min' => 15,
481	'max' => 100,
482	'step' => 1,
483	],
484	],
485	'selectors' => [
486	':root' => '--vg-lightbox-area-height: {{SIZE}}{{UNIT}}',
487	self::$selectors['zoom_badge_height'] => 'height: {{SIZE}}{{UNIT}};min-height: initial;',
488	],
489	],
490	'zoom_badge_border_radius' => [
491	'label' => esc_html__( 'Icon Area Border Radius (px)', 'shopbuilder' ),
492	'type' => 'slider',
493	'size_units' => [ 'px', '%' ],
494	'range' => [
495	'px' => [
496	'min' => 0,
497	'max' => 100,
498	'step' => 1,
499	],
500	'%' => [
501	'min' => 0,
502	'max' => 100,
503	'step' => 1,
504	],
505	],
506	'selectors' => [
507	':root' => '--vg-lightbox-area-radius: {{SIZE}}{{UNIT}}',
508	self::$selectors['zoom_badge_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}};',
509	],
510	],
511	'zoom_padding' => [
512	'label' => esc_html__( 'Padding (px)', 'shopbuilder' ),
513	'type' => 'dimensions',
514	'mode' => 'responsive',
515	'size_units' => [ 'px' ],
516	'default' => [
517	'top' => '0',
518	'right' => '0',
519	'bottom' => '0',
520	'left' => '0',
521	'unit' => 'px',
522	'isLinked' => true,
523	],
524	'selectors' => [
525	':root' => '--vg-lightbox-area-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
526	self::$selectors['zoom_padding'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
527	],
528	],
529	'zoom_position' => [
530	'label' => esc_html__( 'Position', 'shopbuilder' ),
531	'type' => 'choose',
532	'options' => [
533	'left' => [
534	'title' => esc_html__( 'Left', 'shopbuilder' ),
535	'icon' => 'eicon-h-align-left',
536	],
537	'right' => [
538	'title' => esc_html__( 'Right', 'shopbuilder' ),
539	'icon' => 'eicon-h-align-right',
540	],
541	],
542	'default' => 'right',
543	'separator' => 'before',
544	],
545	'zoom_position_horizontal' => [
546	'label' => esc_html__( 'Horizontal', 'shopbuilder' ),
547	'type' => 'slider',
548	'size_units' => [ 'px', '%' ],
549	'range' => [
550	'px' => [
551	'min' => -200,
552	'max' => 200,
553	'step' => 5,
554	],
555	'%' => [
556	'min' => 0,
557	'max' => 100,
558	],
559	],
560
561	'selectors' => [
562	self::$selectors['zoom_position_horizontal']['zoom_position'] => '{{zoom_position.VALUE}}: {{SIZE}}{{UNIT}};',
563	self::$selectors['zoom_position_horizontal']['rtwpvg-tr-br'] => 'right: {{SIZE}}{{UNIT}};',
564	self::$selectors['zoom_position_horizontal']['rtwpvg-tl-bl'] => 'left: {{SIZE}}{{UNIT}};',
565	],
566	],
567	'zoom_position_vertical' => [
568	'label' => esc_html__( 'Vertical', 'shopbuilder' ),
569	'type' => 'slider',
570	'size_units' => [ 'px', '%' ],
571	'range' => [
572	'px' => [
573	'min' => -200,
574	'max' => 200,
575	'step' => 5,
576	],
577	'%' => [
578	'min' => 0,
579	'max' => 100,
580	],
581	],
582	'selectors' => [
583	self::$selectors['zoom_position_vertical']['zoom-icon-top'] => 'top: {{SIZE}}{{UNIT}};',
584	self::$selectors['zoom_position_vertical']['zoom-icon-bottom'] . ':is(.rtwpvg-trigger-position-bottom-right, .rtwpvg-trigger-position-bottom-left)' => 'bottom: {{SIZE}}{{UNIT}};',
585	],
586	],
587	];
588	if ( Fns::is_module_active( 'variation_gallery' ) ) {
589	unset(
590	$fields['zoom_position'],
591	$fields['zoom_position_horizontal'],
592	$fields['zoom_position_vertical']
593	);
594	$fields['vg_lightbox_position'] = [
595	'label' => esc_html__( 'Lightbox Icon Position', 'shopbuilder' ),
596	'type' => 'select',
597	'options' => [
598	'top-right' => esc_html__( 'Top Right', 'shopbuilder' ),
599	'top-left' => esc_html__( 'Top Left', 'shopbuilder' ),
600	'bottom-right' => esc_html__( 'Bottom Right', 'shopbuilder' ),
601	'bottom-left' => esc_html__( 'Bottom Left', 'shopbuilder' ),
602	],
603	'default' => 'top-right',
604	'separator' => 'default',
605	];
606	}
607	$fields['zoom_section_end'] = [
608	'mode' => 'section_end',
609	];
610
611	if ( function_exists( 'rtwpvg' ) ) {
612	unset( $fields['zoom_position'] );
613	}
614	return $fields;
615	}
616	}
617