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

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

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

Media.php

454 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	'default' => 5,
236	'description' => esc_html__( 'Set the number of thumbnails to show per page.', 'surecart' ),
237	'condition' => [
238	'desktop_gallery' => 'slider',
239	],
240	]
241	);
242
243	$this->add_control(
244	'show_thumbs',
245	[
246	'label' => esc_html__( 'Show Thumbnails', 'surecart' ),
247	'type' => \Elementor\Controls_Manager::SWITCHER,
248	'label_on' => esc_html__( 'Yes', 'surecart' ),
249	'label_off' => esc_html__( 'No', 'surecart' ),
250	'default' => 'yes',
251	'condition' => [
252	'desktop_gallery' => 'slider',
253	],
254	]
255	);
256
257	$this->end_controls_section();
258	}
259
260	/**
261	* Register the widget controls.
262	*
263	* @return void
264	*/
265	protected function register_controls() {
266	$this->register_content_settings();
267	}
268
269	/**
270	* Get the placeholder image URL.
271	*
272	* @return string
273	*/
274	private function get_placeholder_image(): string {
275	return trailingslashit( \SureCart::core()->assets()->getUrl() ) . 'images/placeholder.jpg';
276	}
277
278	/**
279	* Render the widget output on the frontend.
280	*
281	* @return void
282	*/
283	protected function render() {
284	$settings = $this->get_settings_for_display();
285
286	if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
287	$this->render_editor_content( $settings );
288	return;
289	}
290
291	$auto_height = 'gallery' === $settings['desktop_gallery'] ? true : 'yes' === $settings['slider_is_auto_height'];
292	$height = ! $auto_height ? ( ! empty( $settings['slider_height']['size'] ) ? $settings['slider_height']['size'] . $settings['slider_height']['unit'] : '' ) : '';
293
294	$attributes = array(
295	'thumbnails_per_page' => $settings['thumbnails_per_page'],
296	'auto_height' => $auto_height,
297	'height' => $height,
298	'width' => ! empty( $settings['slider_max_image_width']['size'] ) ? $settings['slider_max_image_width']['size'] . $settings['slider_max_image_width']['unit'] : '',
299	'lightbox' => 'yes' === $settings['lightbox'],
300	'desktop_gallery' => 'gallery' === $settings['desktop_gallery'],
301	'show_thumbs' => 'yes' === $settings['show_thumbs'],
302	);
303
304	?>
305	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
306	<!-- wp:surecart/product-media <?php echo wp_json_encode( $attributes ); ?> /-->
307	</div>
308	<?php
309	}
310
311	/**
312	* Render content specifically for the editor with dynamic product data.
313	*
314	* @param array $settings Widget settings.
315	* @return void
316	*/
317	protected function render_editor_content( $settings ) {
318	$this->add_render_attribute( 'wrapper', 'data-widget-type', $this->get_name() );
319	$this->add_render_attribute( 'wrapper', 'data-surecart-dynamic', 'true' );
320
321	// Get current product context.
322	$product = sc_get_product();
323	$images = $this->get_product_images( $product );
324
325	if ( 'gallery' === $settings['desktop_gallery'] ) {
326	$this->render_gallery_view( $images, $settings );
327	} else {
328	$this->render_slider_view( $images, $settings );
329	}
330	}
331
332	/**
333	* Get product images array.
334	*
335	* @param object\|null $product Product object.
336	* @return array
337	*/
338	protected function get_product_images( $product ) {
339	// Return placeholder images if no product or gallery is available.
340	if ( ! $product \|\| empty( $product->gallery ) ) {
341	return array_fill(
342	0,
343	5,
344	array(
345	'src' => $this->get_placeholder_image(),
346	'width' => 1000,
347	'alt' => __( 'Placeholder image', 'surecart' ),
348	)
349	);
350	}
351
352	return array_map(
353	function ( $image ) {
354	return array(
355	'src' => $image->guid ? $image->guid : $this->get_placeholder_image(),
356	'width' => $image->width ?? 1000,
357	'alt' => $image->alt ?? '',
358	);
359	},
360	$product->gallery
361	);
362	}
363
364	/**
365	* Render gallery view.
366	*
367	* @param array $images Array of images.
368	* @param array $settings Widget settings.
369	* @return void
370	*/
371	protected function render_gallery_view( $images, $settings ) {
372	?>
373	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
374	<div class="sc-image-gallery">
375	<div class="swiper">
376	<div class="swiper-wrapper">
377	<?php foreach ( array_slice( $images, 0, 5 ) as $image ) : ?>
378	<div class="swiper-slide" style="background: transparent;">
379	<img
380	src="<?php echo esc_url( $image['src'] ); ?>"
381	alt="<?php echo esc_attr( $image['alt'] ); ?>"
382	width="<?php echo esc_attr( $image['width'] ); ?>"
383	/>
384	</div>
385	<?php endforeach; ?>
386	</div>
387	</div>
388	</div>
389	</div>
390	<?php
391	}
392
393	/**
394	* Render slider view.
395	*
396	* @param array $images Array of images.
397	* @param array $settings Widget settings.
398	* @return void
399	*/
400	protected function render_slider_view( $images, $settings ) {
401	$thumbnails_per_page = $settings['thumbnails_per_page'];
402	$show_thumbs = 'yes' === $settings['show_thumbs'];
403	?>
404	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
405	<div class="sc-image-slider">
406	<div class="swiper swiper-initialized">
407	<div class="swiper-wrapper">
408	<div class="swiper-slide">
409	<img
410	src="<?php echo esc_url( $images[0]['src'] ); ?>"
411	alt="<?php echo esc_attr( $images[0]['alt'] ); ?>"
412	width="<?php echo esc_attr( $images[0]['width'] ); ?>"
413	/>
414	</div>
415	</div>
416	<div class="swiper-button-prev"></div>
417	<div class="swiper-button-next"></div>
418	</div>
419
420	<?php if ( $show_thumbs ) : ?>
421	<div class="sc-image-slider__thumbs">
422	<div class="sc-image-slider-button__prev" tabIndex="-1" role="button">
423	<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">
424	<polyline points="15 18 9 12 15 6" />
425	</svg>
426	</div>
427
428	<div class="swiper swiper-initialized">
429	<div class="swiper-wrapper sc-has-<?php echo esc_attr( $thumbnails_per_page ); ?>-thumbs">
430	<?php foreach ( array_slice( $images, 0, $thumbnails_per_page ) as $image ) : ?>
431	<div class="swiper-slide" style="background: transparent;">
432	<img
433	src="<?php echo esc_url( $image['src'] ); ?>"
434	alt="<?php echo esc_attr( $image['alt'] ); ?>"
435	width="<?php echo esc_attr( $image['width'] ); ?>"
436	/>
437	</div>
438	<?php endforeach; ?>
439	</div>
440	</div>
441
442	<div class="sc-image-slider-button__next" tabIndex="-1" role="button">
443	<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">
444	<polyline points="9 18 15 12 9 6" />
445	</svg>
446	</div>
447	</div>
448	<?php endif; ?>
449	</div>
450	</div>
451	<?php
452	}
453	}
454