elementor / includes / widgets / testimonial.php

testimonial.php in Elementor Website Builder – more than just a page builder 3.20.2, at includes/widgets/testimonial.php

632 lines 16.6 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor testimonial widget.
13	*
14	* Elementor widget that displays customer testimonials that show social proof.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Testimonial extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve testimonial widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'testimonial';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve testimonial widget title.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Testimonial', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve testimonial widget icon.
52	*
53	* @since 1.0.0
54	* @access public
55	*
56	* @return string Widget icon.
57	*/
58	public function get_icon() {
59	return 'eicon-testimonial';
60	}
61
62	/**
63	* Get widget keywords.
64	*
65	* Retrieve the list of keywords the widget belongs to.
66	*
67	* @since 2.1.0
68	* @access public
69	*
70	* @return array Widget keywords.
71	*/
72	public function get_keywords() {
73	return [ 'testimonial', 'blockquote' ];
74	}
75
76	/**
77	* Get widget upsale data.
78	*
79	* Retrieve the widget promotion data.
80	*
81	* @since 3.18.0
82	* @access protected
83	*
84	* @return array Widget promotion data.
85	*/
86	protected function get_upsale_data() {
87	return [
88	'condition' => ! Utils::has_pro(),
89	'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ),
90	'image_alt' => esc_attr__( 'Upgrade', 'elementor' ),
91	'description' => esc_html__( 'Use interesting masonry layouts and other overlay features with Elementor\'s Pro Gallery widget.', 'elementor' ),
92	'upgrade_url' => esc_url( 'https://go.elementor.com/go-pro-testimonial-widget/' ),
93	'upgrade_text' => esc_html__( 'Upgrade Now', 'elementor' ),
94	];
95	}
96
97	/**
98	* Register testimonial widget controls.
99	*
100	* Adds different input fields to allow the user to change and customize the widget settings.
101	*
102	* @since 3.1.0
103	* @access protected
104	*/
105	protected function register_controls() {
106	$this->start_controls_section(
107	'section_testimonial',
108	[
109	'label' => esc_html__( 'Testimonial', 'elementor' ),
110	]
111	);
112
113	$this->add_control(
114	'testimonial_content',
115	[
116	'label' => esc_html__( 'Content', 'elementor' ),
117	'type' => Controls_Manager::TEXTAREA,
118	'dynamic' => [
119	'active' => true,
120	],
121	'rows' => '10',
122	'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
123	]
124	);
125
126	$this->add_control(
127	'testimonial_image',
128	[
129	'label' => esc_html__( 'Choose Image', 'elementor' ),
130	'type' => Controls_Manager::MEDIA,
131	'dynamic' => [
132	'active' => true,
133	],
134	'default' => [
135	'url' => Utils::get_placeholder_image_src(),
136	],
137	]
138	);
139
140	$this->add_group_control(
141	Group_Control_Image_Size::get_type(),
142	[
143	'name' => 'testimonial_image', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `testimonial_image_size` and `testimonial_image_custom_dimension`.
144	'default' => 'full',
145	]
146	);
147
148	$this->add_control(
149	'testimonial_name',
150	[
151	'label' => esc_html__( 'Name', 'elementor' ),
152	'type' => Controls_Manager::TEXT,
153	'dynamic' => [
154	'active' => true,
155	],
156	'ai' => [
157	'active' => false,
158	],
159	'default' => esc_html__( 'John Doe', 'elementor' ),
160	]
161	);
162
163	$this->add_control(
164	'testimonial_job',
165	[
166	'label' => esc_html__( 'Title', 'elementor' ),
167	'type' => Controls_Manager::TEXT,
168	'dynamic' => [
169	'active' => true,
170	],
171	'ai' => [
172	'active' => false,
173	],
174	'default' => esc_html__( 'Designer', 'elementor' ),
175	]
176	);
177
178	$this->add_control(
179	'link',
180	[
181	'label' => esc_html__( 'Link', 'elementor' ),
182	'type' => Controls_Manager::URL,
183	'dynamic' => [
184	'active' => true,
185	],
186	]
187	);
188
189	$aside = is_rtl() ? 'right' : 'left';
190
191	$this->add_control(
192	'testimonial_image_position',
193	[
194	'label' => esc_html__( 'Image Position', 'elementor' ),
195	'type' => Controls_Manager::CHOOSE,
196	'default' => 'aside',
197	'options' => [
198	'aside' => [
199	'title' => esc_html__( 'Aside', 'elementor' ),
200	'icon' => 'eicon-h-align-' . $aside,
201	],
202	'top' => [
203	'title' => esc_html__( 'Top', 'elementor' ),
204	'icon' => 'eicon-v-align-top',
205	],
206	],
207	'toggle' => false,
208	'condition' => [
209	'testimonial_image[url]!' => '',
210	],
211	'separator' => 'before',
212	'style_transfer' => true,
213	]
214	);
215
216	$this->add_responsive_control(
217	'testimonial_alignment',
218	[
219	'label' => esc_html__( 'Alignment', 'elementor' ),
220	'type' => Controls_Manager::CHOOSE,
221	'default' => 'center',
222	'options' => [
223	'left' => [
224	'title' => esc_html__( 'Left', 'elementor' ),
225	'icon' => 'eicon-text-align-left',
226	],
227	'center' => [
228	'title' => esc_html__( 'Center', 'elementor' ),
229	'icon' => 'eicon-text-align-center',
230	],
231	'right' => [
232	'title' => esc_html__( 'Right', 'elementor' ),
233	'icon' => 'eicon-text-align-right',
234	],
235	],
236	'selectors' => [
237	'{{WRAPPER}} .elementor-testimonial-wrapper' => 'text-align: {{VALUE}}',
238	],
239	'style_transfer' => true,
240	]
241	);
242
243	$this->end_controls_section();
244
245	// Content.
246	$this->start_controls_section(
247	'section_style_testimonial_content',
248	[
249	'label' => esc_html__( 'Content', 'elementor' ),
250	'tab' => Controls_Manager::TAB_STYLE,
251	]
252	);
253
254	$this->add_control(
255	'content_content_color',
256	[
257	'label' => esc_html__( 'Text Color', 'elementor' ),
258	'type' => Controls_Manager::COLOR,
259	'global' => [
260	'default' => Global_Colors::COLOR_TEXT,
261	],
262	'default' => '',
263	'selectors' => [
264	'{{WRAPPER}} .elementor-testimonial-content' => 'color: {{VALUE}};',
265	],
266	]
267	);
268
269	$this->add_group_control(
270	Group_Control_Typography::get_type(),
271	[
272	'name' => 'content_typography',
273	'global' => [
274	'default' => Global_Typography::TYPOGRAPHY_TEXT,
275	],
276	'selector' => '{{WRAPPER}} .elementor-testimonial-content',
277	]
278	);
279
280	$this->add_group_control(
281	Group_Control_Text_Shadow::get_type(),
282	[
283	'name' => 'content_shadow',
284	'selector' => '{{WRAPPER}} .elementor-testimonial-content',
285	]
286	);
287
288	$this->end_controls_section();
289
290	// Image.
291	$this->start_controls_section(
292	'section_style_testimonial_image',
293	[
294	'label' => esc_html__( 'Image', 'elementor' ),
295	'tab' => Controls_Manager::TAB_STYLE,
296	'condition' => [
297	'testimonial_image[url]!' => '',
298	],
299	]
300	);
301
302	$this->add_responsive_control(
303	'image_size',
304	[
305	'label' => esc_html__( 'Image Resolution', 'elementor' ),
306	'type' => Controls_Manager::SLIDER,
307	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
308	'range' => [
309	'px' => [
310	'min' => 20,
311	'max' => 200,
312	],
313	],
314	'selectors' => [
315	'{{WRAPPER}} .elementor-testimonial-wrapper .elementor-testimonial-image img' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
316	],
317	]
318	);
319
320	$this->add_group_control(
321	Group_Control_Border::get_type(),
322	[
323	'name' => 'image_border',
324	'selector' => '{{WRAPPER}} .elementor-testimonial-wrapper .elementor-testimonial-image img',
325	'separator' => 'before',
326	]
327	);
328
329	$this->add_responsive_control(
330	'image_border_radius',
331	[
332	'label' => esc_html__( 'Border Radius', 'elementor' ),
333	'type' => Controls_Manager::DIMENSIONS,
334	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
335	'selectors' => [
336	'{{WRAPPER}} .elementor-testimonial-wrapper .elementor-testimonial-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
337	],
338	]
339	);
340
341	$this->end_controls_section();
342
343	// Name.
344	$this->start_controls_section(
345	'section_style_testimonial_name',
346	[
347	'label' => esc_html__( 'Name', 'elementor' ),
348	'tab' => Controls_Manager::TAB_STYLE,
349	]
350	);
351
352	$this->add_control(
353	'name_text_color',
354	[
355	'label' => esc_html__( 'Text Color', 'elementor' ),
356	'type' => Controls_Manager::COLOR,
357	'global' => [
358	'default' => Global_Colors::COLOR_PRIMARY,
359	],
360	'default' => '',
361	'selectors' => [
362	'{{WRAPPER}} .elementor-testimonial-name' => 'color: {{VALUE}};',
363	],
364	]
365	);
366
367	$this->add_group_control(
368	Group_Control_Typography::get_type(),
369	[
370	'name' => 'name_typography',
371	'global' => [
372	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
373	],
374	'selector' => '{{WRAPPER}} .elementor-testimonial-name',
375	]
376	);
377
378	$this->add_group_control(
379	Group_Control_Text_Shadow::get_type(),
380	[
381	'name' => 'name_shadow',
382	'selector' => '{{WRAPPER}} .elementor-testimonial-name',
383	]
384	);
385
386	$this->end_controls_section();
387
388	// Job.
389	$this->start_controls_section(
390	'section_style_testimonial_job',
391	[
392	'label' => esc_html__( 'Title', 'elementor' ),
393	'tab' => Controls_Manager::TAB_STYLE,
394	]
395	);
396
397	$this->add_control(
398	'job_text_color',
399	[
400	'label' => esc_html__( 'Text Color', 'elementor' ),
401	'type' => Controls_Manager::COLOR,
402	'global' => [
403	'default' => Global_Colors::COLOR_SECONDARY,
404	],
405	'default' => '',
406	'selectors' => [
407	'{{WRAPPER}} .elementor-testimonial-job' => 'color: {{VALUE}};',
408	],
409	]
410	);
411
412	$this->add_group_control(
413	Group_Control_Typography::get_type(),
414	[
415	'name' => 'job_typography',
416	'global' => [
417	'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
418	],
419	'selector' => '{{WRAPPER}} .elementor-testimonial-job',
420	]
421	);
422
423	$this->add_group_control(
424	Group_Control_Text_Shadow::get_type(),
425	[
426	'name' => 'job_shadow',
427	'selector' => '{{WRAPPER}} .elementor-testimonial-job',
428	]
429	);
430
431	$this->end_controls_section();
432	}
433
434	/**
435	* Render testimonial widget output on the frontend.
436	*
437	* Written in PHP and used to generate the final HTML.
438	*
439	* @since 1.0.0
440	* @access protected
441	*/
442	protected function render() {
443	$settings = $this->get_settings_for_display();
444
445	$this->add_render_attribute( 'wrapper', 'class', 'elementor-testimonial-wrapper' );
446
447	$this->add_render_attribute( 'meta', 'class', 'elementor-testimonial-meta' );
448
449	if ( $settings['testimonial_image']['url'] ) {
450	$this->add_render_attribute( 'meta', 'class', 'elementor-has-image' );
451	}
452
453	if ( $settings['testimonial_image_position'] ) {
454	$this->add_render_attribute( 'meta', 'class', 'elementor-testimonial-image-position-' . $settings['testimonial_image_position'] );
455	}
456
457	$has_content = ! ! $settings['testimonial_content'];
458	$has_image = ! ! $settings['testimonial_image']['url'];
459	$has_name = ! ! $settings['testimonial_name'];
460	$has_job = ! ! $settings['testimonial_job'];
461
462	if ( ! $has_content && ! $has_image && ! $has_name && ! $has_job ) {
463	return;
464	}
465
466	if ( ! empty( $settings['link']['url'] ) ) {
467	$this->add_link_attributes( 'link', $settings['link'] );
468	}
469	?>
470	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
471	<?php
472	if ( $has_content ) :
473	$this->add_render_attribute( 'testimonial_content', 'class', 'elementor-testimonial-content' );
474	$this->add_inline_editing_attributes( 'testimonial_content' );
475	?>
476	<div <?php $this->print_render_attribute_string( 'testimonial_content' ); ?>><?php $this->print_unescaped_setting( 'testimonial_content' ); ?></div>
477	<?php endif; ?>
478
479	<?php if ( $has_image \|\| $has_name \|\| $has_job ) : ?>
480	<div <?php $this->print_render_attribute_string( 'meta' ); ?>>
481	<div class="elementor-testimonial-meta-inner">
482	<?php if ( $has_image ) : ?>
483	<div class="elementor-testimonial-image">
484	<?php
485	$image_html = Group_Control_Image_Size::get_attachment_image_html( $settings, 'testimonial_image' );
486	if ( ! empty( $settings['link']['url'] ) ) :
487	$image_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $image_html . '</a>';
488	endif;
489	echo wp_kses_post( $image_html );
490	?>
491	</div>
492	<?php endif; ?>
493
494	<?php if ( $has_name \|\| $has_job ) : ?>
495	<div class="elementor-testimonial-details">
496	<?php
497	if ( $has_name ) :
498	$this->add_render_attribute( 'testimonial_name', 'class', 'elementor-testimonial-name' );
499	$this->add_inline_editing_attributes( 'testimonial_name', 'none' );
500
501	if ( ! empty( $settings['link']['url'] ) ) :
502	?>
503	<a <?php $this->print_render_attribute_string( 'testimonial_name' ); ?> <?php $this->print_render_attribute_string( 'link' ); ?>><?php $this->print_unescaped_setting( 'testimonial_name' ); ?></a>
504	<?php
505	else :
506	?>
507	<div <?php $this->print_render_attribute_string( 'testimonial_name' ); ?>><?php $this->print_unescaped_setting( 'testimonial_name' ); ?></div>
508	<?php
509	endif;
510	endif; ?>
511	<?php
512	if ( $has_job ) :
513	$this->add_render_attribute( 'testimonial_job', 'class', 'elementor-testimonial-job' );
514
515	$this->add_inline_editing_attributes( 'testimonial_job', 'none' );
516
517	if ( ! empty( $settings['link']['url'] ) ) :
518	?>
519	<a <?php $this->print_render_attribute_string( 'testimonial_job' ); ?> <?php $this->print_render_attribute_string( 'link' ); ?>><?php $this->print_unescaped_setting( 'testimonial_job' ); ?></a>
520	<?php
521	else :
522	?>
523	<div <?php $this->print_render_attribute_string( 'testimonial_job' ); ?>><?php $this->print_unescaped_setting( 'testimonial_job' ); ?></div>
524	<?php
525	endif;
526	endif; ?>
527	</div>
528	<?php endif; ?>
529	</div>
530	</div>
531	<?php endif; ?>
532	</div>
533	<?php
534	}
535
536	/**
537	* Render testimonial widget output in the editor.
538	*
539	* Written as a Backbone JavaScript template and used to generate the live preview.
540	*
541	* @since 2.9.0
542	* @access protected
543	*/
544	protected function content_template() {
545	?>
546	<#
547	var image = {
548	id: settings.testimonial_image.id,
549	url: settings.testimonial_image.url,
550	size: settings.testimonial_image_size,
551	dimension: settings.testimonial_image_custom_dimension,
552	model: view.getEditModel()
553	};
554	var imageUrl = false, hasImage = '';
555
556	if ( '' !== settings.testimonial_image.url ) {
557	imageUrl = elementor.imagesManager.getImageUrl( image );
558	hasImage = ' elementor-has-image';
559
560	var imageHtml = '<img src="' + _.escape( imageUrl ) + '" alt="testimonial" />';
561	if ( settings.link.url ) {
562	imageHtml = '<a href="' + _.escape( settings.link.url ) + '">' + imageHtml + '</a>';
563	}
564	}
565
566	var testimonial_image_position = settings.testimonial_image_position ? ' elementor-testimonial-image-position-' + settings.testimonial_image_position : '';
567	#>
568	<div class="elementor-testimonial-wrapper">
569	<# if ( '' !== settings.testimonial_content ) {
570	view.addRenderAttribute( 'testimonial_content', {
571	'data-binding-type': 'content',
572	'data-binding-setting': 'testimonial_content',
573	} );
574	view.addRenderAttribute( 'testimonial_content', 'class', 'elementor-testimonial-content' );
575
576	view.addInlineEditingAttributes( 'testimonial_content' );
577	#>
578	<div {{{ view.getRenderAttributeString( 'testimonial_content' ) }}}>{{{ settings.testimonial_content }}}</div>
579	<# } #>
580	<div class="elementor-testimonial-meta{{ hasImage }}{{ testimonial_image_position }}">
581	<div class="elementor-testimonial-meta-inner">
582	<# if ( imageUrl ) { #>
583	<div class="elementor-testimonial-image">{{{ imageHtml }}}</div>
584	<# } #>
585	<div class="elementor-testimonial-details">
586	<?php $this->render_testimonial_description(); ?>
587	</div>
588	</div>
589	</div>
590	</div>
591	<?php
592	}
593
594	protected function render_testimonial_description() {
595	?>
596	<#
597	if ( '' !== settings.testimonial_name ) {
598	view.addRenderAttribute( 'testimonial_name', 'class', 'elementor-testimonial-name' );
599
600	view.addInlineEditingAttributes( 'testimonial_name', 'none' );
601
602	if ( settings.link.url ) {
603	#>
604	<a href="{{ settings.link.url }}" {{{ view.getRenderAttributeString( 'testimonial_name' ) }}}>{{{ settings.testimonial_name }}}</a>
605	<#
606	} else {
607	#>
608	<div {{{ view.getRenderAttributeString( 'testimonial_name' ) }}}>{{{ settings.testimonial_name }}}</div>
609	<#
610	}
611	}
612
613	if ( '' !== settings.testimonial_job ) {
614	view.addRenderAttribute( 'testimonial_job', 'class', 'elementor-testimonial-job' );
615
616	view.addInlineEditingAttributes( 'testimonial_job', 'none' );
617
618	if ( settings.link.url ) {
619	#>
620	<a href="{{ settings.link.url }}" {{{ view.getRenderAttributeString( 'testimonial_job' ) }}}>{{{ settings.testimonial_job }}}</a>
621	<#
622	} else {
623	#>
624	<div {{{ view.getRenderAttributeString( 'testimonial_job' ) }}}>{{{ settings.testimonial_job }}}</div>
625	<#
626	}
627	}
628	#>
629	<?php
630	}
631	}
632