fluent-cart / app / Views / frontend / customer_app.php

customer_app.php in FluentCart A New Era of eCommerce – Faster, Lighter, and Simpler 1.6.4, at app/Views/frontend/customer_app.php

123 lines 5.7 KB

Raw Download Zip

1	<?php if (!defined('ABSPATH')) {
2	exit; // Exit if accessed directly.
3	}
4	/**
5	* @var $colors string
6	* @var $active_tab string
7	*
8	*/
9	?>
10	<div class="fct_customer_profile_wrap">
11	<div class="fct-customer-root-container"
12	style="position: relative; min-height: 700px; <?php echo esc_attr($colors); ?>"
13	aria-busy="true"
14	role="main"
15	aria-label="<?php esc_attr_e('Customer profile', 'fluent-cart'); ?>"
16	>
17	<div id="fct-customer-loader"
18	style="position: absolute; left: 0;top: 0;width: 100%;height: 100%;z-index: 4;background: #ffffff;display: flex;gap: 16px;"
19	aria-hidden="true">
20	<div class="fct-customer-loader-left" style="max-width: 272px;width: 100%;flex: none;">
21	<div class="el-skeleton is-animated">
22	<div class="el-skeleton__item el-skeleton__p is-first"></div>
23	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
24	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div>
25	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div>
26	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div>
27	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
28	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph is-last"></div>
29	</div>
30	</div>
31	<div class="fct-customer-loader-right" style="flex: 1">
32	<div class="el-skeleton is-animated">
33	<div class="el-skeleton__item el-skeleton__p is-first"></div>
34	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
35	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
36	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div>
37	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div>
38	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div>
39	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div>
40	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div>
41	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div>
42	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
43	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
44	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph is-last"></div>
45	</div>
46	</div>
47	</div>
48
49	<div class="fct-customer-dashboard-app-container fluent-cart-customer-profile-app">
50	<?php do_action('fluent_cart/customer_menu'); ?>
51	<div class="fct-customer-dashboard-main-content">
52	<?php do_action('fluent_cart/customer_app'); ?>
53	</div>
54	</div>
55	</div>
56	</div>
57
58	<script type="text/javascript">
59	document.addEventListener('DOMContentLoaded', function () {
60	var navLink = document.querySelectorAll('.fct-customer-nav-link');
61	var menuToggle = document.getElementById('fct-customer-menu-toggle');
62	var menuHolder = document.getElementById('fct-customer-menu-holder');
63	var loader = document.getElementById('fct-customer-loader');
64	var navCompactToggle = document.getElementById('fct-customer-nav-compact-toggle');
65	var navCompactWrap = document.getElementById('fct-customer-dashboard-navs-wrap');
66
67	if (loader) {
68	loader.remove();
69	}
70
71	// see if we have active tab
72	var activeTab = '<?php echo esc_attr($active_tab); ?>';
73	if (activeTab) {
74	var menuItem = document.querySelector('.fct-customer-nav-item-' + activeTab);
75	if (menuItem) {
76	menuItem.classList.add('active_customer_menu');
77	}
78	}
79
80	// Toggle menu on button click
81	menuToggle.addEventListener('click', function (e) {
82	e.stopPropagation(); // prevent click from bubbling to document
83	menuHolder.classList.toggle('is-active');
84	});
85
86	// nav link click
87	if (navLink) {
88	navLink.forEach(function (link) {
89	link.addEventListener('click', function (e) {
90	e.stopPropagation();
91	menuHolder.classList.remove('is-active');
92	});
93	});
94	}
95
96	// Close menu on outside click
97	document.addEventListener('click', function (event) {
98	if (
99	menuHolder.classList.contains('is-active') &&
100	!menuHolder.contains(event.target) &&
101	event.target !== menuToggle
102	) {
103	menuHolder.classList.remove('is-active');
104	}
105	});
106
107	if (navCompactToggle) {
108	navCompactToggle.addEventListener('click', function (e) {
109	e.stopPropagation(); // prevent click from bubbling to document
110	this.classList.toggle('is-active');
111	navCompactWrap.classList.toggle('is-compact');
112
113	if (!this.classList.contains('is-active')) {
114	navCompactWrap.classList.add('expanding');
115	setTimeout(function () {
116	navCompactWrap.classList.remove('expanding');
117	}, 200);
118	}
119	});
120	}
121	});
122	</script>
123