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

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

634 lines 17.9 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	// The Image Layout (bottom/left/right/grid) is rendered by the Variation Gallery
99	// pipeline. Without it, WooCommerce's default gallery ignores the selection, so
100	// only expose the control when a Variation Gallery renderer is active — the
101	// standalone WPVG Pro plugin or ShopBuilder's Variation Gallery module.
102	if ( ( function_exists( 'rtwpvg' ) && rtwpvg()->active_pro() ) \|\| Fns::is_module_active( 'variation_gallery' ) ) {
103	$image_layout = [
104	'image_layout' => [
105	'type' => 'rtsb-image-selector',
106	'label' => esc_html__( 'Image Layout', 'shopbuilder' ),
107	'description' => esc_html__( 'Please choose image layout. The layout display the change after reload.', 'shopbuilder' ),
108	'options' => [
109	'bottom' => [
110	'title' => esc_html__( 'Gallery Bottom', 'shopbuilder' ),
111	'url' => esc_url( rtsb()->get_assets_uri( 'images/layout/image-layout-gallery-bottom-2.png' ) ),
112	],
113	'left' => [
114	'title' => esc_html__( 'Gallery left', 'shopbuilder' ),
115	'url' => esc_url( rtsb()->get_assets_uri( 'images/layout/image-layout-gallery-left-2.png' ) ),
116	],
117	'right' => [
118	'title' => esc_html__( 'Gallery Right', 'shopbuilder' ),
119	'url' => esc_url( rtsb()->get_assets_uri( 'images/layout/image-layout-gallery-right-2.png' ) ),
120	],
121	'grid' => [
122	'title' => esc_html__( 'Gallery Grid', 'shopbuilder' ),
123	'url' => esc_url( rtsb()->get_assets_uri( 'images/layout/image-layout-gallery-grid-2.png' ) ),
124	],
125	],
126	'default' => 'bottom',
127	],
128	];
129	$fields['show_thumbnails']['condition'] = [
130	'image_layout!' => 'grid',
131	];
132	$fields = Fns::insert_controls( 'image_general_section_start', $fields, $image_layout, true );
133
134	}
135
136	return $fields;
137	}
138
139	/**
140	* Widget Field
141	*
142	* @return array
143	*/
144	public static function image() {
145	$fields = [
146	'image_section_start' => [
147	'mode' => 'section_start',
148	'label' => esc_html__( 'Product Image', 'shopbuilder' ),
149	],
150	'image_width' => [
151	'label' => esc_html__( 'Image Width', 'shopbuilder' ),
152	'type' => 'slider',
153	'size_units' => [ '%', 'px' ],
154	'range' => [
155	'%' => [
156	'min' => 0,
157	'max' => 100,
158	'step' => 1,
159	],
160	'px' => [
161	'min' => 0,
162	'max' => 2000,
163	'step' => 1,
164	],
165	],
166	'default' => [
167	'unit' => '%',
168	'size' => 100,
169	],
170	'separator' => 'default',
171	'selectors' => [
172	self::$selectors['image_width'] => 'width: {{SIZE}}{{UNIT}} !important;',
173	':root' => '--vg-image-width: {{SIZE}}{{UNIT}} !important;',
174	],
175	],
176	'image_border_radius' => [
177	'label' => esc_html__( 'Border Radius', 'shopbuilder' ),
178	'type' => 'slider',
179	'size_units' => [ 'px', '%' ],
180	'range' => [
181	'px' => [
182	'min' => 0,
183	'max' => 100,
184	'step' => 1,
185	],
186	'%' => [
187	'min' => 0,
188	'max' => 100,
189	'step' => 1,
190	],
191	],
192	'selectors' => [
193	self::$selectors['image_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}} !important;',
194	':root' => '--vg-image-border-radius: {{SIZE}}{{UNIT}} !important;',
195	],
196	],
197	'gallery_thumbs_style' => [
198	'type' => 'html',
199	'raw' => sprintf(
200	'<h3 class="rtsb-elementor-group-heading">%s</h3>',
201	esc_html__( 'Gallery Thumbnails', 'shopbuilder' )
202	),
203	'content_classes' => 'elementor-panel-heading-title',
204	],
205
206	'gallery_thumbs_column_gap' => [
207	'mode' => 'responsive',
208	'label' => esc_html__( 'Thumbnail Gap', 'shopbuilder' ),
209	'description' => esc_html__( 'Gallery Thumbnails Gap Is required.', 'shopbuilder' ),
210	'render_type' => 'template',
211	'type' => 'slider',
212	'range' => [
213	'px' => [
214	'min' => 0,
215	'max' => 100,
216	'step' => 1,
217	],
218	],
219	'default' => [
220	'unit' => 'px',
221	'size' => 10,
222	],
223	'desktop_default' => [
224	'size' => 10,
225	'unit' => 'px',
226	],
227	'tablet_default' => [
228	'size' => 10,
229	'unit' => 'px',
230	],
231	'mobile_default' => [
232	'size' => 10,
233	'unit' => 'px',
234	],
235	'selectors' => [
236	':root' => '--rtwpvg-thumbnail-gap:{{SIZE}}{{UNIT}};--vg-thumb-gap:{{SIZE}}{{UNIT}};',
237	],
238	],
239	'gallery_thumbs_column' => [
240	'mode' => 'responsive',
241	'label' => esc_html__( 'Column', 'shopbuilder' ),
242	'description' => esc_html__( 'Above Control the Gallery Thumbnails Gap is required.', 'shopbuilder' ),
243	'type' => 'slider',
244	'render_type' => 'template',
245	'range' => [
246	'px' => [
247	'min' => 2,
248	'max' => 8,
249	'step' => 1,
250	],
251	],
252	'default' => [
253	'unit' => 'px',
254	'size' => 4,
255	],
256	'desktop_default' => [
257	'size' => 4,
258	'unit' => 'px',
259	],
260	'tablet_default' => [
261	'size' => 4,
262	'unit' => 'px',
263	],
264	'mobile_default' => [
265	'size' => 3,
266	'unit' => 'px',
267	],
268	'selectors' => [
269	':root' => '--vg-thumbnail-column:{{SIZE}};',
270	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;',
271	],
272	],
273	'gallery_image_gap_with_main' => [
274	'mode' => 'responsive',
275	'label' => esc_html__( 'Gap with main image', 'shopbuilder' ),
276	'type' => 'slider',
277	'range' => [
278	'px' => [
279	'min' => 0,
280	'max' => 200,
281	'step' => 1,
282	],
283	],
284	'default' => [
285	'unit' => 'px',
286	'size' => 10,
287	],
288	'selectors' => [
289	':root' => '--rtwpvg-thumbnail-gap-with-main:{{SIZE}}{{UNIT}};--vg-main-slider-thumb-gap:{{SIZE}}{{UNIT}};',
290	],
291	],
292	'thumb_border' => [
293	'mode' => 'group',
294	'type' => 'border',
295	'selector' => self::$selectors['thumb_border'],
296	'size_units' => [ 'px' ],
297	],
298	'thumbs_border_radius' => [
299	'label' => esc_html__( 'Border Radius', 'shopbuilder' ),
300	'type' => 'slider',
301	'size_units' => [ 'px', '%' ],
302	'range' => [
303	'px' => [
304	'min' => 0,
305	'max' => 100,
306	'step' => 1,
307	],
308	'%' => [
309	'min' => 0,
310	'max' => 100,
311	'step' => 1,
312	],
313	],
314	'selectors' => [
315	':root' => '--vg-thumb-border-radius:{{SIZE}}{{UNIT}};',
316	self::$selectors['thumbs_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}}',
317	],
318	],
319	'gallery_thumbs_padding' => [
320	'label' => esc_html__( 'Item Inner Padding', 'shopbuilder' ),
321	'type' => 'dimensions',
322	'mode' => 'responsive',
323	'size_units' => [ 'px', 'em', '%' ],
324	'selectors' => [
325	self::$selectors['gallery_thumbs_padding'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
326	],
327	],
328	'image_section_end' => [
329	'mode' => 'section_end',
330	],
331	];
332	if ( function_exists( 'rtwpvg' ) ) {
333	unset( $fields['gallery_thumbs_column']['selectors'] );
334	}
335	return $fields;
336	}
337	/**
338	* Widget Field
339	*
340	* @param object $widget widget.
341	* @return array
342	*/
343	public static function flash_sale( $widget ) {
344	$fields = ProductFlashSale::flash_sale( $widget );
345
346	$fields['flash_sale_section_start']['condition'] = [
347	'sale_flash_badge' => 'yes',
348	];
349
350	$extra_controls = [];
351
352	$extra_controls['flash_sale_position'] = [
353	'label' => esc_html__( 'Position', 'shopbuilder' ),
354	'type' => 'choose',
355	'options' => [
356	'left' => [
357	'title' => esc_html__( 'Left', 'shopbuilder' ),
358	'icon' => 'eicon-h-align-left',
359	],
360	'right' => [
361	'title' => esc_html__( 'Right', 'shopbuilder' ),
362	'icon' => 'eicon-h-align-right',
363	],
364	],
365	'default' => 'left',
366	'separator' => 'before',
367	];
368
369	$extra_controls['flash_sale_position_horizontal'] = [
370	'label' => esc_html__( 'Horizontal', 'shopbuilder' ),
371	'type' => 'slider',
372	'size_units' => [ 'px', '%' ],
373	'range' => [
374	'px' => [
375	'min' => -100,
376	'max' => 100,
377	'step' => 5,
378	],
379	'%' => [
380	'min' => 0,
381	'max' => 100,
382	],
383	],
384	'default' => [
385	'unit' => 'px',
386	'size' => 0,
387	],
388	'selectors' => [
389	$widget->selectors['flash_sale_position_horizontal'] => '{{flash_sale_position.VALUE}}: {{SIZE}}{{UNIT}};position: absolute;z-index: 2;',
390	],
391	];
392	$extra_controls['flash_sale_position_vertical'] = [
393	'label' => esc_html__( 'Vertical', 'shopbuilder' ),
394	'type' => 'slider',
395	'size_units' => [ 'px', '%' ],
396	'range' => [
397	'px' => [
398	'min' => -100,
399	'max' => 100,
400	'step' => 5,
401	],
402	'%' => [
403	'min' => 0,
404	'max' => 100,
405	],
406	],
407	'default' => [
408	'unit' => 'px',
409	'size' => 0,
410	],
411	'selectors' => [
412	$widget->selectors['flash_sale_position_vertical'] => 'top: {{SIZE}}{{UNIT}};position: absolute;z-index: 2;',
413	],
414	];
415
416	$fields = Fns::insert_controls( 'flash_sale_badge_border_radius', $fields, $extra_controls );
417
418	return $fields;
419	}
420	/**
421	* Widget Field
422	*
423	* @return array
424	*/
425	public static function lightbox_icon() {
426	$fields = [
427	'zoom_section_start' => [
428	'mode' => 'section_start',
429	'label' => esc_html__( 'Image Lightbox', 'shopbuilder' ),
430	'tab' => 'style',
431	'condition' => [
432	'show_zoom' => 'yes',
433	],
434	],
435	'zoom_color' => [
436	'label' => esc_html__( 'Color', 'shopbuilder' ),
437	'type' => 'color',
438
439	'separator' => 'default',
440	'selectors' => [
441	':root' => '--vg-lightbox-icon-color: {{VALUE}};',
442	self::$selectors['zoom_color'] => 'color: {{VALUE}};',
443	],
444	],
445	'zoom_bg_color' => [
446	'label' => esc_html__( 'Background Color', 'shopbuilder' ),
447	'type' => 'color',
448	'selectors' => [
449	':root' => '--vg-lightbox-icon-bg-color: {{VALUE}};',
450	self::$selectors['zoom_bg_color'] => 'background-color: {{VALUE}};',
451	],
452	],
453	'zoom_icon_size' => [
454	'label' => esc_html__( 'Icon Size (px)', 'shopbuilder' ),
455	'type' => 'slider',
456	'size_units' => [ 'px' ],
457	'range' => [
458	'px' => [
459	'min' => 0,
460	'max' => 50,
461	'step' => 1,
462	],
463	],
464	'default' => [
465	'unit' => 'px',
466	'size' => 12,
467	],
468	'selectors' => [
469	':root' => '--vg-lightbox-icon-size: {{SIZE}}{{UNIT}}',
470	self::$selectors['zoom_icon_size']['icon'] => 'font-size: {{SIZE}}{{UNIT}};',
471	self::$selectors['zoom_icon_size']['svg'] => 'width: {{SIZE}}{{UNIT}};',
472	],
473	'separator' => 'before',
474	],
475	'zoom_badge_width' => [
476	'label' => esc_html__( 'Icon Area Width (px)', 'shopbuilder' ),
477	'type' => 'slider',
478	'size_units' => [ 'px' ],
479	'range' => [
480	'px' => [
481	'min' => 15,
482	'max' => 100,
483	'step' => 1,
484	],
485	],
486	'selectors' => [
487	':root' => '--vg-lightbox-area-width: {{SIZE}}{{UNIT}}',
488	self::$selectors['zoom_badge_width'] => 'width: {{SIZE}}{{UNIT}};min-width: initial;',
489	],
490	],
491	'zoom_badge_height' => [
492	'label' => esc_html__( 'Icon Area Height (px)', 'shopbuilder' ),
493	'type' => 'slider',
494	'size_units' => [ 'px' ],
495	'range' => [
496	'px' => [
497	'min' => 15,
498	'max' => 100,
499	'step' => 1,
500	],
501	],
502	'selectors' => [
503	':root' => '--vg-lightbox-area-height: {{SIZE}}{{UNIT}}',
504	self::$selectors['zoom_badge_height'] => 'height: {{SIZE}}{{UNIT}};min-height: initial;',
505	],
506	],
507	'zoom_badge_border_radius' => [
508	'label' => esc_html__( 'Icon Area Border Radius (px)', 'shopbuilder' ),
509	'type' => 'slider',
510	'size_units' => [ 'px', '%' ],
511	'range' => [
512	'px' => [
513	'min' => 0,
514	'max' => 100,
515	'step' => 1,
516	],
517	'%' => [
518	'min' => 0,
519	'max' => 100,
520	'step' => 1,
521	],
522	],
523	'selectors' => [
524	':root' => '--vg-lightbox-area-radius: {{SIZE}}{{UNIT}}',
525	self::$selectors['zoom_badge_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}};',
526	],
527	],
528	'zoom_padding' => [
529	'label' => esc_html__( 'Padding (px)', 'shopbuilder' ),
530	'type' => 'dimensions',
531	'mode' => 'responsive',
532	'size_units' => [ 'px' ],
533	'default' => [
534	'top' => '0',
535	'right' => '0',
536	'bottom' => '0',
537	'left' => '0',
538	'unit' => 'px',
539	'isLinked' => true,
540	],
541	'selectors' => [
542	':root' => '--vg-lightbox-area-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
543	self::$selectors['zoom_padding'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
544	],
545	],
546	'zoom_position' => [
547	'label' => esc_html__( 'Position', 'shopbuilder' ),
548	'type' => 'choose',
549	'options' => [
550	'left' => [
551	'title' => esc_html__( 'Left', 'shopbuilder' ),
552	'icon' => 'eicon-h-align-left',
553	],
554	'right' => [
555	'title' => esc_html__( 'Right', 'shopbuilder' ),
556	'icon' => 'eicon-h-align-right',
557	],
558	],
559	'default' => 'right',
560	'separator' => 'before',
561	],
562	'zoom_position_horizontal' => [
563	'label' => esc_html__( 'Horizontal', 'shopbuilder' ),
564	'type' => 'slider',
565	'size_units' => [ 'px', '%' ],
566	'range' => [
567	'px' => [
568	'min' => -200,
569	'max' => 200,
570	'step' => 5,
571	],
572	'%' => [
573	'min' => 0,
574	'max' => 100,
575	],
576	],
577
578	'selectors' => [
579	self::$selectors['zoom_position_horizontal']['zoom_position'] => '{{zoom_position.VALUE}}: {{SIZE}}{{UNIT}};',
580	self::$selectors['zoom_position_horizontal']['rtwpvg-tr-br'] => 'right: {{SIZE}}{{UNIT}};',
581	self::$selectors['zoom_position_horizontal']['rtwpvg-tl-bl'] => 'left: {{SIZE}}{{UNIT}};',
582	],
583	],
584	'zoom_position_vertical' => [
585	'label' => esc_html__( 'Vertical', 'shopbuilder' ),
586	'type' => 'slider',
587	'size_units' => [ 'px', '%' ],
588	'range' => [
589	'px' => [
590	'min' => -200,
591	'max' => 200,
592	'step' => 5,
593	],
594	'%' => [
595	'min' => 0,
596	'max' => 100,
597	],
598	],
599	'selectors' => [
600	self::$selectors['zoom_position_vertical']['zoom-icon-top'] => 'top: {{SIZE}}{{UNIT}};',
601	self::$selectors['zoom_position_vertical']['zoom-icon-bottom'] . ':is(.rtwpvg-trigger-position-bottom-right, .rtwpvg-trigger-position-bottom-left)' => 'bottom: {{SIZE}}{{UNIT}};',
602	],
603	],
604	];
605	if ( Fns::is_module_active( 'variation_gallery' ) ) {
606	unset(
607	$fields['zoom_position'],
608	$fields['zoom_position_horizontal'],
609	$fields['zoom_position_vertical']
610	);
611	$fields['vg_lightbox_position'] = [
612	'label' => esc_html__( 'Lightbox Icon Position', 'shopbuilder' ),
613	'type' => 'select',
614	'options' => [
615	'top-right' => esc_html__( 'Top Right', 'shopbuilder' ),
616	'top-left' => esc_html__( 'Top Left', 'shopbuilder' ),
617	'bottom-right' => esc_html__( 'Bottom Right', 'shopbuilder' ),
618	'bottom-left' => esc_html__( 'Bottom Left', 'shopbuilder' ),
619	],
620	'default' => 'top-right',
621	'separator' => 'default',
622	];
623	}
624	$fields['zoom_section_end'] = [
625	'mode' => 'section_end',
626	];
627
628	if ( function_exists( 'rtwpvg' ) ) {
629	unset( $fields['zoom_position'] );
630	}
631	return $fields;
632	}
633	}
634