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

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

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