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

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

621 lines 17.5 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' => 6,
255	],
256	'desktop_default' => [
257	'size' => 5,
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	'image_section_end' => [
320	'mode' => 'section_end',
321	],
322	];
323	if ( function_exists( 'rtwpvg' ) ) {
324	unset( $fields['gallery_thumbs_column']['selectors'] );
325	}
326	return $fields;
327	}
328	/**
329	* Widget Field
330	*
331	* @param object $widget widget.
332	* @return array
333	*/
334	public static function flash_sale( $widget ) {
335	$fields = ProductFlashSale::flash_sale( $widget );
336
337	$fields['flash_sale_section_start']['condition'] = [
338	'sale_flash_badge' => 'yes',
339	];
340
341	$extra_controls = [];
342
343	$extra_controls['flash_sale_position'] = [
344	'label' => esc_html__( 'Position', 'shopbuilder' ),
345	'type' => 'choose',
346	'options' => [
347	'left' => [
348	'title' => esc_html__( 'Left', 'shopbuilder' ),
349	'icon' => 'eicon-h-align-left',
350	],
351	'right' => [
352	'title' => esc_html__( 'Right', 'shopbuilder' ),
353	'icon' => 'eicon-h-align-right',
354	],
355	],
356	'default' => 'left',
357	'separator' => 'before',
358	];
359
360	$extra_controls['flash_sale_position_horizontal'] = [
361	'label' => esc_html__( 'Horizontal', 'shopbuilder' ),
362	'type' => 'slider',
363	'size_units' => [ 'px', '%' ],
364	'range' => [
365	'px' => [
366	'min' => -100,
367	'max' => 100,
368	'step' => 5,
369	],
370	'%' => [
371	'min' => 0,
372	'max' => 100,
373	],
374	],
375	'default' => [
376	'unit' => 'px',
377	'size' => 0,
378	],
379	'selectors' => [
380	$widget->selectors['flash_sale_position_horizontal'] => '{{flash_sale_position.VALUE}}: {{SIZE}}{{UNIT}};position: absolute;z-index: 2;',
381	],
382	];
383	$extra_controls['flash_sale_position_vertical'] = [
384	'label' => esc_html__( 'Vertical', 'shopbuilder' ),
385	'type' => 'slider',
386	'size_units' => [ 'px', '%' ],
387	'range' => [
388	'px' => [
389	'min' => -100,
390	'max' => 100,
391	'step' => 5,
392	],
393	'%' => [
394	'min' => 0,
395	'max' => 100,
396	],
397	],
398	'default' => [
399	'unit' => 'px',
400	'size' => 0,
401	],
402	'selectors' => [
403	$widget->selectors['flash_sale_position_vertical'] => 'top: {{SIZE}}{{UNIT}};position: absolute;z-index: 2;',
404	],
405	];
406
407	$fields = Fns::insert_controls( 'flash_sale_badge_border_radius', $fields, $extra_controls );
408
409	return $fields;
410	}
411	/**
412	* Widget Field
413	*
414	* @return array
415	*/
416	public static function lightbox_icon() {
417	$fields = [
418	'zoom_section_start' => [
419	'mode' => 'section_start',
420	'label' => esc_html__( 'Image Lightbox', 'shopbuilder' ),
421	'tab' => 'style',
422	'condition' => [
423	'show_zoom' => 'yes',
424	],
425	],
426	'zoom_color' => [
427	'label' => esc_html__( 'Color', 'shopbuilder' ),
428	'type' => 'color',
429
430	'separator' => 'default',
431	'selectors' => [
432	':root' => '--vg-lightbox-icon-color: {{VALUE}};',
433	self::$selectors['zoom_color'] => 'color: {{VALUE}};',
434	],
435	],
436	'zoom_bg_color' => [
437	'label' => esc_html__( 'Background Color', 'shopbuilder' ),
438	'type' => 'color',
439	'selectors' => [
440	':root' => '--vg-lightbox-icon-bg-color: {{VALUE}};',
441	self::$selectors['zoom_bg_color'] => 'background-color: {{VALUE}};',
442	],
443	],
444	'zoom_icon_size' => [
445	'label' => esc_html__( 'Icon Size (px)', 'shopbuilder' ),
446	'type' => 'slider',
447	'size_units' => [ 'px' ],
448	'range' => [
449	'px' => [
450	'min' => 0,
451	'max' => 50,
452	'step' => 1,
453	],
454	],
455	'selectors' => [
456	':root' => '--vg-lightbox-icon-size: {{SIZE}}{{UNIT}}',
457	self::$selectors['zoom_icon_size']['icon'] => 'font-size: {{SIZE}}{{UNIT}};',
458	self::$selectors['zoom_icon_size']['svg'] => 'width: {{SIZE}}{{UNIT}};',
459	],
460	'separator' => 'before',
461	],
462	'zoom_badge_width' => [
463	'label' => esc_html__( 'Icon Area Width (px)', 'shopbuilder' ),
464	'type' => 'slider',
465	'size_units' => [ 'px' ],
466	'range' => [
467	'px' => [
468	'min' => 15,
469	'max' => 100,
470	'step' => 1,
471	],
472	],
473	'selectors' => [
474	':root' => '--vg-lightbox-area-width: {{SIZE}}{{UNIT}}',
475	self::$selectors['zoom_badge_width'] => 'width: {{SIZE}}{{UNIT}};min-width: initial;',
476	],
477	],
478	'zoom_badge_height' => [
479	'label' => esc_html__( 'Icon Area Height (px)', 'shopbuilder' ),
480	'type' => 'slider',
481	'size_units' => [ 'px' ],
482	'range' => [
483	'px' => [
484	'min' => 15,
485	'max' => 100,
486	'step' => 1,
487	],
488	],
489	'selectors' => [
490	':root' => '--vg-lightbox-area-height: {{SIZE}}{{UNIT}}',
491	self::$selectors['zoom_badge_height'] => 'height: {{SIZE}}{{UNIT}};min-height: initial;',
492	],
493	],
494	'zoom_badge_border_radius' => [
495	'label' => esc_html__( 'Icon Area Border Radius (px)', 'shopbuilder' ),
496	'type' => 'slider',
497	'size_units' => [ 'px', '%' ],
498	'range' => [
499	'px' => [
500	'min' => 0,
501	'max' => 100,
502	'step' => 1,
503	],
504	'%' => [
505	'min' => 0,
506	'max' => 100,
507	'step' => 1,
508	],
509	],
510	'selectors' => [
511	':root' => '--vg-lightbox-area-radius: {{SIZE}}{{UNIT}}',
512	self::$selectors['zoom_badge_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}};',
513	],
514	],
515	'zoom_padding' => [
516	'label' => esc_html__( 'Padding (px)', 'shopbuilder' ),
517	'type' => 'dimensions',
518	'mode' => 'responsive',
519	'size_units' => [ 'px' ],
520	'default' => [
521	'top' => '0',
522	'right' => '0',
523	'bottom' => '0',
524	'left' => '0',
525	'unit' => 'px',
526	'isLinked' => true,
527	],
528	'selectors' => [
529	':root' => '--vg-lightbox-area-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
530	self::$selectors['zoom_padding'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
531	],
532	],
533	'zoom_position' => [
534	'label' => esc_html__( 'Position', 'shopbuilder' ),
535	'type' => 'choose',
536	'options' => [
537	'left' => [
538	'title' => esc_html__( 'Left', 'shopbuilder' ),
539	'icon' => 'eicon-h-align-left',
540	],
541	'right' => [
542	'title' => esc_html__( 'Right', 'shopbuilder' ),
543	'icon' => 'eicon-h-align-right',
544	],
545	],
546	'default' => 'right',
547	'separator' => 'before',
548	],
549	'zoom_position_horizontal' => [
550	'label' => esc_html__( 'Horizontal', 'shopbuilder' ),
551	'type' => 'slider',
552	'size_units' => [ 'px', '%' ],
553	'range' => [
554	'px' => [
555	'min' => -200,
556	'max' => 200,
557	'step' => 5,
558	],
559	'%' => [
560	'min' => 0,
561	'max' => 100,
562	],
563	],
564
565	'selectors' => [
566	self::$selectors['zoom_position_horizontal']['zoom_position'] => '{{zoom_position.VALUE}}: {{SIZE}}{{UNIT}};',
567	self::$selectors['zoom_position_horizontal']['rtwpvg-tr-br'] => 'right: {{SIZE}}{{UNIT}};',
568	self::$selectors['zoom_position_horizontal']['rtwpvg-tl-bl'] => 'left: {{SIZE}}{{UNIT}};',
569	],
570	],
571	'zoom_position_vertical' => [
572	'label' => esc_html__( 'Vertical', 'shopbuilder' ),
573	'type' => 'slider',
574	'size_units' => [ 'px', '%' ],
575	'range' => [
576	'px' => [
577	'min' => -200,
578	'max' => 200,
579	'step' => 5,
580	],
581	'%' => [
582	'min' => 0,
583	'max' => 100,
584	],
585	],
586	'selectors' => [
587	self::$selectors['zoom_position_vertical']['zoom-icon-top'] => 'top: {{SIZE}}{{UNIT}};',
588	self::$selectors['zoom_position_vertical']['zoom-icon-bottom'] . ':is(.rtwpvg-trigger-position-bottom-right, .rtwpvg-trigger-position-bottom-left)' => 'bottom: {{SIZE}}{{UNIT}};',
589	],
590	],
591	];
592	if ( Fns::is_module_active( 'variation_gallery' ) ) {
593	unset(
594	$fields['zoom_position'],
595	$fields['zoom_position_horizontal'],
596	$fields['zoom_position_vertical']
597	);
598	$fields['vg_lightbox_position'] = [
599	'label' => esc_html__( 'Lightbox Icon Position', 'shopbuilder' ),
600	'type' => 'select',
601	'options' => [
602	'top-right' => esc_html__( 'Top Right', 'shopbuilder' ),
603	'top-left' => esc_html__( 'Top Left', 'shopbuilder' ),
604	'bottom-right' => esc_html__( 'Bottom Right', 'shopbuilder' ),
605	'bottom-left' => esc_html__( 'Bottom Left', 'shopbuilder' ),
606	],
607	'default' => 'top-right',
608	'separator' => 'default',
609	];
610	}
611	$fields['zoom_section_end'] = [
612	'mode' => 'section_end',
613	];
614
615	if ( function_exists( 'rtwpvg' ) ) {
616	unset( $fields['zoom_position'] );
617	}
618	return $fields;
619	}
620	}
621