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

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

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

CartMenuIcon.php

396 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	* Cart menu icon widget.
11	*/
12	class CartMenuIcon extends \Elementor\Widget_Base {
13	/**
14	* Default cart icon.
15	*/
16	public const DEFAULT_CART_ICON = array(
17	'value' => 'fas fa-shopping-bag',
18	'library' => 'fa-solid',
19	);
20
21	/**
22	* Cart icon.
23	*
24	* @var string
25	*/
26	public $cart_icon = '';
27
28	/**
29	* Get widget name.
30	*
31	* @return string
32	*/
33	public function get_name() {
34	return 'surecart-cart-icon';
35	}
36
37	/**
38	* Get widget title.
39	*
40	* @return string
41	*/
42	public function get_title() {
43	return esc_html__( 'Cart Toggle Icon', 'surecart' );
44	}
45
46	/**
47	* Get widget icon.
48	*
49	* @return string
50	*/
51	public function get_icon() {
52	return 'eicon-cart';
53	}
54
55	/**
56	* Get the widget keywords.
57	*
58	* @return array
59	*/
60	public function get_keywords() {
61	return array( 'surecart', 'cart', 'product', 'menu', 'toggle' );
62	}
63
64	/**
65	* Is the content dynamic?
66	*
67	* @return bool
68	*/
69	protected function is_dynamic_content(): bool {
70	return false;
71	}
72
73	/**
74	* Get the widget categories.
75	*
76	* @return array
77	*/
78	public function get_categories() {
79	return array( 'surecart-elementor-elements' );
80	}
81
82	/**
83	* Register the content settings.
84	*
85	* @return void
86	*/
87	private function register_content_settings() {
88	$this->start_controls_section(
89	'content_section',
90	array(
91	'label' => esc_html__( 'Content', 'surecart' ),
92	'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
93	)
94	);
95
96	$this->add_control(
97	'cart_icon',
98	array(
99	'label' => esc_html__( 'Icon', 'surecart' ),
100	'type' => \Elementor\Controls_Manager::ICONS,
101	'skin' => 'inline',
102	'label_block' => false,
103	'default' => self::DEFAULT_CART_ICON,
104	'recommended' => [
105	'fa-solid' => [
106	'shopping-bag',
107	'cart-arrow-down',
108	'cart-plus',
109	'shopping-cart',
110	'shopping-basket',
111	],
112	],
113	)
114	);
115
116	$this->add_control(
117	'cart_menu_always_shown',
118	array(
119	'label' => esc_html__( 'Always Show Cart Menu', 'surecart' ),
120	'type' => \Elementor\Controls_Manager::SWITCHER,
121	'label_on' => esc_html__( 'Yes', 'surecart' ),
122	'label_off' => esc_html__( 'No', 'surecart' ),
123	'return_value' => 'yes',
124	'default' => 'yes',
125	)
126	);
127
128	$this->end_controls_section();
129	}
130
131
132	/**
133	* Register the widget style settings.
134	*
135	* @return void
136	*/
137	private function register_style_settings() {
138	$this->start_controls_section(
139	'section_style_icon',
140	[
141	'label' => esc_html__( 'Icon', 'surecart' ),
142	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
143	]
144	);
145
146	$this->start_controls_tabs( 'icon_colors' );
147
148	$this->start_controls_tab(
149	'icon_colors_normal',
150	[
151	'label' => esc_html__( 'Normal', 'surecart' ),
152	]
153	);
154
155	$this->add_control(
156	'primary_color',
157	[
158	'label' => esc_html__( 'Primary Color', 'surecart' ),
159	'type' => \Elementor\Controls_Manager::COLOR,
160	'default' => '',
161	'selectors' => [
162	'{{WRAPPER}} .sc-cart-icon' => 'color: {{VALUE}};',
163	'{{WRAPPER}} .sc-cart-icon svg' => 'fill: {{VALUE}};',
164	],
165	]
166	);
167
168	$this->end_controls_tab();
169
170	$this->start_controls_tab(
171	'icon_colors_hover',
172	[
173	'label' => esc_html__( 'Hover', 'surecart' ),
174	]
175	);
176
177	$this->add_control(
178	'hover_primary_color',
179	[
180	'label' => esc_html__( 'Primary Color', 'surecart' ),
181	'type' => \Elementor\Controls_Manager::COLOR,
182	'default' => '',
183	'selectors' => [
184	'{{WRAPPER}} .sc-cart-icon:hover' => 'color: {{VALUE}};',
185	'{{WRAPPER}} .sc-cart-icon:hover svg' => 'fill: {{VALUE}};',
186	],
187	]
188	);
189
190	$this->add_control(
191	'hover_animation',
192	[
193	'label' => esc_html__( 'Hover Animation', 'surecart' ),
194	'type' => \Elementor\Controls_Manager::HOVER_ANIMATION,
195	]
196	);
197
198	$this->end_controls_tab();
199
200	$this->end_controls_tabs();
201
202	$this->add_group_control(
203	\Elementor\Group_Control_Typography::get_type(),
204	[
205	'name' => 'icon_typography',
206	'global' => [
207	'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_PRIMARY,
208	],
209	'selector' => '{{WRAPPER}} .sc-cart-icon',
210	]
211	);
212
213	$this->add_responsive_control(
214	'size',
215	[
216	'label' => esc_html__( 'Size', 'surecart' ),
217	'type' => \Elementor\Controls_Manager::SLIDER,
218	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
219	'range' => [
220	'px' => [
221	'min' => 6,
222	'max' => 300,
223	],
224	],
225	'default' => [
226	'size' => 20,
227	'unit' => 'px',
228	],
229	'selectors' => [
230	'{{WRAPPER}} .sc-cart-icon' => 'font-size: {{SIZE}}{{UNIT}};',
231	'{{WRAPPER}} .sc-cart-icon svg' => 'height: {{SIZE}}{{UNIT}};',
232	],
233	'separator' => 'before',
234	]
235	);
236
237	$this->add_responsive_control(
238	'width',
239	[
240	'label' => esc_html__( 'Width', 'surecart' ),
241	'type' => \Elementor\Controls_Manager::SLIDER,
242	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
243	'range' => [
244	'px' => [
245	'min' => 6,
246	'max' => 300,
247	],
248	],
249	'default' => [
250	'size' => 20,
251	'unit' => 'px',
252	],
253	'selectors' => [
254	'{{WRAPPER}} .sc-cart-icon' => 'width: {{SIZE}}{{UNIT}};',
255	],
256	'separator' => 'before',
257	]
258	);
259
260	$this->add_control(
261	'fit_to_size',
262	[
263	'label' => esc_html__( 'Fit to Size', 'surecart' ),
264	'type' => \Elementor\Controls_Manager::SWITCHER,
265	'description' => 'Avoid gaps around icons when width and height aren\'t equal',
266	'label_off' => esc_html__( 'Off', 'surecart' ),
267	'label_on' => esc_html__( 'On', 'surecart' ),
268	'condition' => [
269	'cart_icon[library]' => 'svg',
270	],
271	'selectors' => [
272	'{{WRAPPER}} .sc-cart-icon svg' => 'width: auto;',
273	],
274	]
275	);
276
277	$this->add_control(
278	'icon_padding',
279	[
280	'label' => esc_html__( 'Padding', 'surecart' ),
281	'type' => \Elementor\Controls_Manager::SLIDER,
282	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
283	'selectors' => [
284	'{{WRAPPER}} .sc-cart-icon' => 'padding: {{SIZE}}{{UNIT}};',
285	],
286	'range' => [
287	'px' => [
288	'max' => 50,
289	],
290	'em' => [
291	'min' => 0,
292	'max' => 5,
293	],
294	'rem' => [
295	'min' => 0,
296	'max' => 5,
297	],
298	],
299	]
300	);
301
302	$this->add_responsive_control(
303	'rotate',
304	[
305	'label' => esc_html__( 'Rotate', 'surecart' ),
306	'type' => \Elementor\Controls_Manager::SLIDER,
307	'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
308	'default' => [
309	'unit' => 'deg',
310	],
311	'tablet_default' => [
312	'unit' => 'deg',
313	],
314	'mobile_default' => [
315	'unit' => 'deg',
316	],
317	'selectors' => [
318	'{{WRAPPER}} .sc-cart-icon i, {{WRAPPER}} .sc-cart-icon svg' => 'transform: rotate({{SIZE}}{{UNIT}});',
319	],
320	]
321	);
322
323	$this->add_control(
324	'border_width',
325	[
326	'label' => esc_html__( 'Border Width', 'surecart' ),
327	'type' => \Elementor\Controls_Manager::DIMENSIONS,
328	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
329	'selectors' => [
330	'{{WRAPPER}} .sc-cart-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
331	],
332	]
333	);
334
335	$this->add_responsive_control(
336	'border_radius',
337	[
338	'label' => esc_html__( 'Border Radius', 'surecart' ),
339	'type' => \Elementor\Controls_Manager::DIMENSIONS,
340	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
341	'selectors' => [
342	'{{WRAPPER}} .sc-cart-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
343	],
344	]
345	);
346
347	$this->end_controls_section();
348	}
349
350	/**
351	* Register the widget controls.
352	*
353	* @return void
354	*/
355	protected function register_controls() {
356	$this->register_content_settings();
357	$this->register_style_settings();
358	}
359
360	/**
361	* Render the widget.
362	*
363	* @return void
364	*/
365	protected function render(): void {
366	$settings = $this->get_settings_for_display();
367	$cart_menu_always_shown = ! empty( $settings['cart_menu_always_shown'] ) && 'yes' === $settings['cart_menu_always_shown'] ? true : false;
368	$has_icon = ! empty( $settings['cart_icon']['value'] );
369	$this->cart_icon = \Elementor\Icons_Manager::try_get_icon_html( $has_icon ? $settings['cart_icon'] : self::DEFAULT_CART_ICON, [ 'aria-hidden' => 'true' ] );
370
371	$attributes = array(
372	'cart_menu_always_shown' => $cart_menu_always_shown,
373	'custom_icon' => $this->cart_icon,
374	);
375
376	if ( ! empty( $settings['hover_animation'] ) ) {
377	$this->add_render_attribute( 'icon-wrapper', 'class', 'sc-cart-icon elementor-animation-' . $settings['hover_animation'] );
378	}
379	?>
380
381	<div <?php echo $this->get_render_attribute_string( 'icon-wrapper' ); ?> class="sc-cart-icon" style="font-size: var(--sc-cart-icon-size, 1.1em); cursor: pointer; position: relative;" aria-label="<?php echo esc_attr__( 'Open cart', 'surecart' ); ?>"> <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
382	<?php
383	if ( \Elementor\Plugin::instance()->editor->is_edit_mode() ) :
384	?>
385	<?php echo $this->cart_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
386	<span class="sc-cart-count" style="box-sizing: border-box; position: absolute; inset: -12px -16px auto auto; text-align: center; font-size: 10px; font-weight: bold; border-radius: var(--sc-cart-icon-counter-border-radius, 9999px); color: var(--sc-cart-icon-counter-color, var(--sc-color-primary-text, var(--sc-color-white))); background: var(--sc-cart-icon-counter-background, var(--sc-color-primary-500)); box-shadow: var(--sc-cart-icon-box-shadow, var(--sc-shadow-x-large)); padding: 2px 6px; line-height: 14px; min-width: 14px; z-index: 1;">2</span>
387	<?php else : ?>
388	<?php
389	echo do_blocks( '<!-- wp:surecart/cart-menu-icon-button ' . wp_json_encode( $attributes ) . ' /-->' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
390	endif;
391	?>
392	</div>
393	<?php
394	}
395	}
396