send-users-email / admin / partials / custom-html-template.php

custom-html-template.php in Send Users Email – Email Subscribers, Email Marketing Newsletter trunk, at admin/partials/custom-html-template.php

135 lines 7.4 KB

Raw Download Zip

1	<?php
2	// Check if the file is being accessed directly
3	if ( !defined( 'ABSPATH' ) ) {
4	exit;
5	}
6
7	/**
8	* Template for displaying the custom HTML email template editor.
9	* @var $args
10	*/
11	$title = $args['title'];
12	$data = $args['data'] ?? [];
13	$is_default = $args['is_default'] ?? false;
14	?>
15
16	<div class="sue-pro-wrap sue-custom-template-wrap">
17
18	<div class="sue-pro-header">
19	<h2><?php echo esc_html( $title ); ?></h2>
20	<p><?php esc_html_e( 'Create and save a custom HTML email layout for your campaigns.', 'send-users-email' ); ?></p>
21	</div>
22
23	<div class="sue-settings-layout sue-custom-template-layout">
24
25	<div class="sue-settings-main">
26	<?php if ( $is_default ): ?>
27	<div class="sue-notice sue-notice-info">
28	<div class="sue-notice-icon">🎨</div>
29	<div class="sue-notice-body">
30	<p class="sue-notice-title"><?php esc_html_e( 'Default template active', 'send-users-email' ); ?></p>
31	<p><?php esc_html_e( 'This custom HTML template is currently set as the default email template.', 'send-users-email' ); ?></p>
32	</div>
33	</div>
34	<?php endif; ?>
35
36	<div class="sue-log-card">
37	<div class="sue-log-card-header">
38	<span class="sue-log-card-icon">🧩</span>
39	<h3><?php esc_html_e( 'HTML Template Editor', 'send-users-email' ); ?></h3>
40	</div>
41	<div class="sue-log-card-body">
42	<div class="sue-messages"></div>
43
44	<form action="javascript:void(0)" id="sue-custom-html-template-form" method="post">
45	<div class="sue-field-row sue-field-row-editor">
46	<div class="sue-field-label">
47	<label for="custom_html_css"><?php esc_html_e( 'Template HTML', 'send-users-email' ); ?></label>
48	<p class="sue-form-hint"><?php esc_html_e( 'Paste the full HTML for your email layout here. You can include inline CSS and the placeholders shown in the sidebar.', 'send-users-email' ); ?></p>
49	<p class="sue-form-hint"><?php esc_html_e( 'Tip: Save your changes here, then open Theme Preview to verify the output before sending.', 'send-users-email' ); ?></p>
50	</div>
51	<div class="sue-field-input">
52	<div class="wp-editor-wrap sue-custom-template-editor-wrap">
53	<textarea id="custom_html_css" name="custom_html_css" rows="20" class="sue-custom-template-editor"><?php echo esc_textarea( $data ); ?></textarea>
54	</div>
55	</div>
56	</div>
57
58	<div class="sue-field-row sue-field-row-actions">
59	<div class="sue-field-label">
60	<label><?php esc_html_e( 'Save changes', 'send-users-email' ); ?></label>
61	<p class="sue-form-hint"><?php esc_html_e( 'Your template will be stored in the plugin settings and used whenever the custom theme is selected.', 'send-users-email' ); ?></p>
62	</div>
63	<div class="sue-field-input">
64	<div class="sue-custom-template-actions">
65	<div class="spinner-border text-info sue-spinner" role="status">
66	<span class="visually-hidden"><?php esc_html_e( 'Loading...', 'send-users-email' ); ?></span>
67	</div>
68
69	<button type="submit" class="sue-btn sue-btn-primary" id="sue-custom-html-template-btn">
70	<span class="dashicons dashicons-saved" aria-hidden="true"></span>
71	<?php esc_html_e( 'Save Template', 'send-users-email' ); ?>
72	</button>
73	</div>
74	</div>
75	</div>
76	</form>
77	</div>
78	</div>
79	</div>
80
81	<div class="sue-settings-sidebar sue-custom-template-sidebar">
82	<div class="sue-sidebar-card">
83	<div class="sue-sidebar-card-header">
84	<span class="sue-sidebar-card-icon">ℹ️</span>
85	<div>
86	<p class="sue-sidebar-card-title"><?php esc_html_e( 'How it works', 'send-users-email' ); ?></p>
87	<p class="sue-sidebar-card-desc"><?php esc_html_e( 'Build your own layout and insert the placeholders below where dynamic email content should appear.', 'send-users-email' ); ?></p>
88	</div>
89	</div>
90
91	<div class="sue-notice sue-notice-info sue-custom-template-note">
92	<div class="sue-notice-icon">💡</div>
93	<div class="sue-notice-body">
94	<p class="sue-notice-title"><?php esc_html_e( 'Recommended workflow', 'send-users-email' ); ?></p>
95	<p><?php esc_html_e( 'Copy HTML from your preferred newsletter builder or a compatible template source, then replace the content areas with the plugin placeholders.', 'send-users-email' ); ?></p>
96	<p><?php esc_html_e( 'After saving, open Theme Preview to confirm that the title, tagline, content, and logo render correctly.', 'send-users-email' ); ?></p>
97	</div>
98	</div>
99	</div>
100
101	<div class="sue-sidebar-card">
102	<div class="sue-sidebar-card-header">
103	<span class="sue-sidebar-card-icon">🏷️</span>
104	<div>
105	<p class="sue-sidebar-card-title"><?php esc_html_e( 'Placeholders', 'send-users-email' ); ?></p>
106	<p class="sue-sidebar-card-desc"><?php esc_html_e( 'Use these placeholders in your HTML to output the email content dynamically.', 'send-users-email' ); ?></p>
107	</div>
108	</div>
109
110	<ul class="sue-placeholder-list sue-custom-template-placeholders">
111	<li>
112	<code>{{email_title}}</code>
113	<span><?php esc_html_e( 'Email title from the editor', 'send-users-email' ); ?></span>
114	</li>
115	<li>
116	<code>{{email_tagline}}</code>
117	<span><?php esc_html_e( 'Email tagline from the editor', 'send-users-email' ); ?></span>
118	</li>
119	<li>
120	<code>{{email_content}}</code>
121	<span><?php esc_html_e( 'Main email content from the editor', 'send-users-email' ); ?></span>
122	</li>
123	<li>
124	<code>{{email_logo}}</code>
125	<span><?php esc_html_e( 'Logo URL configured in the settings', 'send-users-email' ); ?></span>
126	</li>
127	</ul>
128	<div class="sue-messages"></div>
129	</div>
130	</div>
131	</div>
132	</div>
133
134	<?php require_once SEND_USERS_EMAIL_PLUGIN_BASE_PATH . '/partials/toast.php'; ?>
135