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

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

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

VariantPills.php

473 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	* Variant Pills widget.
11	*/
12	class VariantPills extends \Elementor\Widget_Base {
13	/**
14	* Get widget name.
15	*
16	* @return string
17	*/
18	public function get_name() {
19	return 'surecart-variant-pills';
20	}
21
22	/**
23	* Get widget title.
24	*
25	* @return string
26	*/
27	public function get_title() {
28	return esc_html__( 'Product Variant Pills', 'surecart' );
29	}
30
31	/**
32	* Get widget icon.
33	*
34	* @return string
35	*/
36	public function get_icon() {
37	return 'eicon-product-categories';
38	}
39
40	/**
41	* Get the widget keywords.
42	*
43	* @return array
44	*/
45	public function get_keywords() {
46	return array( 'surecart', 'variants', 'variant', 'pills', 'product' );
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 style dependencies.
60	*
61	* @return array Element styles dependencies.
62	*/
63	public function get_style_depends() {
64	return array( 'surecart-product-variants', 'surecart-pill' );
65	}
66
67	/**
68	* Register the widget style settings.
69	*
70	* @return void
71	*/
72	private function register_style_settings() {
73	$wrapper_selector = '{{WRAPPER}} .wp-block-surecart-product-variant-pills__wrapper';
74	$pills_selector = '{{WRAPPER}} .wp-block-surecart-product-variant-pills';
75	$pill_options_wrapper_selector = '{{WRAPPER}} .sc-pill-option__wrapper';
76
77	$this->start_controls_section(
78	'section_variant_pills_layout_style',
79	[
80	'label' => esc_html__( 'Layout', 'surecart' ),
81	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
82	]
83	);
84
85	$this->add_control(
86	'variant_pills_wrapper_container_type',
87	[
88	'label' => esc_html__( 'Container Layout', 'surecart' ),
89	'type' => \Elementor\Controls_Manager::SELECT,
90	'default' => 'flex',
91	'options' => [
92	'flex' => esc_html__( 'Flexbox', 'surecart' ),
93	],
94	'selectors' => [
95	$wrapper_selector => '--display: {{VALUE}}; display: {{VALUE}}',
96	],
97	'separator' => 'after',
98	'editor_available' => true,
99	]
100	);
101
102	$this->add_control(
103	'variant_pills_wrapper_flex_direction',
104	[
105	'label' => esc_html__( 'Flex Direction', 'surecart' ),
106	'type' => \Elementor\Controls_Manager::SELECT,
107	'default' => 'column',
108	'options' => [
109	'row' => esc_html__( 'Row', 'surecart' ),
110	'column' => esc_html__( 'Column', 'surecart' ),
111	],
112	'selectors' => [
113	$wrapper_selector => 'flex-direction: {{VALUE}}',
114	],
115	'editor_available' => true,
116	]
117	);
118
119	$this->add_control(
120	'variant_pills_wrapper_flex_gap',
121	[
122	'label' => esc_html__( 'Flex Gap', 'surecart' ),
123	'type' => \Elementor\Controls_Manager::SLIDER,
124	'size_units' => [ 'px', 'em', '%' ],
125	'default' => [
126	'size' => 15,
127	'unit' => 'px',
128	],
129	'selectors' => [
130	$wrapper_selector => 'gap: {{SIZE}}{{UNIT}}',
131	],
132	'editor_available' => true,
133	]
134	);
135
136	$this->add_control(
137	'variant_pills_wrapper_flex_justify_content',
138	[
139	'label' => esc_html__( 'Justify Content', 'surecart' ),
140	'type' => \Elementor\Controls_Manager::SELECT,
141	'default' => 'flex-start',
142	'options' => [
143	'flex-start' => esc_html__( 'Start', 'surecart' ),
144	'flex-end' => esc_html__( 'End', 'surecart' ),
145	'center' => esc_html__( 'Center', 'surecart' ),
146	'space-between' => esc_html__( 'Space Between', 'surecart' ),
147	'space-around' => esc_html__( 'Space Around', 'surecart' ),
148	'space-evenly' => esc_html__( 'Space Evenly', 'surecart' ),
149	],
150	'selectors' => [
151	$wrapper_selector => 'justify-content: {{VALUE}}',
152	],
153	'editor_available' => true,
154	]
155	);
156
157	$this->add_control(
158	'variant_pills_wrapper_flex_align_items',
159	[
160	'label' => esc_html__( 'Align Items', 'surecart' ),
161	'type' => \Elementor\Controls_Manager::SELECT,
162	'default' => 'flex-start',
163	'options' => [
164	'flex-start' => esc_html__( 'Start', 'surecart' ),
165	'flex-end' => esc_html__( 'End', 'surecart' ),
166	'center' => esc_html__( 'Center', 'surecart' ),
167	'stretch' => esc_html__( 'Stretch', 'surecart' ),
168	'baseline' => esc_html__( 'Baseline', 'surecart' ),
169	],
170	'selectors' => [
171	$wrapper_selector => 'align-items: {{VALUE}}',
172	],
173	'editor_available' => true,
174	]
175	);
176
177	$this->add_control(
178	'variant_pills_wrapper_flex_wrap',
179	[
180	'label' => esc_html__( 'Flex Wrap', 'surecart' ),
181	'type' => \Elementor\Controls_Manager::SELECT,
182	'default' => 'wrap',
183	'options' => [
184	'nowrap' => esc_html__( 'No Wrap', 'surecart' ),
185	'wrap' => esc_html__( 'Wrap', 'surecart' ),
186	'wrap-reverse' => esc_html__( 'Wrap Reverse', 'surecart' ),
187	],
188	'selectors' => [
189	$wrapper_selector => 'flex-wrap: {{VALUE}}',
190	],
191	'editor_available' => true,
192	]
193	);
194
195	$this->add_control(
196	'variant_pills_wrapper_flex_align_content',
197	[
198	'label' => esc_html__( 'Align Content', 'surecart' ),
199	'type' => \Elementor\Controls_Manager::SELECT,
200	'default' => 'flex-start',
201	'options' => [
202	'flex-start' => esc_html__( 'Start', 'surecart' ),
203	'flex-end' => esc_html__( 'End', 'surecart' ),
204	'center' => esc_html__( 'Center', 'surecart' ),
205	'space-between' => esc_html__( 'Space Between', 'surecart' ),
206	'space-around' => esc_html__( 'Space Around', 'surecart' ),
207	'space-evenly' => esc_html__( 'Space Evenly', 'surecart' ),
208	],
209	'selectors' => [
210	$wrapper_selector => 'align-content: {{VALUE}}',
211	],
212	'editor_available' => true,
213	]
214	);
215
216	$this->end_controls_section();
217
218	$this->start_controls_section(
219	'section_variant_pills_style',
220	[
221	'label' => esc_html__( 'Variant pills', 'surecart' ),
222	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
223	]
224	);
225
226	$this->add_control(
227	'text_color',
228	[
229	'label' => esc_html__( 'Text Color', 'surecart' ),
230	'type' => \Elementor\Controls_Manager::COLOR,
231	'selectors' => [
232	$pills_selector => 'color: {{VALUE}}',
233	$pills_selector . ' .sc-form-label' => 'color: {{VALUE}}',
234	],
235	]
236	);
237
238	$this->add_group_control(
239	\Elementor\Group_Control_Typography::get_type(),
240	[
241	'name' => 'pills_typography',
242	'label' => esc_html__( 'Typography', 'surecart' ),
243	'selector' => $pills_selector . ' .sc-form-label',
244	]
245	);
246
247	$this->add_responsive_control(
248	'pill_gap',
249	[
250	'label' => esc_html__( 'Pill Gap', 'surecart' ),
251	'type' => \Elementor\Controls_Manager::SLIDER,
252	'size_units' => [ 'px', 'em', '%' ],
253	'description' => esc_html__( 'Space between each pill.', 'surecart' ),
254	'range' => [
255	'px' => [
256	'min' => 0,
257	'step' => 1,
258	'max' => 1000,
259	],
260	'em' => [
261	'min' => 0,
262	'step' => 0.1,
263	'max' => 10,
264	],
265	],
266	'selectors' => [
267	$pill_options_wrapper_selector => 'gap: {{SIZE}}{{UNIT}};',
268	],
269	]
270	);
271
272	$this->end_controls_section();
273
274	$this->start_controls_section(
275	'section_variant_pill_style',
276	[
277	'label' => esc_html__( 'Variant pill', 'surecart' ),
278	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
279	]
280	);
281
282	$this->add_control(
283	'pill_text_color',
284	[
285	'label' => esc_html__( 'Text Color', 'surecart' ),
286	'type' => \Elementor\Controls_Manager::COLOR,
287	'selectors' => [
288	'{{WRAPPER}} .sc-pill-option__wrapper .wp-block-surecart-product-variant-pill:not(.sc-pill-option__button--selected)' => 'color: {{VALUE}} !important',
289	],
290	]
291	);
292
293	$this->add_control(
294	'pill_background_color',
295	[
296	'label' => esc_html__( 'Background Color', 'surecart' ),
297	'type' => \Elementor\Controls_Manager::COLOR,
298	'global' => [
299	'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_PRIMARY,
300	],
301	'selectors' => [
302	'{{WRAPPER}} .sc-pill-option__wrapper .wp-block-surecart-product-variant-pill:not(.sc-pill-option__button--selected)' => 'background-color: {{VALUE}} !important',
303	],
304	]
305	);
306
307	$this->add_control(
308	'pill_highlight_text_color',
309	[
310	'label' => esc_html__( 'Highlight Text', 'surecart' ),
311	'type' => \Elementor\Controls_Manager::COLOR,
312	'selectors' => [
313	'{{WRAPPER}} .sc-pill-option__wrapper .wp-block-surecart-product-variant-pill.sc-pill-option__button--selected' => 'color: {{VALUE}} !important',
314	],
315	]
316	);
317
318	$this->add_control(
319	'pill_highlight_background_color',
320	[
321	'label' => esc_html__( 'Highlight Background', 'surecart' ),
322	'type' => \Elementor\Controls_Manager::COLOR,
323	'global' => [
324	'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_PRIMARY,
325	],
326	'selectors' => [
327	'{{WRAPPER}} .sc-pill-option__wrapper .wp-block-surecart-product-variant-pill.sc-pill-option__button--selected' => 'background-color: {{VALUE}} !important',
328	],
329	]
330	);
331
332	$this->add_control(
333	'pill_highlight_border_color',
334	[
335	'label' => esc_html__( 'Highlight Border', 'surecart' ),
336	'type' => \Elementor\Controls_Manager::COLOR,
337	'global' => [
338	'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_PRIMARY,
339	],
340	'selectors' => [
341	'{{WRAPPER}} .sc-pill-option__wrapper .wp-block-surecart-product-variant-pill.sc-pill-option__button--selected' => 'border-color: {{VALUE}} !important',
342	],
343	]
344	);
345
346	$this->add_group_control(
347	\Elementor\Group_Control_Typography::get_type(),
348	[
349	'name' => 'pill_typography',
350	'label' => esc_html__( 'Typography', 'surecart' ),
351	'selector' => '{{WRAPPER}} .sc-pill-option__wrapper .wp-block-surecart-product-variant-pill',
352	]
353	);
354
355	$this->add_responsive_control(
356	'pill_padding',
357	[
358	'label' => esc_html__( 'Padding', 'surecart' ),
359	'type' => \Elementor\Controls_Manager::DIMENSIONS,
360	'size_units' => [ 'px', 'em', '%' ],
361	'selectors' => [
362	'{{WRAPPER}} .sc-pill-option__wrapper .wp-block-surecart-product-variant-pill' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
363	],
364	]
365	);
366
367	$this->add_responsive_control(
368	'pill_margin',
369	[
370	'label' => esc_html__( 'Margin', 'surecart' ),
371	'type' => \Elementor\Controls_Manager::DIMENSIONS,
372	'size_units' => [ 'px', 'em', '%' ],
373	'selectors' => [
374	'{{WRAPPER}} .sc-pill-option__wrapper .wp-block-surecart-product-variant-pill' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
375	],
376	]
377	);
378
379	$this->add_group_control(
380	\Elementor\Group_Control_Border::get_type(),
381	[
382	'name' => 'pill_border',
383	'selector' => '{{WRAPPER}} .sc-pill-option__wrapper .wp-block-surecart-product-variant-pill',
384	'separator' => 'before',
385	]
386	);
387
388	$this->add_control(
389	'pill_border_radius',
390	[
391	'label' => esc_html__( 'Border Radius', 'surecart' ),
392	'type' => \Elementor\Controls_Manager::DIMENSIONS,
393	'size_units' => [ 'px', 'em', '%' ],
394	'selectors' => [
395	'{{WRAPPER}} .sc-pill-option__wrapper .wp-block-surecart-product-variant-pill' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
396	],
397	]
398	);
399
400	$this->end_controls_section();
401	}
402
403	/**
404	* Register the widget controls.
405	*
406	* @return void
407	*/
408	protected function register_controls() {
409	$this->register_style_settings();
410	}
411
412	/**
413	* Render the widget output on the frontend.
414	*
415	* @return void
416	*/
417	protected function render() {
418	if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
419	$this->content_template();
420	return;
421	}
422
423	// If product has no variants, return.
424	if ( empty( sc_get_product()->variant_options->data ?? [] ) ) {
425	return;
426	}
427
428	$settings = $this->get_settings_for_display();
429	$variant_attributes = array(
430	'highlight_text' => $settings['pill_highlight_text_color'] ?? '',
431	'highlight_background' => $settings['pill_highlight_background_color'] ?? '',
432	'highlight_border' => $settings['pill_highlight_border_color'] ?? '',
433	);
434
435	$this->add_render_attribute( 'wrapper', 'class', 'wp-block-surecart-product-variant-pills__wrapper' );
436	?>
437	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
438	<!-- wp:surecart/product-variant-pills -->
439	<!-- wp:surecart/product-variant-pill <?php echo wp_json_encode( $variant_attributes ); ?> /-->
440	<!-- /wp:surecart/product-variant-pills -->
441	</div>
442	<?php
443	}
444
445	/**
446	* Render the widget output on the editor.
447	*
448	* @return void
449	*/
450	protected function content_template() {
451	?>
452	<div class="wp-block-surecart-product-variant-pills__wrapper">
453	<div class="wp-block-surecart-product-variant-pills">
454	<label class="sc-form-label"><?php echo esc_html__( 'Color', 'surecart' ); ?></label>
455	<div class="sc-pill-option__wrapper">
456	<div class="sc-pill-option__button wp-block-surecart-product-variant-pill sc-pill-option__button--selected"><?php echo esc_html__( 'Red', 'surecart' ); ?></div>
457	<div class="sc-pill-option__button wp-block-surecart-product-variant-pill"><?php echo esc_html__( 'Blue', 'surecart' ); ?></div>
458	<div class="sc-pill-option__button wp-block-surecart-product-variant-pill"><?php echo esc_html__( 'Green', 'surecart' ); ?></div>
459	</div>
460	</div>
461	<div class="wp-block-surecart-product-variant-pills">
462	<label class="sc-form-label"><?php echo esc_html__( 'Size', 'surecart' ); ?></label>
463	<div class="sc-pill-option__wrapper">
464	<div class="sc-pill-option__button wp-block-surecart-product-variant-pill sc-pill-option__button--selected"><?php echo esc_html__( 'Small', 'surecart' ); ?></div>
465	<div class="sc-pill-option__button wp-block-surecart-product-variant-pill"><?php echo esc_html__( 'Medium', 'surecart' ); ?></div>
466	<div class="sc-pill-option__button wp-block-surecart-product-variant-pill"><?php echo esc_html__( 'Large', 'surecart' ); ?></div>
467	</div>
468	</div>
469	</div>
470	<?php
471	}
472	}
473