Media.php — SureCart – Ecommerce Made Easy For Selling Physical Products, Digital Downloads, Subscriptions, Donations, & Payments 4.6.3

surecart / app / src / Integrations / Elementor / Widgets / Media.php

surecart / app / src / Integrations / Elementor / Widgets Last commit date

Media.php

468 lines

1	<?php
2
3	namespace SureCart\Integrations\Elementor\Widgets;
4
5	if ( ! defined( 'ABSPATH' ) ) {
6	exit; // Exit if accessed directly.
7	}
8
9
10	/**
11	* Media widget.
12	*/
13	class Media extends \Elementor\Widget_Base {
14	/**
15	* Get widget name.
16	*
17	* @return string
18	*/
19	public function get_name() {
20	return 'surecart-media';
21	}
22
23	/**
24	* Get widget title.
25	*
26	* @return string
27	*/
28	public function get_title() {
29	return esc_html__( 'Product Media', 'surecart' );
30	}
31
32	/**
33	* Get widget icon.
34	*
35	* @return string
36	*/
37	public function get_icon() {
38	return 'eicon-product-images';
39	}
40
41	/**
42	* Get the widget keywords.
43	*
44	* @return array
45	*/
46	public function get_keywords() {
47	return array( 'surecart', 'media', 'image' );
48	}
49
50	/**
51	* Get the widget categories.
52	*
53	* @return array
54	*/
55	public function get_categories() {
56	return array( 'surecart-elementor-elements' );
57	}
58
59	/**
60	* Get style dependencies.
61	*
62	* @return array
63	*/
64	public function get_style_depends() {
65	return array( 'surecart-image-slider', 'surecart-product-media' );
66	}
67
68	/**
69	* Register the content settings.
70	*
71	* @return void
72	*/
73	protected function register_content_settings() {
74	$this->start_controls_section(
75	'section_content',
76	[
77	'label' => esc_html__( 'Content Settings', 'surecart' ),
78	]
79	);
80
81	$this->add_control(
82	'desktop_gallery',
83	[
84	'label' => esc_html__( 'Display Mode', 'surecart' ),
85	'type' => \Elementor\Controls_Manager::CHOOSE,
86	'default' => 'slider',
87	'options' => [
88	'slider' => [
89	'title' => esc_html__( 'Slider View', 'surecart' ),
90	'icon' => 'eicon-image-before-after',
91	],
92	'gallery' => [
93	'title' => esc_html__( 'Gallery View', 'surecart' ),
94	'icon' => 'eicon-gallery-grid',
95	],
96	],
97	'toggle' => false,
98	]
99	);
100
101	$this->add_control(
102	'lightbox',
103	[
104	'label' => esc_html__( 'Enlarge on Click', 'surecart' ),
105	'type' => \Elementor\Controls_Manager::SWITCHER,
106	'label_on' => esc_html__( 'Yes', 'surecart' ),
107	'label_off' => esc_html__( 'No', 'surecart' ),
108	'default' => 'yes',
109	'description' => esc_html__( 'Scale images with a lightbox effect.', 'surecart' ),
110	]
111	);
112
113	$this->add_control(
114	'slider_is_auto_height',
115	[
116	'label' => esc_html__( 'Auto Height', 'surecart' ),
117	'type' => \Elementor\Controls_Manager::SWITCHER,
118	'label_on' => esc_html__( 'Yes', 'surecart' ),
119	'label_off' => esc_html__( 'No', 'surecart' ),
120	'default' => 'yes',
121	'condition' => [
122	'desktop_gallery' => 'slider',
123	],
124	],
125	);
126
127	$this->add_control(
128	'slider_height',
129	[
130	'label' => esc_html__( 'Height', 'surecart' ),
131	'type' => \Elementor\Controls_Manager::SLIDER,
132	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
133	'default' => [
134	'size' => 310,
135	'unit' => 'px',
136	],
137	'selectors' => [
138	'{{WRAPPER}} .sc-image-slider>.swiper' => 'height: {{SIZE}}{{UNIT}};',
139	],
140	'range' => [
141	'px' => array(
142	'min' => 0,
143	'max' => 1000,
144	),
145	'em' => array(
146	'min' => 0,
147	'step' => 0.1,
148	'max' => 10,
149	),
150	'%' => array(
151	'min' => 0,
152	'max' => 100,
153	),
154	'rem' => array(
155	'min' => 0,
156	'max' => 100,
157	),
158	'custom' => array(
159	'min' => 0,
160	),
161	],
162	'condition' => [
163	'slider_is_auto_height!' => 'yes',
164	'desktop_gallery' => 'slider',
165	],
166	]
167	);
168
169	$this->add_control(
170	'slider_max_image_width',
171	[
172	'label' => esc_html__( 'Max Image Width', 'surecart' ),
173	'type' => \Elementor\Controls_Manager::SLIDER,
174	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
175	'selectors' => [
176	'{{WRAPPER}} .sc-image-slider>.swiper>.swiper-wrapper>.swiper-slide>img' => 'max-width: {{SIZE}}{{UNIT}};',
177	'{{WRAPPER}} .sc-image-gallery .swiper-wrapper .swiper-slide img' => 'max-width: {{SIZE}}{{UNIT}};',
178	],
179	'range' => [
180	'px' => [
181	'min' => 0,
182	'max' => 1000,
183	],
184	'em' => [
185	'min' => 0,
186	'max' => 100,
187	],
188	'rem' => [
189	'min' => 0,
190	'max' => 100,
191	],
192	],
193	]
194	);
195
196	$this->add_control(
197	'gallery_spacing',
198	[
199	'label' => esc_html__( 'Gallery Spacing', 'surecart' ),
200	'type' => \Elementor\Controls_Manager::SLIDER,
201	'size_units' => [ 'px', 'em', 'rem' ],
202	'default' => [
203	'size' => 1,
204	'unit' => 'rem',
205	],
206	'selectors' => [
207	'{{WRAPPER}} .sc-image-gallery .swiper-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
208	'{{WRAPPER}} .sc-image-gallery .swiper-wrapper .swiper-slide' => 'margin-bottom: {{SIZE}}{{UNIT}};',
209	],
210	'range' => [
211	'px' => [
212	'min' => 0,
213	'max' => 50,
214	],
215	'em' => [
216	'min' => 0,
217	'max' => 5,
218	],
219	'rem' => [
220	'min' => 0,
221	'max' => 5,
222	],
223	],
224	'condition' => [
225	'desktop_gallery' => 'gallery',
226	],
227	]
228	);
229
230	$this->add_control(
231	'thumbnails_per_page',
232	[
233	'label' => esc_html__( 'Thumbnails per Page', 'surecart' ),
234	'type' => \Elementor\Controls_Manager::NUMBER,
235	'min' => 2,
236	'max' => 12,
237	'default' => 5,
238	'description' => esc_html__( 'Set the number of thumbnails to show per page.', 'surecart' ),
239	'condition' => [
240	'desktop_gallery' => 'slider',
241	],
242	]
243	);
244
245	$this->add_control(
246	'show_thumbs',
247	[
248	'label' => esc_html__( 'Show Thumbnails', 'surecart' ),
249	'type' => \Elementor\Controls_Manager::SWITCHER,
250	'label_on' => esc_html__( 'Yes', 'surecart' ),
251	'label_off' => esc_html__( 'No', 'surecart' ),
252	'default' => 'yes',
253	'condition' => [
254	'desktop_gallery' => 'slider',
255	],
256	]
257	);
258
259	$this->end_controls_section();
260	}
261
262	/**
263	* Register the widget controls.
264	*
265	* @return void
266	*/
267	protected function register_controls() {
268	$this->register_content_settings();
269	}
270
271	/**
272	* Get the placeholder image URL.
273	*
274	* @return string
275	*/
276	private function get_placeholder_image(): string {
277	return trailingslashit( \SureCart::core()->assets()->getUrl() ) . 'images/placeholder.jpg';
278	}
279
280	/**
281	* Render the widget output on the frontend.
282	*
283	* @return void
284	*/
285	protected function render() {
286	$settings = $this->get_settings_for_display();
287
288	if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
289	$this->render_editor_content( $settings );
290	return;
291	}
292
293	$auto_height = 'gallery' === $settings['desktop_gallery'] ? true : 'yes' === $settings['slider_is_auto_height'];
294	$height = ! $auto_height ? ( ! empty( $settings['slider_height']['size'] ) ? $settings['slider_height']['size'] . $settings['slider_height']['unit'] : '' ) : '';
295
296	$attributes = array(
297	'thumbnails_per_page' => $this->get_thumbnails_per_page( $settings ),
298	'auto_height' => $auto_height,
299	'height' => $height,
300	'width' => ! empty( $settings['slider_max_image_width']['size'] ) ? $settings['slider_max_image_width']['size'] . $settings['slider_max_image_width']['unit'] : '',
301	'lightbox' => 'yes' === $settings['lightbox'],
302	'desktop_gallery' => 'gallery' === $settings['desktop_gallery'],
303	'show_thumbnails' => 'yes' === $settings['show_thumbs'],
304	);
305
306	?>
307	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
308	<!-- wp:surecart/product-media <?php echo wp_json_encode( $attributes ); ?> /-->
309	</div>
310	<?php
311	}
312
313	/**
314	* Get the thumbnails per page setting, clamped to the 2-12 range the thumbnail styles support.
315	*
316	* Values saved before the control had a minimum can be out of range (e.g. 1).
317	*
318	* @param array $settings Widget settings.
319	* @return int
320	*/
321	protected function get_thumbnails_per_page( $settings ) {
322	return max( 2, min( 12, ! empty( $settings['thumbnails_per_page'] ) ? (int) $settings['thumbnails_per_page'] : 5 ) );
323	}
324
325	/**
326	* Render content specifically for the editor with dynamic product data.
327	*
328	* @param array $settings Widget settings.
329	* @return void
330	*/
331	protected function render_editor_content( $settings ) {
332	$this->add_render_attribute( 'wrapper', 'data-widget-type', $this->get_name() );
333	$this->add_render_attribute( 'wrapper', 'data-surecart-dynamic', 'true' );
334
335	// Get current product context.
336	$product = sc_get_product();
337	$images = $this->get_product_images( $product );
338
339	if ( 'gallery' === $settings['desktop_gallery'] ) {
340	$this->render_gallery_view( $images, $settings );
341	} else {
342	$this->render_slider_view( $images, $settings );
343	}
344	}
345
346	/**
347	* Get product images array.
348	*
349	* @param object\|null $product Product object.
350	* @return array
351	*/
352	protected function get_product_images( $product ) {
353	// Return placeholder images if no product or gallery is available.
354	if ( ! $product \|\| empty( $product->gallery ) ) {
355	return array_fill(
356	0,
357	5,
358	array(
359	'src' => $this->get_placeholder_image(),
360	'width' => 1000,
361	'alt' => __( 'Placeholder image', 'surecart' ),
362	)
363	);
364	}
365
366	return array_map(
367	function ( $image ) {
368	return array(
369	'src' => $image->guid ? $image->guid : $this->get_placeholder_image(),
370	'width' => $image->width ?? 1000,
371	'alt' => $image->alt ?? '',
372	);
373	},
374	$product->gallery
375	);
376	}
377
378	/**
379	* Render gallery view.
380	*
381	* @param array $images Array of images.
382	* @param array $settings Widget settings.
383	* @return void
384	*/
385	protected function render_gallery_view( $images, $settings ) {
386	?>
387	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
388	<div class="sc-image-gallery">
389	<div class="swiper">
390	<div class="swiper-wrapper">
391	<?php foreach ( array_slice( $images, 0, 5 ) as $image ) : ?>
392	<div class="swiper-slide" style="background: transparent;">
393	<img
394	src="<?php echo esc_url( $image['src'] ); ?>"
395	alt="<?php echo esc_attr( $image['alt'] ); ?>"
396	width="<?php echo esc_attr( $image['width'] ); ?>"
397	/>
398	</div>
399	<?php endforeach; ?>
400	</div>
401	</div>
402	</div>
403	</div>
404	<?php
405	}
406
407	/**
408	* Render slider view.
409	*
410	* @param array $images Array of images.
411	* @param array $settings Widget settings.
412	* @return void
413	*/
414	protected function render_slider_view( $images, $settings ) {
415	$thumbnails_per_page = $this->get_thumbnails_per_page( $settings );
416	$show_thumbs = 'yes' === $settings['show_thumbs'];
417	?>
418	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
419	<div class="sc-image-slider">
420	<div class="swiper swiper-initialized">
421	<div class="swiper-wrapper">
422	<div class="swiper-slide">
423	<img
424	src="<?php echo esc_url( $images[0]['src'] ); ?>"
425	alt="<?php echo esc_attr( $images[0]['alt'] ); ?>"
426	width="<?php echo esc_attr( $images[0]['width'] ); ?>"
427	/>
428	</div>
429	</div>
430	<div class="swiper-button-prev"></div>
431	<div class="swiper-button-next"></div>
432	</div>
433
434	<?php if ( $show_thumbs ) : ?>
435	<div class="sc-image-slider__thumbs">
436	<div class="sc-image-slider-button__prev" tabIndex="-1" role="button">
437	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
438	<polyline points="15 18 9 12 15 6" />
439	</svg>
440	</div>
441
442	<div class="swiper swiper-initialized">
443	<div class="swiper-wrapper sc-has-<?php echo esc_attr( $thumbnails_per_page ); ?>-thumbs">
444	<?php foreach ( array_slice( $images, 0, $thumbnails_per_page ) as $image ) : ?>
445	<div class="swiper-slide" style="background: transparent;">
446	<img
447	src="<?php echo esc_url( $image['src'] ); ?>"
448	alt="<?php echo esc_attr( $image['alt'] ); ?>"
449	width="<?php echo esc_attr( $image['width'] ); ?>"
450	/>
451	</div>
452	<?php endforeach; ?>
453	</div>
454	</div>
455
456	<div class="sc-image-slider-button__next" tabIndex="-1" role="button">
457	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
458	<polyline points="9 18 15 12 9 6" />
459	</svg>
460	</div>
461	</div>
462	<?php endif; ?>
463	</div>
464	</div>
465	<?php
466	}
467	}
468