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

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

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

AddToCartButton.php

639 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	* Add to cart / buy now button widget.
11	*/
12	class AddToCartButton extends \Elementor\Widget_Base {
13	/**
14	* Get widget name.
15	*
16	* @return string
17	*/
18	public function get_name() {
19	return 'surecart-add-to-cart-button';
20	}
21
22	/**
23	* Get widget title.
24	*
25	* @return string
26	*/
27	public function get_title() {
28	return esc_html__( 'Add To Cart', 'surecart' );
29	}
30
31	/**
32	* Get widget icon.
33	*
34	* @return string
35	*/
36	public function get_icon() {
37	return 'eicon-cart';
38	}
39
40	/**
41	* Get the widget keywords.
42	*
43	* @return array
44	*/
45	public function get_keywords() {
46	return array( 'surecart', 'cart', 'button', 'buy', 'submit' );
47	}
48
49	/**
50	* Get the widget categories.
51	*
52	* @return array
53	*/
54	public function get_categories() {
55	return array( 'surecart-elementor-elements' );
56	}
57
58	/**
59	* Get the default button label.
60	*
61	* @return string
62	*/
63	protected function get_default_label(): string {
64	return esc_html__( 'Add To Cart', 'surecart' );
65	}
66
67	/**
68	* Get the style dependencies.
69	*
70	* @return array
71	*/
72	public function get_style_depends() {
73	return array( 'surecart-spinner', 'surecart-wp-button' );
74	}
75
76	/**
77	* Register the widget content settings.
78	*
79	* @return void
80	*/
81	protected function register_content_settings() {
82	$this->start_controls_section(
83	'section_content',
84	[
85	'label' => esc_html__( 'Content Settings', 'surecart' ),
86	]
87	);
88
89	$this->add_control(
90	'buy_button_type',
91	[
92	'label' => esc_html__( 'Go Directly To Checkout', 'surecart' ),
93	'type' => \Elementor\Controls_Manager::SWITCHER,
94	'label_on' => esc_html__( 'Yes', 'surecart' ),
95	'label_off' => esc_html__( 'No', 'surecart' ),
96	'default' => 'no',
97	'description' => esc_html__( 'Bypass adding to cart and go directly to the checkout.', 'surecart' ),
98	]
99	);
100
101	$this->add_control(
102	'show_sticky_purchase_button',
103	[
104	'label' => esc_html__( 'Show sticky button', 'surecart' ),
105	'type' => \Elementor\Controls_Manager::SELECT,
106	'default' => 'never',
107	'description' => esc_html__( 'Show a sticky purchase button when this button is out of view', 'surecart' ),
108	'options' => [
109	'never' => esc_html__( 'Never', 'surecart' ),
110	'in_stock' => esc_html__( 'In stock', 'surecart' ),
111	'always' => esc_html__( 'Always', 'surecart' ),
112	],
113	]
114	);
115
116	$this->end_controls_section();
117
118	$this->start_controls_section(
119	'section_text_settings',
120	[
121	'label' => esc_html__( 'Text Settings', 'surecart' ),
122	]
123	);
124
125	$this->add_control(
126	'button_text',
127	[
128	'label' => esc_html__( 'Button Text', 'surecart' ),
129	'type' => \Elementor\Controls_Manager::TEXT,
130	'default' => $this->get_default_label(),
131	]
132	);
133
134	$this->add_control(
135	'button_out_of_stock_text',
136	[
137	'label' => esc_html__( 'Out of stock label', 'surecart' ),
138	'type' => \Elementor\Controls_Manager::TEXT,
139	'default' => esc_html__( 'Sold Out', 'surecart' ),
140	]
141	);
142
143	$this->add_control(
144	'button_unavailable_text',
145	[
146	'label' => esc_html__( 'Unavailable label', 'surecart' ),
147	'type' => \Elementor\Controls_Manager::TEXT,
148	'default' => esc_html__( 'Unavailable', 'surecart' ),
149	]
150	);
151
152	$this->end_controls_section();
153
154	$this->start_controls_section(
155	'section_icon_settings',
156	[
157	'label' => esc_html__( 'Icon', 'surecart' ),
158	]
159	);
160
161	$this->add_control(
162	'selected_icon',
163	[
164	'label' => esc_html__( 'Icon', 'surecart' ),
165	'type' => \Elementor\Controls_Manager::ICONS,
166	'fa4compatibility' => 'icon',
167	'skin' => 'inline',
168	'label_block' => false,
169	'recommended' => [
170	'fa-solid' => [
171	'shopping-bag',
172	'cart-arrow-down',
173	'cart-plus',
174	'shopping-cart',
175	'shopping-basket',
176	],
177	],
178	]
179	);
180
181	$this->add_control(
182	'icon_align',
183	[
184	'label' => esc_html__( 'Icon Position', 'surecart' ),
185	'type' => \Elementor\Controls_Manager::CHOOSE,
186	'default' => is_rtl() ? 'row-reverse' : 'row',
187	'options' => [
188	'row' => [
189	'title' => esc_html__( 'Start', 'surecart' ),
190	'icon' => 'eicon-h-align-left',
191	],
192	'row-reverse' => [
193	'title' => esc_html__( 'End', 'surecart' ),
194	'icon' => 'eicon-h-align-right',
195	],
196	],
197	'selectors_dictionary' => [
198	'left' => is_rtl() ? 'row-reverse' : 'row',
199	'right' => is_rtl() ? 'row' : 'row-reverse',
200	],
201	'selectors' => [
202	'{{WRAPPER}} .elementor-button-content-wrapper' => 'flex-direction: {{VALUE}};',
203	'{{WRAPPER}} .sc-button__link' => 'flex-direction: {{VALUE}};',
204	],
205	'condition' => [
206	'selected_icon[value]!' => '',
207	],
208	]
209	);
210
211	$this->add_control(
212	'icon_indent',
213	[
214	'label' => esc_html__( 'Icon Spacing', 'surecart' ),
215	'type' => \Elementor\Controls_Manager::SLIDER,
216	'size_units' => [ 'px', 'em', 'rem' ],
217	'range' => [
218	'px' => [
219	'max' => 50,
220	],
221	'em' => [
222	'max' => 5,
223	],
224	'rem' => [
225	'max' => 5,
226	],
227	],
228	'default' => [
229	'size' => 10,
230	'unit' => 'px',
231	],
232	'selectors' => [
233	'{{WRAPPER}} .elementor-button-content-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
234	],
235	'condition' => [
236	'selected_icon[value]!' => '',
237	],
238	]
239	);
240
241	$this->end_controls_section();
242	}
243
244	/**
245	* Register the widget style settings.
246	*
247	* @return void
248	*/
249	protected function register_style_settings() {
250	$button_selector = '{{WRAPPER}} .wp-block-button__link';
251	$button_icon_selector = '{{WRAPPER}} .elementor-button-icon svg';
252
253	$this->start_controls_section(
254	'section_style',
255	[
256	'label' => esc_html__( 'Button', 'surecart' ),
257	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
258	]
259	);
260
261	$this->add_group_control(
262	\Elementor\Group_Control_Typography::get_type(),
263	[
264	'name' => 'button_typography',
265	'global' => [
266	'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_PRIMARY,
267	],
268	'fields_options' => [
269	'typography' => [ 'default' => 'yes' ],
270	'line_height' => [
271	'default' => [
272	'unit' => 'px',
273	'size' => 16,
274	],
275	],
276	],
277	'selector' => $button_selector,
278	]
279	);
280
281	$this->start_controls_tabs( 'button_colors' );
282
283	$this->start_controls_tab(
284	'button_colors_normal',
285	[
286	'label' => esc_html__( 'Normal', 'surecart' ),
287	]
288	);
289
290	$this->add_control(
291	'button_text_color',
292	[
293	'label' => esc_html__( 'Text Color', 'surecart' ),
294	'type' => \Elementor\Controls_Manager::COLOR,
295	'selectors' => [
296	$button_selector => 'color: {{VALUE}}',
297	$button_icon_selector => 'fill: {{VALUE}}',
298	],
299	'default' => '#ffffff',
300	]
301	);
302
303	$this->add_control(
304	'button_background_color',
305	[
306	'label' => esc_html__( 'Background Color', 'surecart' ),
307	'type' => \Elementor\Controls_Manager::COLOR,
308	'selectors' => [
309	$button_selector => 'background-color: {{VALUE}}',
310	],
311	]
312	);
313
314	$this->end_controls_tab();
315
316	$this->start_controls_tab(
317	'button_colors_hover',
318	[
319	'label' => esc_html__( 'Hover', 'surecart' ),
320	]
321	);
322
323	$this->add_control(
324	'button_hover_text_color',
325	[
326	'label' => esc_html__( 'Text Color', 'surecart' ),
327	'type' => \Elementor\Controls_Manager::COLOR,
328	'selectors' => [
329	$button_selector . ':hover' => 'color: {{VALUE}}!important;',
330	$button_selector . ':hover .elementor-button-icon svg' => 'fill: {{VALUE}}!important; color: {{VALUE}}!important;',
331	],
332	]
333	);
334
335	$this->add_control(
336	'button_hover_background_color',
337	[
338	'label' => esc_html__( 'Background Color', 'surecart' ),
339	'type' => \Elementor\Controls_Manager::COLOR,
340	'selectors' => [
341	$button_selector . ':hover' => 'background-color: {{VALUE}}',
342	],
343	]
344	);
345
346	$this->add_control(
347	'hover_animation',
348	[
349	'label' => esc_html__( 'Hover Animation', 'surecart' ),
350	'type' => \Elementor\Controls_Manager::HOVER_ANIMATION,
351	]
352	);
353
354	$this->end_controls_tab();
355
356	$this->end_controls_tabs();
357
358	$this->add_responsive_control(
359	'button_width',
360	array(
361	'label' => esc_html__( 'Width', 'surecart' ),
362	'type' => \Elementor\Controls_Manager::SLIDER,
363	'size_units' => [ 'px', 'em', '%' ],
364	'selectors' => array(
365	$button_selector => 'width: {{SIZE}}{{UNIT}};',
366	),
367	'default' => [
368	'size' => 100,
369	'unit' => '%',
370	],
371	'range' => [
372	'px' => array(
373	'min' => 0,
374	'max' => 1000,
375	),
376	'em' => array(
377	'min' => 0,
378	'step' => 0.1,
379	'max' => 10,
380	),
381	],
382	)
383	);
384
385	$this->add_responsive_control(
386	'button_padding',
387	[
388	'label' => esc_html__( 'Padding', 'surecart' ),
389	'type' => \Elementor\Controls_Manager::DIMENSIONS,
390	'size_units' => [ 'px', 'em', '%' ],
391	'selectors' => [
392	$button_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
393	],
394	]
395	);
396
397	$args = [
398	'section_condition' => [],
399	'alignment_default' => '',
400	'alignment_control_prefix_class' => 'elementor%s-align-',
401	'content_alignment_default' => '',
402	];
403
404	$this->add_responsive_control(
405	'align',
406	[
407	'label' => esc_html__( 'Position', 'surecart' ),
408	'type' => \Elementor\Controls_Manager::CHOOSE,
409	'options' => [
410	'left' => [
411	'title' => esc_html__( 'Left', 'surecart' ),
412	'icon' => 'eicon-h-align-left',
413	],
414	'center' => [
415	'title' => esc_html__( 'Center', 'surecart' ),
416	'icon' => 'eicon-h-align-center',
417	],
418	'right' => [
419	'title' => esc_html__( 'Right', 'surecart' ),
420	'icon' => 'eicon-h-align-right',
421	],
422	'justify' => [
423	'title' => esc_html__( 'Stretch', 'surecart' ),
424	'icon' => 'eicon-h-align-stretch',
425	],
426	],
427	'prefix_class' => $args['alignment_control_prefix_class'],
428	'default' => $args['alignment_default'],
429	'condition' => $args['section_condition'],
430	]
431	);
432
433	$start = is_rtl() ? 'right' : 'left';
434	$end = is_rtl() ? 'left' : 'right';
435
436	$this->add_responsive_control(
437	'content_align',
438	[
439	'label' => esc_html__( 'Alignment', 'surecart' ),
440	'type' => \Elementor\Controls_Manager::CHOOSE,
441	'options' => [
442	'start' => [
443	'title' => esc_html__( 'Start', 'surecart' ),
444	'icon' => "eicon-text-align-{$start}",
445	],
446	'center' => [
447	'title' => esc_html__( 'Center', 'surecart' ),
448	'icon' => 'eicon-text-align-center',
449	],
450	'end' => [
451	'title' => esc_html__( 'End', 'surecart' ),
452	'icon' => "eicon-text-align-{$end}",
453	],
454	'space-between' => [
455	'title' => esc_html__( 'Space between', 'surecart' ),
456	'icon' => 'eicon-text-align-justify',
457	],
458	],
459	'default' => $args['content_alignment_default'],
460	'selectors' => [
461	'{{WRAPPER}} .elementor-button .elementor-button-content-wrapper' => 'justify-content: {{VALUE}};',
462	],
463	'condition' => array_merge( $args['section_condition'], [ 'align' => 'justify' ] ),
464	]
465	);
466
467	$this->add_group_control(
468	\Elementor\Group_Control_Border::get_type(),
469	[
470	'name' => 'button_border',
471	'selector' => $button_selector,
472	],
473	);
474
475	$this->add_control(
476	'button_border_radius',
477	array(
478	'label' => esc_html__( 'Border Radius', 'surecart' ),
479	'type' => \Elementor\Controls_Manager::DIMENSIONS,
480	'size_units' => [ 'px', 'em', '%' ],
481	'selectors' => array(
482	$button_selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
483	),
484	)
485	);
486
487	$this->end_controls_section();
488	}
489
490	/**
491	* Register the widget controls.
492	*
493	* @return void
494	*/
495	protected function register_controls() {
496	$this->register_content_settings();
497	$this->register_style_settings();
498	}
499
500	/**
501	* Render the widget output on the frontend.
502	*
503	* @return void
504	*/
505	protected function render() {
506	$settings = $this->get_settings_for_display();
507	$is_add_to_cart = ! isset( $settings['buy_button_type'] ) \|\| 'yes' !== $settings['buy_button_type'];
508
509	$this->add_render_attribute( 'wrapper', 'class', 'wp-block-button__link wp-block-surecart-product-elementor-cart-button wp-element-button sc-button__link elementor-button elementor-button-link elementor-size-sm' );
510	$this->add_render_attribute( 'button', 'class', 'elementor-button' );
511
512	if ( ! empty( $settings['selected_icon']['value'] ) ) {
513	$this->add_render_attribute( 'icon', 'class', 'elementor-button-icon' );
514	}
515
516	if ( ! empty( $settings['hover_animation'] ) ) {
517	$this->add_render_attribute( 'wrapper', 'class', 'elementor-animation-' . $settings['hover_animation'] );
518	}
519
520	$this->add_render_attribute(
521	[
522	'content-wrapper' => [
523	'class' => 'elementor-button-content-wrapper',
524	],
525	'text' => [
526	'class' => 'elementor-button-text',
527	],
528	]
529	);
530
531	// Interactivity context.
532	$this->add_render_attribute(
533	'content-wrapper',
534	'data-wp-context',
535	wp_json_encode(
536	array(
537	'checkoutUrl' => esc_url( \SureCart::pages()->url( 'checkout' ) ),
538	'buttonText' => $settings['button_text'] ?? ( $is_add_to_cart ? __( 'Add to Cart', 'surecart' ) : __( 'Buy Now', 'surecart' ) ),
539	'outOfStockText' => $settings['button_out_of_stock_text'] ?? esc_attr( __( 'Sold Out', 'surecart' ) ),
540	'unavailableText' => $settings['button_unavailable_text'] ?? esc_attr( __( 'Unavailable For Purchase', 'surecart' ) ),
541	'addToCart' => $is_add_to_cart,
542	),
543	JSON_HEX_TAG \| JSON_HEX_APOS \| JSON_HEX_QUOT \| JSON_HEX_AMP
544	)
545	);
546
547	$this->add_render_attribute( 'wrapper', 'data-wp-bind--disabled', 'state.isUnavailable' );
548	$this->add_render_attribute( 'wrapper', 'data-wp-class--sc-button__link--busy', 'context.busy' );
549	if ( ! $is_add_to_cart ) {
550	$this->add_render_attribute( 'wrapper', 'data-wp-on--click', 'callbacks.redirectToCheckout' );
551	}
552
553	ob_start();
554	?>
555	<button
556	<?php if ( ! empty( $settings['show_sticky_purchase_button'] ) && 'never' !== $settings['show_sticky_purchase_button'] ) : ?>
557	<?php $this->add_render_attribute( 'wrapper', 'data-wp-on-window--scroll', 'surecart/sticky-purchase::actions.toggleVisibility' ); ?>
558	<?php $this->add_render_attribute( 'wrapper', 'data-wp-on-window--resize', 'surecart/sticky-purchase::actions.toggleVisibility' ); ?>
559	<?php endif; ?>
560
561	<?php echo $this->get_render_attribute_string( 'wrapper' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
562	<span <?php echo $this->get_render_attribute_string( 'content-wrapper' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
563	<?php
564	if ( ! empty( $settings['icon'] ) \|\| ! empty( $settings['selected_icon']['value'] ) ) :
565	$this->add_render_attribute( 'icon', 'class', 'elementor-button-icon' );
566	?>
567	<span <?php echo $this->get_render_attribute_string( 'icon' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
568	<?php \Elementor\Icons_Manager::render_icon( $settings['selected_icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
569	</span>
570	<?php endif; ?>
571
572	<?php if ( isset( $settings['button_text'] ) ) : ?>
573	<?php if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) : ?>
574	<?php echo trim( $settings['button_text'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
575	<?php else : ?>
576	<span class="sc-spinner" aria-hidden="false"></span>
577	<span class="sc-button__link-text" data-wp-text="state.buttonText"></span>
578	<?php endif; ?>
579	<?php endif; ?>
580	</span>
581	</button>
582
583	<?php
584	$output = ob_get_clean();
585	echo $output; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
586
587	// Render the sticky purchase button.
588	if ( ! is_admin() ) { // Elementor injects into the content area so we only render it in the frontend.
589	\SureCart::render( 'blocks/sticky-purchase', [ 'settings' => $settings ] );
590	}
591	}
592
593	/**
594	* Render the widget output on the editor.
595	*
596	* @return void
597	*/
598	protected function content_template() {
599	?>
600	<#
601	if ( '' === settings.button_text && '' === settings.selected_icon.value ) {
602	return;
603	}
604
605	view.addRenderAttribute( 'wrapper', 'class', 'wp-block-button__link wp-element-button sc-button__link elementor-button elementor-button-link elementor-size-sm' );
606	view.addRenderAttribute( 'button', 'class', 'elementor-button' );
607
608	if ( '' !== settings.hover_animation ) {
609	view.addRenderAttribute( 'wrapper', 'class', 'elementor-animation-' + settings.hover_animation );
610	}
611
612	if ( settings.icon \|\| settings.selected_icon ) {
613	view.addRenderAttribute( 'icon', 'class', 'elementor-button-icon' );
614	}
615
616	view.addRenderAttribute( 'text', 'class', 'elementor-button-text' );
617	view.addRenderAttribute( 'content-wrapper', 'class', 'elementor-button-content-wrapper' );
618	var iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' );
619	#>
620	<button {{{ view.getRenderAttributeString( 'wrapper' ) }}}>
621	<span {{{ view.getRenderAttributeString( 'content-wrapper' ) }}}>
622	<# if ( settings.icon \|\| settings.selected_icon ) { #>
623	<span {{{ view.getRenderAttributeString( 'icon' ) }}}>
624	<# if ( ( ! settings.icon ) && iconHTML.rendered ) { #>
625	{{{ iconHTML.value }}}
626	<# } else { #>
627	<i class="{{ settings.icon }}" aria-hidden="true"></i>
628	<# } #>
629	</span>
630	<# } #>
631	<# if ( settings.button_text ) { #>
632	<span {{{ view.getRenderAttributeString( 'text' ) }}}>{{{ settings.button_text }}}</span>
633	<# } #>
634	</span>
635	</button>
636	<?php
637	}
638	}
639