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

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

135 lines 6.6 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 class="fct-customer-dashboard-app-container fluent-cart-customer-profile-app">
18	<?php
19	// Sits inside the app container, so the portal's own border and
20	// radius frame it; the columns, divider and header rule mirror the
21	// mounted menu and content (customer-profile-global.scss).
22	?>
23	<div id="fct-customer-loader"
24	style="position: absolute; left: 0;top: 0;width: 100%;height: 100%;z-index: 4;background: var(--fct-customer-dashboard-card-bg, #ffffff);display: flex;"
25	aria-hidden="true">
26	<div class="fct-customer-loader-left">
27	<div class="fct-customer-loader-head el-skeleton is-animated">
28	<div class="el-skeleton__item el-skeleton__circle"></div>
29	<div class="fct-customer-loader-head-lines">
30	<div class="el-skeleton__item el-skeleton__p" style="width: 70%"></div>
31	<div class="el-skeleton__item el-skeleton__p" style="width: 90%"></div>
32	</div>
33	</div>
34	<div class="fct-customer-loader-menu el-skeleton is-animated">
35	<div class="el-skeleton__item el-skeleton__p is-first"></div>
36	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
37	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div>
38	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div>
39	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div>
40	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
41	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph is-last"></div>
42	</div>
43	</div>
44	<div class="fct-customer-loader-right">
45	<div class="el-skeleton is-animated">
46	<div class="el-skeleton__item el-skeleton__p is-first"></div>
47	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
48	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
49	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div>
50	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div>
51	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div>
52	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div>
53	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div>
54	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div>
55	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
56	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div>
57	<div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph is-last"></div>
58	</div>
59	</div>
60	</div>
61
62	<?php do_action('fluent_cart/customer_menu'); ?>
63	<div class="fct-customer-dashboard-main-content">
64	<?php do_action('fluent_cart/customer_app'); ?>
65	</div>
66	</div>
67	</div>
68	</div>
69
70	<script type="text/javascript">
71	document.addEventListener('DOMContentLoaded', function () {
72	var navLink = document.querySelectorAll('.fct-customer-nav-link');
73	var menuToggle = document.getElementById('fct-customer-menu-toggle');
74	var menuHolder = document.getElementById('fct-customer-menu-holder');
75	var loader = document.getElementById('fct-customer-loader');
76	var navCompactToggle = document.getElementById('fct-customer-nav-compact-toggle');
77	var navCompactWrap = document.getElementById('fct-customer-dashboard-navs-wrap');
78
79	if (loader) {
80	loader.remove();
81	}
82
83	// see if we have active tab
84	var activeTab = '<?php echo esc_attr($active_tab); ?>';
85	if (activeTab) {
86	var menuItem = document.querySelector('.fct-customer-nav-item-' + activeTab);
87	if (menuItem) {
88	menuItem.classList.add('active_customer_menu');
89	}
90	}
91
92	// Toggle menu on button click
93	menuToggle.addEventListener('click', function (e) {
94	e.stopPropagation(); // prevent click from bubbling to document
95	menuHolder.classList.toggle('is-active');
96	});
97
98	// nav link click
99	if (navLink) {
100	navLink.forEach(function (link) {
101	link.addEventListener('click', function (e) {
102	e.stopPropagation();
103	menuHolder.classList.remove('is-active');
104	});
105	});
106	}
107
108	// Close menu on outside click
109	document.addEventListener('click', function (event) {
110	if (
111	menuHolder.classList.contains('is-active') &&
112	!menuHolder.contains(event.target) &&
113	event.target !== menuToggle
114	) {
115	menuHolder.classList.remove('is-active');
116	}
117	});
118
119	if (navCompactToggle) {
120	navCompactToggle.addEventListener('click', function (e) {
121	e.stopPropagation(); // prevent click from bubbling to document
122	this.classList.toggle('is-active');
123	navCompactWrap.classList.toggle('is-compact');
124
125	if (!this.classList.contains('is-active')) {
126	navCompactWrap.classList.add('expanding');
127	setTimeout(function () {
128	navCompactWrap.classList.remove('expanding');
129	}, 200);
130	}
131	});
132	}
133	});
134	</script>
135