cartflows / modules / elementor / widgets / class-cartflows-el-next-step-button.php

class-cartflows-el-next-step-button.php in CartFlows – Funnel Builder & Checkout Plugin for WooCommerce 3.3.0, at modules/elementor/widgets/class-cartflows-el-next-step-button.php

710 lines 18.0 KB

Raw Download Zip

1	<?php
2	/**
3	* Elementor Classes.
4	*
5	* @package cartflows
6	*/
7
8	use Elementor\Controls_Manager;
9	use Elementor\Group_Control_Border;
10	use Elementor\Widget_Base;
11	use Elementor\Widget_Button;
12	use Elementor\Group_Control_Typography;
13	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
14	use Elementor\Group_Control_Background;
15	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
16	use Elementor\Icons_Manager;
17
18	if ( ! defined( 'ABSPATH' ) ) {
19	exit; // Exit if accessed directly.
20	}
21
22	/**
23	* Next Step Button Widget
24	*
25	* @since 1.11.8
26	*/
27	class CartFlows_Next_Step_Button extends Widget_Base {
28
29	/**
30	* Module should load or not.
31	*
32	* @since 1.11.8
33	* @access public
34	* @param string $step_type Current step type.
35	*
36	* @return bool true\|false.
37	*/
38	public static function is_enable( $step_type ) {
39
40	if ( 'landing' === $step_type ) {
41	return true;
42	}
43
44	return false;
45	}
46
47	/**
48	* Retrieve the widget name.
49	*
50	* @since 1.11.8
51	*
52	* @access public
53	*
54	* @return string Widget name.
55	*/
56	public function get_name() {
57	return 'next-step-button';
58	}
59
60	/**
61	* Retrieve the widget title.
62	*
63	* @since 1.11.8
64	*
65	* @access public
66	*
67	* @return string Widget title.
68	*/
69	public function get_title() {
70	return __( 'Next Step Button', 'cartflows' );
71	}
72
73
74	/**
75	* Retrieve the widget icon.
76	*
77	* @since 1.11.8
78	*
79	* @access public
80	*
81	* @return string Widget icon.
82	*/
83	public function get_icon() {
84	return 'wcf-brand-icon wcf-el-icon-next-step';
85	}
86
87
88	/**
89	* Retrieve the list of categories the widget belongs to.
90	*
91	* Used to determine where to display the widget in the editor.
92	*
93	* Note that currently Elementor supports only one category.
94	* When multiple categories passed, Elementor uses the first one.
95	*
96	* @since 1.11.8
97	*
98	* @access public
99	*
100	* @return array Widget categories.
101	*/
102	public function get_categories() {
103	return array( 'cartflows-widgets' );
104	}
105
106	/**
107	* Retrieve Widget Keywords.
108	*
109	* @since 1.11.8
110	* @access public
111	*
112	* @return string Widget keywords.
113	*/
114	public function get_keywords() {
115	return array( 'cartflows', 'next step', 'button' );
116	}
117
118	/**
119	* Retrieve Next Step Button sizes.
120	*
121	* @since 1.11.8
122	* @access public
123	*
124	* @return array Next Step Button Sizes.
125	*/
126	public static function get_button_sizes() {
127	return Widget_Button::get_button_sizes();
128	}
129
130	/**
131	* Register Next Step Button controls.
132	*
133	* @since 1.11.8
134	* @access protected
135	*/
136	protected function register_controls() {
137
138	// Content Tab.
139	$this->register_button_content_controls();
140
141	// Style Tab.
142	$this->register_button_style_controls();
143	$this->register_button_content_style_controls();
144	}
145
146	/**
147	* Register Next Step Button General Controls.
148	*
149	* @since 1.11.8
150	* @access protected
151	*/
152	protected function register_button_content_controls() {
153
154	$this->start_controls_section(
155	'section_general_fields',
156	array(
157	'label' => __( 'General', 'cartflows' ),
158	)
159	);
160
161	$this->add_control(
162	'title',
163	array(
164	'label' => __( 'Title', 'cartflows' ),
165	'type' => Controls_Manager::TEXT,
166	'default' => __( 'BUY NOW', 'cartflows' ),
167	'dynamic' => array(
168	'active' => true,
169	),
170	)
171	);
172
173	$this->add_control(
174	'sub_title',
175	array(
176	'label' => __( 'Sub Title', 'cartflows' ),
177	'type' => Controls_Manager::TEXT,
178	'dynamic' => array(
179	'active' => true,
180	),
181	)
182	);
183
184	$this->add_control(
185	'icon',
186	array(
187	'label' => __( 'Icon', 'cartflows' ),
188	'type' => Controls_Manager::ICONS,
189	)
190	);
191
192	$this->add_control(
193	'icon_position',
194	array(
195	'label' => __( 'Icon Position', 'cartflows' ),
196	'type' => Controls_Manager::SELECT,
197	'default' => 'before_title',
198	'options' => array(
199	'before_title' => __( 'Before Title', 'cartflows' ),
200	'after_title' => __( 'After Title', 'cartflows' ),
201	'before_title_sub_title' => __( 'Before Title & Sub Title', 'cartflows' ),
202	'after_title_sub_title' => __( 'After Title & Sub Title', 'cartflows' ),
203	),
204	'condition' => array(
205	'icon[value]!' => '',
206	),
207	)
208	);
209
210	$this->add_control(
211	'icon_vertical_align',
212	array(
213	'label' => __( 'Icon Vertical Alignment', 'cartflows' ),
214	'type' => Controls_Manager::CHOOSE,
215	'label_block' => false,
216	'default' => 'center',
217	'options' => array(
218	'flex-start' => array(
219	'title' => __( 'Top', 'cartflows' ),
220	'icon' => 'eicon-v-align-top',
221	),
222	'center' => array(
223	'title' => __( 'Middle', 'cartflows' ),
224	'icon' => 'eicon-v-align-middle',
225	),
226	),
227	'condition' => array(
228	'icon_position' => array( 'before_title_sub_title', 'after_title_sub_title' ),
229	'icon[value]!' => '',
230	),
231	'selectors' => array(
232	'{{WRAPPER}} .cartflows-elementor__next-step-button-icon-wrap' => 'align-self: {{VALUE}};',
233	),
234	)
235	);
236
237	$this->add_control(
238	'icon_spacing',
239	array(
240	'label' => __( 'Icon Spacing', 'cartflows' ),
241	'type' => Controls_Manager::SLIDER,
242	'range' => array(
243	'px' => array(
244	'max' => 50,
245	),
246	),
247	'selectors' => array(
248	'{{WRAPPER}} .cartflows-elementor__next-step-button-title-wrap .cartflows-elementor__before_title, {{WRAPPER}} .cartflows-elementor__before_title_sub_title' => 'margin-right: {{SIZE}}{{UNIT}};',
249	'{{WRAPPER}} .cartflows-elementor__next-step-button-title-wrap .cartflows-elementor__after_title, {{WRAPPER}} .cartflows-elementor__after_title_sub_title' => 'margin-left: {{SIZE}}{{UNIT}};',
250	),
251	'condition' => array(
252	'icon[value]!' => '',
253	),
254	)
255	);
256
257	$this->add_responsive_control(
258	'icon_size',
259	array(
260	'label' => __( 'Icon Size', 'cartflows' ),
261	'type' => Controls_Manager::SLIDER,
262	'range' => array(
263	'px' => array(
264	'max' => 50,
265	),
266	),
267	'selectors' => array(
268	'{{WRAPPER}} .cartflows-elementor__next-step-button-wrap .cartflows-elementor__next-step-button-icon-wrap i ' => 'font-size: {{SIZE}}{{UNIT}};',
269	'{{WRAPPER}} .cartflows-elementor__next-step-button-wrap .cartflows-elementor__next-step-button-icon-wrap svg ' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
270	),
271	'condition' => array(
272	'icon[value]!' => '',
273	),
274	)
275	);
276
277	$this->end_controls_section();
278	}
279
280	/**
281	* Register Next Step Button Styling Controls.
282	*
283	* @since 1.11.8
284	* @access protected
285	*/
286	protected function register_button_style_controls() {
287
288	$flow_id = wcf()->utils->get_flow_id();
289	$gcp_primary_theme_color = ! empty( $flow_id ) ? get_post_meta( $flow_id, 'wcf-gcp-primary-color', true ) : '';
290
291	$this->start_controls_section(
292	'next_step_button_styling',
293	array(
294	'label' => __( 'General', 'cartflows' ),
295	'tab' => Controls_Manager::TAB_STYLE,
296	)
297	);
298
299	$this->add_responsive_control(
300	'align',
301	array(
302	'label' => __( 'Alignment', 'cartflows' ),
303	'type' => Controls_Manager::CHOOSE,
304	'options' => array(
305	'left' => array(
306	'title' => __( 'Left', 'cartflows' ),
307	'icon' => 'fa fa-align-left',
308	),
309	'center' => array(
310	'title' => __( 'Center', 'cartflows' ),
311	'icon' => 'fa fa-align-center',
312	),
313	'right' => array(
314	'title' => __( 'Right', 'cartflows' ),
315	'icon' => 'fa fa-align-right',
316	),
317	'justify' => array(
318	'title' => __( 'Justify', 'cartflows' ),
319	'icon' => 'fa fa-align-justify',
320	),
321	),
322	'default' => 'left',
323	'prefix_class' => 'elementor%s-align-',
324	)
325	);
326
327	$this->add_control(
328	'button_size',
329	array(
330	'label' => __( 'Button Size', 'cartflows' ),
331	'type' => Controls_Manager::SELECT,
332	'default' => 'md',
333	'options' => self::get_button_sizes(),
334	)
335	);
336
337	$this->add_responsive_control(
338	'padding',
339	array(
340	'label' => __( 'Padding', 'cartflows' ),
341	'type' => Controls_Manager::DIMENSIONS,
342	'size_units' => array( 'px', 'em', '%' ),
343	'selectors' => array(
344	'{{WRAPPER}} .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
345	),
346	)
347	);
348
349	$this->start_controls_tabs( '_next_step_button_style' );
350
351	$this->start_controls_tab(
352	'_next_step_button_normal',
353	array(
354	'label' => __( 'Normal', 'cartflows' ),
355	)
356	);
357
358	$this->add_control(
359	'text_color',
360	array(
361	'label' => __( 'Text Color', 'cartflows' ),
362	'type' => Controls_Manager::COLOR,
363	'default' => '',
364	'selectors' => array(
365	'{{WRAPPER}} a.cartflows-elementor__next-step-button-link' => 'color: {{VALUE}};',
366	),
367	)
368	);
369
370	$this->add_group_control(
371	Group_Control_Background::get_type(),
372	array(
373	'name' => 'all_background_color',
374	'label' => __( 'Background Color', 'cartflows' ),
375	'types' => array( 'classic', 'gradient' ),
376	'selector' => '{{WRAPPER}} a.elementor-button',
377	'fields_options' => array(
378	'background' => array(
379	'default' => 'classic',
380	),
381	'color' => array(
382	'default' => $gcp_primary_theme_color,
383	'global' => array(
384	'default' => Global_Colors::COLOR_ACCENT,
385	),
386	),
387	),
388	)
389	);
390
391	$this->add_group_control(
392	Group_Control_Border::get_type(),
393	array(
394	'name' => 'all_border',
395	'label' => __( 'Border', 'cartflows' ),
396	'selector' => '{{WRAPPER}} .elementor-button',
397	)
398	);
399
400	$this->add_control(
401	'all_border_radius',
402	array(
403	'label' => __( 'Rounded Corners', 'cartflows' ),
404	'type' => Controls_Manager::DIMENSIONS,
405	'size_units' => array( 'px', '%' ),
406	'selectors' => array(
407	'{{WRAPPER}} .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
408	),
409	)
410	);
411
412	$this->end_controls_tab();
413
414	$this->start_controls_tab(
415	'_next_step_button_hover',
416	array(
417	'label' => __( 'Hover', 'cartflows' ),
418	)
419	);
420
421	$this->add_control(
422	'hover_text_color',
423	array(
424	'label' => __( 'Hover Text Color', 'cartflows' ),
425	'type' => Controls_Manager::COLOR,
426	'default' => '',
427	'selectors' => array(
428	'{{WRAPPER}} a.cartflows-elementor__next-step-button-link:hover' => 'color: {{VALUE}};',
429	),
430	)
431	);
432
433	$this->add_group_control(
434	Group_Control_Background::get_type(),
435	array(
436	'name' => 'hover_background_color',
437	'label' => __( 'Hover Background Color', 'cartflows' ),
438	'types' => array( 'classic', 'gradient' ),
439	'selector' => '{{WRAPPER}} a.elementor-button:hover',
440	'fields_options' => array(
441	'background' => array(
442	'default' => 'classic',
443	),
444	'color' => array(
445	'global' => array(
446	'default' => Global_Colors::COLOR_ACCENT,
447	),
448	),
449	),
450	)
451	);
452
453	$this->add_control(
454	'border_hover_color',
455	array(
456	'label' => __( 'Border Hover Color', 'cartflows' ),
457	'type' => Controls_Manager::COLOR,
458	'selectors' => array(
459	'{{WRAPPER}} a.elementor-button:hover' => 'border-color: {{VALUE}};',
460	),
461	)
462	);
463
464	$this->add_control(
465	'hover_animation',
466	array(
467	'label' => __( 'Hover Animation', 'cartflows' ),
468	'type' => Controls_Manager::HOVER_ANIMATION,
469	)
470	);
471
472	$this->end_controls_tab();
473
474	$this->end_controls_tabs();
475
476	$this->end_controls_section();
477
478	}
479
480	/**
481	* Register Button Content Styling Controls.
482	*
483	* @since 1.11.8
484	* @access protected
485	*/
486	protected function register_button_content_style_controls() {
487
488	$this->start_controls_section(
489	'button_content_styling',
490	array(
491	'label' => __( 'Content', 'cartflows' ),
492	'tab' => Controls_Manager::TAB_STYLE,
493	)
494	);
495
496	$this->add_control(
497	'text_align',
498	array(
499	'label' => __( 'Text Alignment', 'cartflows' ),
500	'type' => Controls_Manager::CHOOSE,
501	'options' => array(
502	'left' => array(
503	'title' => __( 'Left', 'cartflows' ),
504	'icon' => 'fa fa-align-left',
505	),
506	'center' => array(
507	'title' => __( 'Center', 'cartflows' ),
508	'icon' => 'fa fa-align-center',
509	),
510	'right' => array(
511	'title' => __( 'Right', 'cartflows' ),
512	'icon' => 'fa fa-align-right',
513	),
514	),
515	'default' => 'center',
516	'toggle' => false,
517	'selectors' => array(
518	'{{WRAPPER}} a.elementor-button' => 'text-align: {{VALUE}};',
519	),
520	'condition' => array(
521	'align' => 'justify',
522	),
523	)
524	);
525
526	$this->add_group_control(
527	Group_Control_Typography::get_type(),
528	array(
529	'name' => 'title_typography',
530	'label' => 'Title Typography',
531	'global' => array(
532	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
533	),
534	'selector' => '{{WRAPPER}} .cartflows-elementor__next-step-button-title',
535	)
536	);
537
538	$this->add_group_control(
539	Group_Control_Typography::get_type(),
540	array(
541	'name' => 'sub_title_typography',
542	'label' => 'Sub Title Typography',
543	'global' => array(
544	'default' => Global_Typography::TYPOGRAPHY_TEXT,
545	),
546	'selector' => '{{WRAPPER}} .cartflows-elementor__next-step-button-sub-title',
547	'condition' => array(
548	'sub_title!' => '',
549	),
550	)
551	);
552
553	$this->add_control(
554	'title_sub_title_spacing',
555	array(
556	'label' => __( 'Title and Sub Title Spacing', 'cartflows' ),
557	'type' => Controls_Manager::SLIDER,
558	'range' => array(
559	'px' => array(
560	'max' => 50,
561	),
562	),
563	'default' => array(
564	'unit' => 'px',
565	'size' => 10,
566	),
567	'selectors' => array(
568	'{{WRAPPER}} .cartflows-elementor__next-step-button-sub-title' => 'margin-top: {{SIZE}}{{UNIT}};',
569	),
570	'condition' => array(
571	'sub_title!' => '',
572	),
573	)
574	);
575
576	}
577
578
579	/**
580	* Render Next Step Button icon.
581	*
582	* @since 1.11.8
583	* @param string $position Icon positin.
584	* @param array $settings settings.
585	* @access protected
586	*/
587	protected function render_button_icon( $position, $settings ) {
588
589	$icon = esc_attr( $settings['icon']['value'] );
590	$icon_position_class = esc_attr( 'cartflows-elementor__' . $settings['icon_position'] );
591
592	if ( '' !== $icon && $position === $settings['icon_position'] ) {
593	?>
594	<span class="cartflows-elementor__next-step-button-icon-wrap <?php echo esc_attr( $icon_position_class ); ?>">
595	<?php Icons_Manager::render_icon( $settings['icon'], array( 'aria-hidden' => 'true' ) ); ?>
596	</span>
597	<?php
598	}
599
600	}
601
602	/**
603	* Render Next Step Button output on the frontend.
604	*
605	* Written in PHP and used to generate the final HTML.
606	*
607	* @since 1.11.8
608	* @access protected
609	*/
610	protected function render() {
611
612	$settings = $this->get_settings_for_display();
613	$button_size = esc_attr( $settings['button_size'] );
614	$title = esc_html( $settings['title'] );
615	$sub_title = esc_html( $settings['sub_title'] );
616	?>
617
618	<div class="cartflows-elementor__next-step-button">
619	<div class="cartflows-elementor__next-step-button-wrap">
620	<a href="?class=wcf-next-step" class="cartflows-elementor__next-step-button-link elementor-button elementor-button-link elementor-size-<?php echo esc_attr( $button_size ); ?> elementor-animation-<?php echo esc_attr( $settings['hover_animation'] ); ?>">
621
622	<div class="cartflows-elementor__next-step-inner-wrap">
623
624	<?php $this->render_button_icon( 'before_title_sub_title', $settings ); ?>
625	<span class="cartflows-elementor__next-step-button-content-wrap">
626	<div class="cartflows-elementor__next-step-button-title-wrap">
627	<?php $this->render_button_icon( 'before_title', $settings ); ?>
628	<span class="cartflows-elementor__next-step-button-title"><?php echo esc_html( $title ); ?></span>
629	<?php $this->render_button_icon( 'after_title', $settings ); ?>
630	</div>
631	<?php if ( '' !== $settings['sub_title'] ) { ?>
632	<div class="cartflows-elementor__next-step-button-sub-title"><?php echo esc_html( $sub_title ); ?></div>
633	<?php } ?>
634	</span>
635	<?php $this->render_button_icon( 'after_title_sub_title', $settings ); ?>
636
637	</div>
638
639	</a>
640	</div>
641	</div>
642
643	<?php
644	}
645
646	/**
647	* Render Next Step Button output in the editor.
648	*
649	* Written as a Backbone JavaScript template and used to generate the live preview.
650	*
651	* @since 1.11.8
652	* @access protected
653	*/
654	protected function render_next_step_button() {
655	?>
656	<#
657	function render_icon(position) {
658
659	var iconHTML = elementor.helpers.renderIcon( view, settings.icon, {}, 'i' , 'object' );
660
661	var icon_position_class = 'cartflows-elementor__'+settings.icon_position;
662
663	if( '' !== settings.icon.value && position === settings.icon_position ){ #>
664	<span class="cartflows-elementor__next-step-button-icon-wrap {{icon_position_class}}">
665	{{ iconHTML.value }}
666	</span>
667	<#}
668	}
669	#>
670	<div class="cartflows-elementor__next-step-button">
671	<div class="cartflows-elementor__next-step-button-wrap">
672	<a href="?class=wcf-next-step" class="cartflows-elementor__next-step-button-link elementor-button elementor-button-link elementor-size-{{ settings.button_size }} elementor-animation-{{ settings.hover_animation }}" >
673	<div class="cartflows-elementor__next-step-inner-wrap">
674	<# render_icon('before_title_sub_title') #>
675	<span class="cartflows-elementor__next-step-button-content-wrap">
676	<div class="cartflows-elementor__next-step-button-title-wrap">
677	<# render_icon('before_title') #>
678	<span class="cartflows-elementor__next-step-button-title">
679	{{settings.title}}
680	</span>
681	<# render_icon('after_title') #>
682	</div>
683	<# if( '' !== settings.sub_title ){ #>
684	<div class="cartflows-elementor__next-step-button-sub-title">{{settings.sub_title}}</div>
685	<# } #>
686	</span>
687	<# render_icon('after_title_sub_title') #>
688	</div>
689	</a>
690	</div>
691	</div>
692	<?php
693	}
694
695	/**
696	* Render Next Step Button output in the editor.
697	*
698	* Written as a Backbone JavaScript template and used to generate the live preview.
699	*
700	* Remove this after Elementor v3.3.0
701	*
702	* @since 1.11.8
703	* @access protected
704	*/
705	protected function content_template() {
706	$this->render_next_step_button();
707	}
708
709	}
710