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

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

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

PriceChooser.php

664 lines

1	<?php
2
3	namespace SureCart\Integrations\Elementor\Widgets;
4
5	use SureCart\Support\Currency;
6
7	if ( ! defined( 'ABSPATH' ) ) {
8	exit; // Exit if accessed directly.
9	}
10
11	/**
12	* Price Chooser widget.
13	*/
14	class PriceChooser extends \Elementor\Widget_Base {
15	/**
16	* Get widget name.
17	*
18	* @return string
19	*/
20	public function get_name() {
21	return 'surecart-price-chooser';
22	}
23
24	/**
25	* Get widget title.
26	*
27	* @return string
28	*/
29	public function get_title() {
30	return esc_html__( 'Price Selector', 'surecart' );
31	}
32
33	/**
34	* Get widget icon.
35	*
36	* @return string
37	*/
38	public function get_icon() {
39	return 'eicon-price-table';
40	}
41
42	/**
43	* Get the widget keywords.
44	*
45	* @return array
46	*/
47	public function get_keywords() {
48	return array( 'surecart', 'price', 'chooser', 'choices' );
49	}
50
51	/**
52	* Get the widget categories.
53	*
54	* @return array
55	*/
56	public function get_categories() {
57	return array( 'surecart-elementor-elements' );
58	}
59
60	/**
61	* Get the style dependencies.
62	*
63	* @return array
64	*/
65	public function get_style_depends() {
66	return array( 'surecart-choice', 'surecart-elementor-container-style', 'surecart-elementor-style' );
67	}
68
69	/**
70	* Add content controls.
71	*
72	* @return void
73	*/
74	protected function add_content_controls() {
75	$this->start_controls_section(
76	'section_content',
77	array(
78	'label' => esc_html__( 'Label', 'surecart' ),
79	)
80	);
81
82	$this->add_control(
83	'label',
84	array(
85	'label' => esc_html__( 'Label', 'surecart' ),
86	'type' => \Elementor\Controls_Manager::TEXT,
87	'description' => esc_html__( 'The label for price choices.', 'surecart' ),
88	'default' => esc_html__( 'Pricing', 'surecart' ),
89	)
90	);
91
92	$this->end_controls_section();
93	}
94
95	/**
96	* Add the price chooser style settings.
97	*
98	* @return void
99	*/
100	protected function add_price_chooser_style_settings() {
101	$selector = '{{WRAPPER}} .wp-block-surecart-product-price-chooser';
102	$selector_label = '{{WRAPPER}} .wp-block-surecart-product-price-chooser .sc-form-label';
103	$selector_choices = '{{WRAPPER}} .wp-block-surecart-product-price-chooser .sc-choices';
104
105	$this->start_controls_section(
106	'section_price_chooser_style',
107	array(
108	'label' => esc_html__( 'Container', 'surecart' ),
109	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
110	)
111	);
112
113	$this->add_control(
114	'label_color',
115	array(
116	'label' => esc_html__( 'Label Color', 'surecart' ),
117	'type' => \Elementor\Controls_Manager::COLOR,
118	'selectors' => array(
119	$selector => 'color: {{VALUE}}',
120	$selector_label => 'color: {{VALUE}}',
121	),
122	'default' => '#000000',
123	)
124	);
125
126	$this->add_control(
127	'container_type',
128	[
129	'label' => esc_html__( 'Container Layout', 'surecart' ),
130	'type' => \Elementor\Controls_Manager::SELECT,
131	'default' => 'grid',
132	'options' => [
133	'flex' => esc_html__( 'Flexbox', 'surecart' ),
134	'grid' => esc_html__( 'Grid', 'surecart' ),
135	],
136	'selectors' => [
137	$selector_choices => '--display: {{VALUE}}',
138	],
139	'separator' => 'after',
140	'editor_available' => true,
141	]
142	);
143
144	$this->add_group_control(
145	\Elementor\Group_Control_Flex_Container::get_type(),
146	[
147	'name' => 'price_chooser_flex',
148	'selector' => $selector_choices,
149	'fields_options' => [
150	'gap' => [
151	'label' => esc_html__( 'Gaps', 'surecart' ),
152	],
153	],
154	'condition' => [
155	'container_type' => [ 'flex' ],
156	],
157	]
158	);
159
160	$this->add_group_control(
161	\Elementor\Group_Control_Grid_Container::get_type(),
162	[
163	'name' => 'price_chooser_grid',
164	'selector' => $selector_choices,
165	'condition' => [
166	'container_type' => [ 'grid' ],
167	],
168	'fields_options' => [
169	'columns_grid' => [
170	'default' => [
171	'unit' => 'fr',
172	'size' => 1,
173	'sizes' => [],
174	],
175	],
176	'gaps' => [
177	'default' => [
178	'column' => '15',
179	'row' => '15',
180	'isLinked' => true,
181	'unit' => 'px',
182	],
183	],
184	],
185	]
186	);
187
188	$this->add_group_control(
189	\Elementor\Group_Control_Typography::get_type(),
190	[
191	'name' => 'price_chooser_typography',
192	'selector' => $selector_label,
193	]
194	);
195
196	$this->end_controls_section();
197	}
198
199	/**
200	* Add the price choice style settings.
201	*
202	* @return void
203	*/
204	protected function add_price_choice_style_settings() {
205	$selector = '{{WRAPPER}} .sc-choices .sc-choice';
206	$selector_checked = '{{WRAPPER}} .sc-choices .sc-choice.sc-choice--checked';
207
208	$this->start_controls_section(
209	'section_price_choice_style',
210	array(
211	'label' => esc_html__( 'Price Choice', 'surecart' ),
212	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
213	)
214	);
215
216	$this->add_control(
217	'price_choice_color',
218	[
219	'label' => esc_html__( 'Text Color', 'surecart' ),
220	'type' => \Elementor\Controls_Manager::COLOR,
221	'global' => [
222	'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_PRIMARY,
223	],
224	'selectors' => [
225	$selector => 'color: {{VALUE}};',
226	],
227	]
228	);
229
230	$this->add_control(
231	'price_choice_background_color',
232	[
233	'label' => esc_html__( 'Background Color', 'surecart' ),
234	'type' => \Elementor\Controls_Manager::COLOR,
235	'selectors' => [
236	$selector => 'background-color: {{VALUE}};',
237	],
238	]
239	);
240
241	$this->add_control(
242	'price_choice_highlight_color',
243	[
244	'label' => esc_html__( 'Highlight Border', 'surecart' ),
245	'type' => \Elementor\Controls_Manager::COLOR,
246	'global' => [
247	'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_PRIMARY,
248	],
249	'selectors' => [
250	$selector_checked => 'border-color: {{VALUE}}!important; box-shadow: 0 0 0 1px {{VALUE}} !important;',
251	],
252	]
253	);
254
255	$this->add_control(
256	'price_choice_highlight_text_color',
257	[
258	'label' => esc_html__( 'Highlight Text Color', 'surecart' ),
259	'type' => \Elementor\Controls_Manager::COLOR,
260	'global' => [
261	'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_PRIMARY,
262	],
263	'selectors' => [
264	$selector_checked => 'color: {{VALUE}};',
265	],
266	]
267	);
268
269	$this->add_group_control(
270	\Elementor\Group_Control_Typography::get_type(),
271	[
272	'name' => 'price_choice_typography',
273	'global' => [
274	'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_PRIMARY,
275	],
276	'selector' => $selector,
277	]
278	);
279
280	$this->add_control(
281	'price_choice_padding',
282	[
283	'label' => esc_html__( 'Padding', 'surecart' ),
284	'type' => \Elementor\Controls_Manager::DIMENSIONS,
285	'size_units' => [ 'px', 'em', '%' ],
286	'selectors' => [
287	$selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
288	],
289	]
290	);
291
292	$this->add_control(
293	'price_choice_margin',
294	[
295	'label' => esc_html__( 'Margin', 'surecart' ),
296	'type' => \Elementor\Controls_Manager::DIMENSIONS,
297	'size_units' => [ 'px', 'em', '%' ],
298	'selectors' => [
299	$selector => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
300	],
301	]
302	);
303
304	$this->add_group_control(
305	\Elementor\Group_Control_Border::get_type(),
306	[
307	'name' => 'price_choice_border',
308	'selector' => $selector,
309	'separator' => 'before',
310	]
311	);
312
313	$this->add_responsive_control(
314	'price_choice_border_radius',
315	array(
316	'label' => esc_html__( 'Border Radius', 'surecart' ),
317	'type' => \Elementor\Controls_Manager::DIMENSIONS,
318	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
319	'selectors' => array(
320	$selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
321	),
322	)
323	);
324
325	$this->end_controls_section();
326	}
327
328	/**
329	* Add price name style settings.
330	*
331	* @return void
332	*/
333	protected function add_price_name_style_settings() {
334	$selector = '{{WRAPPER}} .sc-choices .sc-choice .wp-block-surecart-price-name';
335
336	$this->start_controls_section(
337	'section_price_name_style',
338	array(
339	'label' => esc_html__( 'Price Name', 'surecart' ),
340	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
341	)
342	);
343
344	$this->add_control(
345	'price_name_color',
346	array(
347	'label' => esc_html__( 'Text Color', 'surecart' ),
348	'type' => \Elementor\Controls_Manager::COLOR,
349	'selectors' => array(
350	$selector => 'color: {{VALUE}}',
351	),
352	)
353	);
354
355	$this->add_control(
356	'price_name_background_color',
357	array(
358	'label' => esc_html__( 'Background Color', 'surecart' ),
359	'type' => \Elementor\Controls_Manager::COLOR,
360	'selectors' => array(
361	$selector => 'background-color: {{VALUE}}',
362	),
363	)
364	);
365
366	$this->add_group_control(
367	\Elementor\Group_Control_Typography::get_type(),
368	array(
369	'name' => 'price_name_typography',
370	'selector' => $selector,
371	)
372	);
373
374	$this->end_controls_section();
375	}
376
377	/**
378	* Register the price amount style settings.
379	*
380	* @return void
381	*/
382	protected function add_price_amount_style_settings() {
383	$selector = '{{WRAPPER}} .sc-choices .sc-choice .wp-block-surecart-price-amount';
384
385	$this->start_controls_section(
386	'section_price_amount_style',
387	array(
388	'label' => esc_html__( 'Price Amount', 'surecart' ),
389	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
390	)
391	);
392
393	$this->add_control(
394	'price_amount_color',
395	array(
396	'label' => esc_html__( 'Text Color', 'surecart' ),
397	'type' => \Elementor\Controls_Manager::COLOR,
398	'selectors' => array(
399	$selector => 'color: {{VALUE}}',
400	),
401	)
402	);
403
404	$this->add_control(
405	'price_amount_background_color',
406	array(
407	'label' => esc_html__( 'Background Color', 'surecart' ),
408	'type' => \Elementor\Controls_Manager::COLOR,
409	'selectors' => array(
410	$selector => 'background-color: {{VALUE}}',
411	),
412	)
413	);
414
415	$this->add_group_control(
416	\Elementor\Group_Control_Typography::get_type(),
417	array(
418	'name' => 'price_amount_typography',
419	'selector' => $selector,
420	)
421	);
422
423	$this->end_controls_section();
424	}
425
426	/**
427	* Register the price trial style settings.
428	*
429	* @return void
430	*/
431	protected function add_price_trial_style_settings() {
432	$selector = '{{WRAPPER}} .sc-choices .sc-choice .wp-block-surecart-price-trial';
433
434	$this->start_controls_section(
435	'section_price_trial_style',
436	array(
437	'label' => esc_html__( 'Price Trial', 'surecart' ),
438	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
439	)
440	);
441
442	$this->add_control(
443	'price_trial_color',
444	array(
445	'label' => esc_html__( 'Text Color', 'surecart' ),
446	'type' => \Elementor\Controls_Manager::COLOR,
447	'selectors' => array(
448	$selector => 'color: {{VALUE}}',
449	),
450	'default' => '#8a8a8a',
451	)
452	);
453
454	$this->add_control(
455	'price_trial_background_color',
456	array(
457	'label' => esc_html__( 'Background Color', 'surecart' ),
458	'type' => \Elementor\Controls_Manager::COLOR,
459	'selectors' => array(
460	$selector => 'background-color: {{VALUE}}',
461	),
462	)
463	);
464
465	$this->add_group_control(
466	\Elementor\Group_Control_Typography::get_type(),
467	array(
468	'name' => 'price_trial_typography',
469	'selector' => $selector,
470	'fields_options' => [
471	'typography' => [ 'default' => 'yes' ],
472	'font_size' => [
473	'default' => [
474	'unit' => 'px',
475	'size' => 12,
476	],
477	],
478	],
479	)
480	);
481
482	$this->end_controls_section();
483	}
484
485	/**
486	* Register the price setup fee style settings.
487	*
488	* @return void
489	*/
490	protected function add_price_setup_fee_style_settings() {
491	$selector = '{{WRAPPER}} .sc-choices .sc-choice .wp-block-surecart-price-setup-fee';
492
493	$this->start_controls_section(
494	'section_price_setup_fee_style',
495	array(
496	'label' => esc_html__( 'Price Setup Fee', 'surecart' ),
497	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
498	)
499	);
500
501	$this->add_control(
502	'price_setup_fee_color',
503	array(
504	'label' => esc_html__( 'Text Color', 'surecart' ),
505	'type' => \Elementor\Controls_Manager::COLOR,
506	'selectors' => array(
507	$selector => 'color: {{VALUE}}',
508	),
509	'default' => '#8a8a8a',
510	)
511	);
512
513	$this->add_control(
514	'price_setup_fee_background_color',
515	array(
516	'label' => esc_html__( 'Background Color', 'surecart' ),
517	'type' => \Elementor\Controls_Manager::COLOR,
518	'selectors' => array(
519	$selector => 'background-color: {{VALUE}}',
520	),
521	)
522	);
523
524	$this->add_group_control(
525	\Elementor\Group_Control_Typography::get_type(),
526	array(
527	'name' => 'price_setup_fee_typography',
528	'selector' => $selector,
529	'fields_options' => [
530	'typography' => [ 'default' => 'yes' ],
531	'font_size' => [
532	'default' => [
533	'unit' => 'px',
534	'size' => 12,
535	],
536	],
537	],
538	)
539	);
540
541	$this->end_controls_section();
542	}
543
544	/**
545	* Register the widget style settings
546	*
547	* @return void
548	*/
549	protected function register_style_settings() {
550	$this->add_price_chooser_style_settings();
551	$this->add_price_choice_style_settings();
552	$this->add_price_name_style_settings();
553	$this->add_price_amount_style_settings();
554	$this->add_price_trial_style_settings();
555	$this->add_price_setup_fee_style_settings();
556	}
557
558	/**
559	* Register the widget controls.
560	*
561	* @return void
562	*/
563	protected function register_controls() {
564	$this->add_content_controls();
565	$this->register_style_settings();
566	}
567
568	/**
569	* Render the widget output on the frontend.
570	*
571	* @return void
572	*/
573	protected function render() {
574	$settings = $this->get_settings_for_display();
575
576	if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
577	?>
578	<div class="wp-block-surecart-product-price-chooser">
579	<label class="sc-form-label"><?php echo esc_html( $settings['label'] ); ?></label>
580	<div class="sc-choices">
581	<div class="sc-choice wp-block-surecart-product-price-choice-template sc-choice--checked is-layout-flex" style="align-items: center;">
582	<span class="wp-block-surecart-price-name"><?php echo esc_html__( 'Subscribe & Save', 'surecart' ); ?></span>
583	<div class="is-layout-flex" style="flex-direction:column;align-items:flex-end;gap:0;">
584	<?php // translators: %s is the price. ?>
585	<span class="wp-block-surecart-price-amount"><?php echo esc_html( sprintf( __( '%s /mo', 'surecart' ), Currency::format( 800 ) ) ); ?></span>
586	<?php // translators: %d is the number of days. ?>
587	<span class="wp-block-surecart-price-trial"><?php echo esc_html( sprintf( __( 'Starting in %d days', 'surecart' ), 15 ) ); ?></span>
588	<?php // translators: %s is the setup fee. ?>
589	<span class="wp-block-surecart-price-setup-fee"><?php echo esc_html( sprintf( __( '%s Setup fee', 'surecart' ), Currency::format( 1200 ) ) ); ?></span>
590	</div>
591	</div>
592	<div class="sc-choice wp-block-surecart-product-price-choice-template is-layout-flex" style="align-items: center;">
593	<span class="wp-block-surecart-price-name"><?php echo esc_html__( 'One Time', 'surecart' ); ?></span>
594	<div class="is-layout-flex" style="flex-direction: column;align-items:flex-end;gap:0;">
595	<?php // translators: %s is the price. ?>
596	<span class="wp-block-surecart-price-amount"><?php echo esc_html( Currency::format( 1000 ) ); ?></span>
597	<?php // translators: %s is the setup fee. ?>
598	<span class="wp-block-surecart-price-setup-fee"><?php echo esc_html( sprintf( __( '%s Setup fee', 'surecart' ), Currency::format( 200 ) ) ); ?></span>
599	</div>
600	</div>
601	</div>
602	</div>
603	<?php
604	return;
605	}
606
607	$attributes = array(
608	'label' => $settings['label'] ?? '',
609	);
610
611	?>
612	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
613	<!-- wp:surecart/product-price-chooser <?php echo wp_json_encode( $attributes ); ?> -->
614	<!-- wp:surecart/product-price-choice-template {"layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap","orientation":"horizontal"}} -->
615	<!-- wp:surecart/price-name {"style":{"layout":{"selfStretch":"fixed","flexSize":"50%"},"typography":{"fontStyle":"normal","fontWeight":"600"}}} /-->
616	<!-- wp:group {"style":{"spacing":{"blockGap":"0px"},"layout":{"selfStretch":"fixed","flexSize":"50%"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
617	<div class="wp-block-group">
618	<!-- wp:surecart/price-amount /-->
619	<!-- wp:surecart/price-trial /-->
620	<!-- wp:surecart/price-setup-fee /-->
621	</div>
622	<!-- /wp:group -->
623	<!-- /wp:surecart/product-price-choice-template -->
624	<!-- /wp:surecart/product-price-chooser -->
625	</div>
626	<?php
627	}
628
629	/**
630	* Render the widget output in the editor.
631	*
632	* @return void
633	*/
634	protected function content_template() {
635	?>
636	<div class="wp-block-surecart-product-price-chooser">
637	<label class="sc-form-label">{{{ settings.label}}}</label>
638	<div class="sc-choices">
639	<div class="sc-choice wp-block-surecart-product-price-choice-template sc-choice--checked is-layout-flex" style="align-items: center;">
640	<span class="wp-block-surecart-price-name"><?php echo esc_html__( 'Subscribe & Save', 'surecart' ); ?></span>
641	<div class="is-layout-flex" style="flex-direction:column;align-items:flex-end;gap:0;">
642	<?php // translators: %s is the price. ?>
643	<span class="wp-block-surecart-price-amount"><?php echo esc_html( sprintf( __( '%s /mo', 'surecart' ), Currency::format( 800 ) ) ); ?></span>
644	<?php // translators: %d is the number of days. ?>
645	<span class="wp-block-surecart-price-trial"><?php echo esc_html( sprintf( __( 'Starting in %d days', 'surecart' ), 15 ) ); ?></span>
646	<?php // translators: %s is the setup fee. ?>
647	<span class="wp-block-surecart-price-setup-fee"><?php echo esc_html( sprintf( __( '%s Setup fee', 'surecart' ), Currency::format( 1200 ) ) ); ?></span>
648	</div>
649	</div>
650	<div class="sc-choice wp-block-surecart-product-price-choice-template is-layout-flex" style="align-items: center;">
651	<span class="wp-block-surecart-price-name"><?php echo esc_html__( 'One Time', 'surecart' ); ?></span>
652	<div class="is-layout-flex" style="flex-direction: column;align-items:flex-end;gap:0;">
653	<?php // translators: %s is the price. ?>
654	<span class="wp-block-surecart-price-amount"><?php echo esc_html( Currency::format( 1000 ) ); ?></span>
655	<?php // translators: %s is the setup fee. ?>
656	<span class="wp-block-surecart-price-setup-fee"><?php echo esc_html( sprintf( __( '%s Setup fee', 'surecart' ), Currency::format( 200 ) ) ); ?></span>
657	</div>
658	</div>
659	</div>
660	</div>
661	<?php
662	}
663	}
664